グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、

グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、
どうすれば良いのか分からなくて困っています。

まず、参考にしようとしているサイトが下記です。
http://www.oo-nagata.co.jp/
このサイトのようにグローバルナビ部分のとフッター部分の背景を画像で（画像ではなくても同じ事なのでしょうか、、。）画面幅いっぱいにしたいのですが、うまくいかなくて困っています。
ページの幅は960pxにCSSにて指定しているのですが、
幅を指定してしまうと当然その部分の幅は指定した幅になってしまいます。
よって背景画像は画面幅いっぱいにはならないのです。
ページの幅は指定し画面中央にくるようにしたいのですが、
どうすれば良いのでしょうか？

No.1 ベストアンサー 回答者： abril 回答日時： 2010/05/24 18:38

参考サイトの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で。

これで解決します。なお、入れ子の構造などは各コンテンツの内容やデザインによって必ずしも参考サイトと全く同じにはしなくても実現可能ですので、それはご自分のサイトの構造と見比べてよく検証されて下さい。

この回答へのお礼

ありがとうございます。
非常に助かりました。
本当にご丁寧にありがとうございました。

お礼日時：2010/05/24 19:05