- ベストアンサー
グローバルナビの作成について
bodyのwidthを1000pxに指定している場合、その範囲を超えて画面上にメニューバーを表示したいのですができません。bodyのwidthサイズを1000pxから、100%に変更する以外の方法でご教授頂けましたら幸いです。 イメージとしては、下記ＵＲＬのような形で、拡大縮小しても、常に画面に100%（画面一杯に）表示されている形です。 ＵＲＬ：http://www.sony.jp/ （※黒塗りのメニューバーの部分です） 初心者の質問で、大変申し訳ございませんが、どなたかご教授頂ければ幸いです。
- ryou09160528
- お礼率55% (5/9)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
やろうと思ったらできるけど、明らかに考え方が間違っています。ｈｔｍｌはやりたい事のビジュアルの寄せ集めでは作成できません。無理にやっても今のうちなら出来ますが、1ページが出来る頃には破綻するし、検索エンジンにも低い扱いをうけ, ryou09160528 さんが使っておられるブラウザと異なるブラウザで見たときには崩れを起こすようなものになることが、予想されます。 継ぎ剥ぎｈｔｍｌではなく、web標準と呼ばれる手法を初心者レベルまで学ばれることをお勧めします。ｈｔｍｌには文章構造のみを記述し、見せたいビジュアルは混ぜない。ビジュアル面はｃｓｓでデザインを行う。基本的な考え方がわかれば、質問のような、トリッキーな手法は望まないでしょう。 bodyのwidthを1000pxという希望と、最近のryou09160528 さんの質問を勘案し、遊んでみました。 こんな手法もある程度で、実践には使われないほうがいいですし、すでに、学びが破綻していますので、現在の方法をあらためられ、まっとうなhtml+cssを学びなおされることを強くお勧めします。初心者は学んでください。変わりにやってもらうなら、もう少し適切な質問をしないと、本当に使えるものはできないです。 教授なんて出来ませんので、教示で 「 bodyのwidthを1000pxに指定している場合、その範囲を超えて画面上にメニューバーを表示したいのですができません。bodyのwidthサイズを1000pxから、100%に変更する以外の方法でご教授頂けましたら幸いです。 」 まずはじめに高さ66ｐｘの真っ黒な画像を作成し、「test.gif」として、作成するhtmlファイルがあるフォルダに入れてください。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift-jis" /> <title>test</title> <style type="text/css"> html{ background:#D9E5FF url("test.gif") repeat-x; margin:0; } body{margin:0 auto;padding: 0;width:1000px;background: white;border-left:1px solid blue;border-right:1px solid blue;} body>*{margin:0;padding:1em;} ul{padding:0;background:#000;height:66px;width:1000px;margin:0;border-left:1px solid white;color: #fff;} li{margin:0;padding:0;display:table-cell;width:249px;font:white;border-right:1px solid white;height:66px;vertical-align:middle;text-align:center;} </style> </head> <body> <ul> <li>いち</li> <li>に</li> <li>さん</li> <li>よん</li> </ul> <h1>しらんけど見出し</h1> <p>しらんけど本文</p> <p>しらんけど本文</p> <p>しらんけど本文</p> <p>しらんけど本文</p> </body> </html>
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
<div>の幅は、なにも指定しなければ親要素と同じ幅になりますから、 >100%に変更する以外の方法で 「何も指定しない」というのが正解になるのではないでしょうか？ --------------- >bodyのwidthを1000pxに指定している場合、その範囲を超えて画面上にメニューバーを表示したい >イメージとしては、下記ＵＲＬのような形で、拡大縮小しても、常に画面に100%（画面一杯に）表示されている形です。 前者は100%を越えて表示したい 後者は100%で表示したい と、矛盾しているように思えるのですが。 100%を越えたいのか、100%にしたいのかどちらでしょうか。 1200pxなどと大きな数字を指定すれば、1000px（1000pxの100%）を越えますが。。。
お礼
ご回答いただきありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLのカテゴリーで質問さていますが、HTMLはごく普通にマークアップされていれば良いです。スタイルシート側だけの問題だと思います。 ＞拡大縮小しても、常に画面に100%（画面一杯に）表示されている形 と ＞bodyのwidthサイズを1000pxから、100%に変更する以外の方法 は矛盾しています。bodyを越えて表示させることはできません。 分かりやすいのは ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) のページで、メニューの[表示]→スタイルシート→にて ・ページの最上部へ ・ウィンドウ下部固定下 のように、body幅を100%にして、コンテンツの表示幅を指定する形になるでしょう。 [基本]HTML4.01strict用 html,body{margin:0;padding:0;} div.nav{position:absolute;top:0;left:0;width:100%;text-align:center;height:40px;} div.nav ul{display:block;} div.nav ul li{list-style:none;width:20%;display:inline-block;} div.header,div.section,div.footer{width:90%;min-width:640px;max-width:1000px;margin:0 auto;} [基本]HTML5用 html,body{margin:0;padding:0;} nav{position:absolute;top:0;left:0;width:100%;text-align:center;height:40px;} nav ul{display:block;} nav ul li{list-style:none;width:20%;display:inline-block;} header,section,footer{width:90%;min-width:640px;max-width:1000px;margin:0 auto;}
お礼
分かり易く、早急なご回答ありがとうございます。
お礼
教示頂きありがとうございます。まずは、web標準をしっかり学んでいきたいと思います。ご親切な回答ありがとうございました。