ホームページのナビゲーションについて教えてください

Question

現在、ホームページのリニューアルを検討しており、トップページのデザインをどのようにするか悩んでいます。やはり、トップページですので来られた方に少しでもインパクトのあるページを考えています。
　しかしながら、作成課程でどうしても技術的にどうしてもわからない点がありましたので、このたび質問させていただくことになりました。お忙しいと存じますが、ご回答いただければ幸いです。

質問事項：
　マウスオーバーで背景や別の場所の画像が変わる仕組みは理解（jqueryなどを使用）していますが、変わった画像とともにリンク先まで変更する仕組みが分かりません。具体的には無印良品のホームページ（http://www.muji.net/）のトップページのように、小さい画像をマウスオーバーすることで、背景画像が変わり、それとともにリンクが変わっているような仕組みです。
　できれば、無印良品のホームページと同じように小さな画像の背景が変わっている仕組みが分かれば良いのですが、、、

なお、ホームページ作成環境はWindows7 32bit、ホームページ作成ソフトとしてDreamweaverCS4を使用しています。

その他、情報として必要な内容がございましたら、お手数ですがご一報ください。

以上、ご回答のほど、よろしくお願いいたします。

ORUKA1951 · Accepted Answer

サンプルです。・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 ★タブは＿に置換してあるので戻す。 ★スタイルシートは後ほど・・＿＿サンプル＿＿＿＿＿＿＿＿

＿＿

見出し

＿＿

＿＿＿

サイトマップ

＿＿＿

トップ
製品＿＿＿＿＿
1. 製品1
2. 製品2
3. 製品3
＿＿＿＿
情報＿＿＿＿＿
1. 情報1
2. 情報2
＿＿＿＿
プロフィール

＿＿

＿＿＿

見出し

＿＿＿

＿＿＿＿HTMLには文書構造だけ記述し、HTML4.01に用意されている要素では足りない部分についてはclass名を併用したDIV要素で、文書構造をマークアップしています。これらのclass名はHTML5の新しい要素名を参考にしていますので、

、

、<>div class="nav"

は、そのまま

、

、、に置換するとHTML5の書き方になります。＿＿＿

＿＿＿

＿＿＿＿HTML4.01以降、デザインのためにHTMLを書く事はなくなりました。HTML5では、これがもっと徹底されDIVは原則使用しなくなりますから、HTMLの作成はとても楽になりますが、その分、文書を読み解き内容を理解して最適な要素(タグ)を選択する知識が必要になります。＿＿＿

＿＿＿

＿＿＿＿そうして、マークアップされた文書構造を元にセレクタでスタイルを適用する要素を指定しますから、これも人の手によることになります。＿＿＿

＿＿

ORUKA1951 · Answer

スタイルシート　文字コードは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 · Answer

　現在は、よほどのことがない限り検索エンジンを経由して訪問されることが多いので、トップページに関わらず、すべてのページがランディングページとして機能するように製作するとこが主流となっています。

これは、あなたが何かの情報を捜して検索した時に、一直線で該当するデータのあるページにたどり着くほうがよいことと同じです。サイトのトップなんかは「邪魔くさい!!」

　そのうえで、これは、14年前(1999年)のHTML4.01の勧告以来・・HTMLは文書構造だけを記述してプレゼンテーションはスタイルシートに任せることが多くなりました。文書構造をid、classを併用してDIVで示してきました。
　⇒id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　次期HTML5では、文書構造の明確化がより規定されます。「http://standards.mitsue.co.jp/resources/w3c/TR/h …」
★また
＞（jqueryなどを使用）
　は、SEOの観点から望ましくはありません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
JavaScript、・・・【中略】・・・などの特殊な機能が使用されているためにサイトの一部がテキストブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスターツールヘルプ( https://support.google.com/webmasters/answer/357 … )］より

　よって、HTMLには
<div class="nav">
　<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などは使用しないほうが良いでしょう。

サイトマップ

Top
製品
情報

サイトマップ

ホームページのナビゲーションについて教えてください

サンプルです。

スタイルシート 文字コードはShift_JIS

現在は、よほどのことがない限り検索エンジンを経由して訪問されることが多いので、トップページに関わらず、すべてのページがランディングページとして機能するように製作するとこが主流となっています。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

スタイルシート　文字コードはShift_JIS

　現在は、よほどのことがない限り検索エンジンを経由して訪問されることが多いので、トップページに関わらず、すべてのページがランディングページとして機能するように製作するとこが主流となっています。