- ベストアンサー
グローバルナビ部分の背景を画面幅いっぱいにしたい方法
- グローバルナビ部分の背景を画面幅いっぱいにする方法を教えてください。
- 参考にしたいサイトではグローバルナビ部分の背景を画像で画面幅いっぱいにしていますが、うまくいきません。
- ページの幅を指定しているため、背景画像は画面幅いっぱいにはなりません。どうすれば良いでしょうか？
- yujiyamasa
- お礼率84% (11/13)
- HTML
- 回答数1
- ありがとう数6
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
参考サイトのCSSの内容をHTMLの構造と突き合わせて確認してみましたか？ そうすれば、簡単な理屈である事がわかります。 参考サイトでは、ヘッダー枠（#header）、グローバルナビ枠（#gnv）、フッター枠（#footer）、メインコンテンツ枠（#contents-base）といったコンテナブロックは全て"width: 100%;"になっています。なのでその各コンテナブロックの背景は画面一杯に描画される事になります。 一方で、それらの実際の内容（テキストや画像が配置されている）は、それらの子要素として入れ子になっています。 ・ヘッダーの内容：div.in ・グローバルナビの内容：#gnv ul ・フッターの内容：div.in ・メインコンテンツの内容：#contents-inline これらの子要素の幅は"width: 876px;"と決め打ちされており、さらに左右マージンの値がautoに設定されているので、各親要素の背景100%の中でセンタリングされて表示されています。 > （画像ではなくても同じ事なのでしょうか、、。） 描画エリアは同じですから、背景色背景画像でも理屈は変わりません。 > ページの幅は960pxにCSSにて指定しているのですが、幅を指定してしまうと当然その部分の幅は指定した幅になってしまいます。 その通りです。だから、本件の様なレイアウトがしたければ、全てのコンテナブロックを幅を決め打ちした一つの親要素には含められないわけです。参考サイトの様に。 > よって背景画像は画面幅いっぱいにはならないのです。 背景画像を描画するコンテナブロックは"width: 100%;"で。 > ページの幅は指定し画面中央にくるようにしたい 固定幅で描画したいコンテナブロックは、固定幅（"width: 960ox;"）を指定し左右マージンをautoで。 これで解決します。なお、入れ子の構造などは各コンテンツの内容やデザインによって必ずしも参考サイトと全く同じにはしなくても実現可能ですので、それはご自分のサイトの構造と見比べてよく検証されて下さい。
お礼
ありがとうございます。 非常に助かりました。 本当にご丁寧にありがとうございました。