ホームページのナビゲーションについて教えてください
- ホームページのナビゲーションについて教えてください。ホームページのリニューアルを検討しており、トップページのデザインに悩んでいます。
- ホームページのナビゲーションについて悩んでいます。トップページのデザインをどのようにするか悩んでいます。
- ホームページのリニューアルを検討しています。トップページのデザインに関してお悩みですか?
- ベストアンサー
ホームページのナビゲーションについて教えてください
現在、ホームページのリニューアルを検討しており、トップページのデザインをどのようにするか悩んでいます。やはり、トップページですので来られた方に少しでもインパクトのあるページを考えています。 しかしながら、作成課程でどうしても技術的にどうしてもわからない点がありましたので、このたび質問させていただくことになりました。お忙しいと存じますが、ご回答いただければ幸いです。 質問事項: マウスオーバーで背景や別の場所の画像が変わる仕組みは理解(jqueryなどを使用)していますが、変わった画像とともにリンク先まで変更する仕組みが分かりません。具体的には無印良品のホームページ(http://www.muji.net/)のトップページのように、小さい画像をマウスオーバーすることで、背景画像が変わり、それとともにリンクが変わっているような仕組みです。 できれば、無印良品のホームページと同じように小さな画像の背景が変わっている仕組みが分かれば良いのですが、、、 なお、ホームページ作成環境はWindows7 32bit、ホームページ作成ソフトとしてDreamweaverCS4を使用しています。 その他、情報として必要な内容がございましたら、お手数ですがご一報ください。 以上、ご回答のほど、よろしくお願いいたします。
- 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などを使わない。というご指摘、非常に参考になります。まだまだ自分が未熟であることを痛感いたします。本当にありがとうございました。
関連するQ&A
- ホームページ作成について
作品集をつくりたいのですが、トップページに1ページ2ページ3ページ目へのリンクをはり、ホームページの横幅が長く、1ページ2ページ3ページはトップページの右側にあり各ページが幅1200pxくらいあるサイトをつくりたいのですが、どのようにつくるのかご存じの方おしえてください。 私が見習って、作成したい上記ホームページはjquery.smooth-scrollを使っているようです。 opaciy要素も使っているみたいです。 また、各作品のトップページを2ページ目に配置したいのですが、Photoshopで作成したものを1枚の画像としてスライスして、WEB用に保存するのでしょうか? かなり初心者です。よろしくお願いします。
- ベストアンサー
- CSS
- FlashもしくはJavascriptを利用したナビゲーションメニュー
ホームページの作成でトップページに FlashもしくはJavascriptを使用してインパクトのあるナビゲーションを設置を検討しています。 現在考えているナビゲーションのイメージとしては ・メインの画像エリアと複数のボタンで構成 ・各ボタンにマウスオーバーすると画像エリアの画像を切り替え ・各ボタンをクリックすると任意のリンク先へジャンプ といった形です。 いろいろと探してみましたが一番イメージが近いものは以下のURLで使用されているフラッシュです。 http://www.intheroom.jp/ ここはメインの画像エリアが自動的に切り替わったり、画像の切り替えにエフェクトがかかりますがここまでは必要ないです。(あると尚よいですが・・) 以下で配布されているスクリプトもイメージに近いです。 http://jqueryglobe.com/labs/feature_list/ ここはマウスオーバーで画像が切り替わらず、クリックしても別のURLには飛ばない点が残念です・・・。 もし私のイメージに近い形で配布されている素材をご存じでしたら教えていただけないでしょうか? よろしくお願いいたします。
- ベストアンサー
- Flash
- ホームページのリニューアル後のこと
index.htmlのトップページをリニューアルしました。 2/3くらいの古いページ(ファイル)のリンクを切りました。 サーバーにはまだ残っているので、それらを抽出して削除する方法は手作業以外にありますか。 ホームページビルダー14を使っています。 よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- ホームページの背景について
こんにちは。 ホームページ作成初心者の者です。ホームページビルダー7を用いて作成しています。 今、トップページの背景画像を考えています。 私は大きな写真を少し黒でぼかしを入れて、これを背景にしたいのですが、自分なりにやってみたところ、スクロールが縦、横に出てきてしまい、不恰好な形になってしまいました。 自分では、どのPC、ブラウザから見ても、スクロールの無いトップページが表示されて欲しい【画面いっぱいに一枚の写真が表示されてほしい】のですが、それは可能でしょうか?せめて横のスクロールは表示されないよう、写真の加工や、ホームページの設定を行いたいです。 よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- ホームページ作りたい・・
現在ホームページを作ろうとしています。 今はトップの画面は写真を貼っただけですが・・・ html文もわからないしどうしていいかわかりません。 ホームページを作ろうと教えているページはありませんか?? ホームページ作成と検索しても、ん~~ 例えば背景の色をつけるとか 私はこのページを見て作成しましたみたいな サンプルなどのページあったら教えてください。 自分でも勉強しますが・・ よろしくお願いします。
- ベストアンサー
- その他(インターネット・Webサービス)
- ホームページのリニューアルについて
ホームページをリニューアルしようとして、今までのをFTPツールで削除し、新たなサイト転送を行いました。転送は行われたのですが、いざWebブラウザで表示させて確認しようとすると、ファイル未検出の表示が出ます。トップページ名をindex.htmにしているのですが、前回は違ったのかもしれません。(前回作成者転勤のため不在)トップページ名が違うことが原因でしょうか?もしそうならば、トップページ名を変えることになりますが、「リンク切れ」を起こしそうで不安です。トップページ名のみ変える方法はありますか?
- 締切済み
- ホームページ作成ソフト
- CSSでグローバルナビゲーションメニューをつくりたい
CSSで、グローバルナビゲーションメニューのボタンリンクをコーディングしたいと思っています。ボタンをマウスでポインタしたらロールオーバーし、カレントページのボタンはマウスでポイントした時と、同じようにロールオーバー画像を表示させたいと思っておりますが、可能なのでしょうか?
- 締切済み
- ブラウザ
- ホームページビルダーで・・・
現在ビルダーV6.5でホームページを作成しています。 下記のURLと同じようなことをやりたいのですが ソースを見てもやり方がわからず行き詰っています。 http://www.shashinkan.ne.jp/~yoshida/ このTOPページの画像は1枚なのですが、 それぞれの写真によってリンク先が異なっています。 画像が5枚バラバラならできるのですが 1枚の画像の上でその部分部分によってリンク先を 変えたいときはどうすればよいのでしょうか?? よろしくお願いしますm(_ _)m
- ベストアンサー
- その他(ソフトウェア)
- ホームページの背景画像について
ホームページ作成について質問です。 ホームページの背景画像についてです。 1ページが小さい時は問題ないのですが、1ページを大きくしていくと背景の画像が伸びてしまいます。 背景画像を伸びなくするにはどうすればよいのでしょう。 どなたか解決法をご存知の方、教えてください。 ホームページ作成初心者の為、よろしくお願いいたします。
- 締切済み
- その他(インターネット・Webサービス)
- ナビゲーションボタンについて
どうぞ、よろしくおねがいします。 ホームページを作る際に、 「TOP」ですとか「Q&A」といったページなどに誘導する ナビゲーションボタンがありますが、 これは、普通にボタン用の画像を貼り付けて、 それにリンクを貼って並べる、というやり方は一般的ではないのでしょうか? 色々なサイトのソースを見て調べているのですが、 このようなやり方で記述されているサイトがなく、 質問させていただきました。
- 締切済み
- HTML
お礼
ありがとうございました。 サンプルまでお送りいただき、大変勉強になりました。 このコードを参考にし、ページを作成していこうと思います。本当にありがとうございます。