- ベストアンサー
ホームページのナビゲーションについて教えてください
- ホームページのナビゲーションについて教えてください。ホームページのリニューアルを検討しており、トップページのデザインに悩んでいます。
- ホームページのナビゲーションについて悩んでいます。トップページのデザインをどのようにするか悩んでいます。
- ホームページのリニューアルを検討しています。トップページのデザインに関してお悩みですか？
- yatsu0812
- お礼率100% (15/15)
- ホームページ作成ソフト
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
サンプルです。 ・HTML4.01strict + CSS2.1 ・Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) で検証済み ★ナビゲーションは、SSIなどでインクルードされ各ページで共通にになることが多いため、文書構造によってデザインを変えます。 ★用意する画像とファイル名 アイコン 40px×40px ./images/icons/top.gif ./images/icons/product.gif ./images/icons/info.gif ./images/profile.gif 背景画像 640px×480px; ./images/1.jpg ./images/2.jpg ./images/3.jpg ./images/4.jpg ★タブは＿に置換してあるので戻す。 ★スタイルシートは後ほど・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css"> ＿<link rel="styleSheet" type="text/css" media="print" href="./styleSheet/print.css"> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<h3>サイトマップ</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="/">トップ</a></li> ＿＿＿＿<li><a href="/Products">製品</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/Products/1">製品1</a></li> ＿＿＿＿＿＿<li><a href="/Products/2">製品2</a></li> ＿＿＿＿＿＿<li><a href="/Products/3">製品3</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Info">情報</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/Info/1">情報1</a></li> ＿＿＿＿＿＿<li><a href="/Info/2">情報2</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Profile">プロフィール</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="nav"> ＿＿＿<h3>サイトマップ</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="/">トップ</a></li> ＿＿＿＿<li><a href="/Products">製品</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/Products/1">製品1</a></li> ＿＿＿＿＿＿<li><a href="/Products/2">製品2</a></li> ＿＿＿＿＿＿<li><a href="/Products/3">製品3</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Info">情報</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/Info/1">情報1</a></li> ＿＿＿＿＿＿<li><a href="/Info/2">情報2</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Profile">プロフィール</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p> ＿＿＿＿HTMLには文書構造だけ記述し、HTML4.01に用意されている要素では足りない部分については<strong>class名を併用したDIV要素で、文書構造をマークアップ</strong>しています。これらのclass名はHTML5の新しい要素名を参考にしていますので、<div class="header"></div>、<div class="section"></div>、<div class="footer"></div><>div class="nav"</div>は、そのまま<header></header>、<section></section>、<footer></footer>、<nav></nav>に置換するとHTML5の書き方になります。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿HTML4.01以降、デザインのためにHTMLを書く事はなくなりました。HTML5では、これがもっと徹底されDIVは原則使用しなくなりますから、HTMLの作成はとても楽になりますが、その分、文書を読み解き内容を理解して最適な要素(タグ)を選択する知識が必要になります。 ＿＿＿</p> ＿＿＿<p> ＿＿＿＿そうして、マークアップされた文書構造を元にセレクタでスタイルを適用する要素を指定しますから、これも人の手によることになります。 ＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシート 文字コードはShift_JIS [./styleSheet/standard.css] @charset "Shift_JIS"; html,body{margin:0;padding:0;} h1,h2,h3,h4,p{margin:0;line-height:1.8em;} p{text-indent:1em;} body{background-color:silver;} div.header,div.section,div.footer{ width:90%;min-width:470px;max-width:900px; margin:0 auto;padding:5px 10px; background-color:white; } div.nav h3{display:none;} div.nav ol,div.nav ol li{list-style:none;margin:0;padding:0;} div.section div.nav{width:640px;height:480px;margin:0 auto;position:relative;background-image:url(../images/6.jpg);} div.section ol{position:absolute;height:40px;bottom:10px;right:10px;z-index:10;} div.section ol li{display:inline-block;width:40px;height:40px;margin:5px;background-color:white;} div.section ol li ol{display:none;} div.section ol li a{display:block;width:100%;height:100%;overflow:hidden;text-indent:-10em;z-index:100;} div.section ol li a[href="/"]{background-image:url(../images/icons/top.gif);} div.section ol li a[href="/Products"]{background-image:url(../images/icons/product.gif);} div.section ol li a[href="/Info"]{background-image:url(../images/icons/info.gif);} div.section ol li a[href="/Profile"]{background-image:url(../images/icons/profile.gif);} div.section ol li a:hover:before{position:absolute;top:-430px;left:-255px;z-index:-10;} div.section ol li a[href="/"]:hover:before{content:url(../images/1.jpg);} div.section ol li a[href="/Products"]:hover:before{content:url(../images/2.jpg);} div.section ol li a[href="/Info"]:hover:before{content:url(../images/3.jpg);} div.section ol li a[href="/Profile"]:hover:before{content:url(../images/4.jpg);} div.header div.nav ol{width:90%;margin:5px auto;text-align:center;line-height:2em;z-index:1000;} div.header div.nav ol li a{display:block;width:100%;height:100%;text-decoration:none;} div.header div.nav ol li:hover{background-color:yellow;} div.header div.nav ol li:hover{background-color:red;} div.header div.nav ol li{display:inline-block;position:relative;width:20%;background-color:yellow;} div.header div.nav ol li ol{margin:0;position:absolute;top:100%;width:100%;display:none;} div.header div.nav ol li ol li{width:100%;} div.header div.nav ol li:hover ol{display:block;} div.header div.nav ol li ol li a:hover{background-color:lime;} [./styleSheet/print.css] p{line-height:1.8em;margin:0 1em;text-indent:1em;} div.header div.nav{display:none;} div.section div.nav a{text-decoration:none;} div.nav li a:after{ content:"\A url:http://hoge.com"attr(href); font-style:italic; white-space:pre; } div.footer{page-break-before:always;}
お礼
スタイルシートまでお送りいただき、ありがとうございます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
現在は、よほどのことがない限り検索エンジンを経由して訪問されることが多いので、トップページに関わらず、すべてのページがランディングページとして機能するように製作するとこが主流となっています。 これは、あなたが何かの情報を捜して検索した時に、一直線で該当するデータのあるページにたどり着くほうがよいことと同じです。サイトのトップなんかは「邪魔くさい!!」 そのうえで、これは、14年前(1999年)のHTML4.01の勧告以来・・HTMLは文書構造だけを記述してプレゼンテーションはスタイルシートに任せることが多くなりました。文書構造をid、classを併用してDIVで示してきました。 ⇒id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) 次期HTML5では、文書構造の明確化がより規定されます。「http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements」 ★また ＞（jqueryなどを使用） は、SEOの観点から望ましくはありません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから JavaScript、・・・【中略】・・・などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/35769?hl=ja#2 )］より よって、HTMLには <div class="nav"><!-- 検索エンジンにナビゲーションだと知らせるclass名 --> <h3>サイトマップ</h3> <ol> <li><a href="/">Top</a></li> <li><a href="/Products">製品</a></li> <li><a href="/Info">情報</a></li> ・・・・ とマークアップしておいて、スタイルシートでデザインすれば良いです。これ以上何も書かなくて良い(^^)。後方互換を考えるなら・・ <div class="nav"> <h3>サイトマップ</h3> <ol> <li><a href="/"><img src="/images/icons/top.gif" width="40px" height="40px" alt="Top"></a></li> <li><a href="/Products"><img src="/images/icons/products.gif" width="40px" height="40px" alt="製品"></a></li> <li><a href="/Info"><img src="/images/icons/info.gif" width="40px" height="40px" alt="情報"></a></li> でも良いでしょう。 あとはスタイルシートで御自由に・・jQueryなどのjavascriptやflashなどは使用しないほうが良いでしょう。
お礼
jqueryなどを使わない。というご指摘、非常に参考になります。まだまだ自分が未熟であることを痛感いたします。本当にありがとうございました。
お礼
ありがとうございました。 サンプルまでお送りいただき、大変勉強になりました。 このコードを参考にし、ページを作成していこうと思います。本当にありがとうございます。