グローバルナビ部分の背景を画面幅いっぱいにしたい方法
- グローバルナビ部分の背景を画面幅いっぱいにする方法を教えてください。
- 参考にしたいサイトではグローバルナビ部分の背景を画像で画面幅いっぱいにしていますが、うまくいきません。
- ページの幅を指定しているため、背景画像は画面幅いっぱいにはなりません。どうすれば良いでしょうか？
- ベストアンサー
グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、
グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、 どうすれば良いのか分からなくて困っています。 まず、参考にしようとしているサイトが下記です。 http://www.oo-nagata.co.jp/ このサイトのようにグローバルナビ部分のとフッター部分の背景を画像で（画像ではなくても同じ事なのでしょうか、、。）画面幅いっぱいにしたいのですが、うまくいかなくて困っています。 ページの幅は960pxにCSSにて指定しているのですが、 幅を指定してしまうと当然その部分の幅は指定した幅になってしまいます。 よって背景画像は画面幅いっぱいにはならないのです。 ページの幅は指定し画面中央にくるようにしたいのですが、 どうすれば良いのでしょうか？
- 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で。 これで解決します。なお、入れ子の構造などは各コンテンツの内容やデザインによって必ずしも参考サイトと全く同じにはしなくても実現可能ですので、それはご自分のサイトの構造と見比べてよく検証されて下さい。
関連するQ&A
- CSSでの背景画像の設定について
CSSでの背景画像の設定について質問です。 参照ページ（http://www.balmuda.com/jp/）のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper> メニューバー部分の背景画像を指定 <topmenu> margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents> margin0 auto;で画面中央に配置 <footer-wrapper> フッター部分の背景画像を指定 <footer> margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。＞ 解決策を教えて頂ければ幸いです。よろしくお願い致します。
- ベストアンサー
- HTML
- 固定背景画像と画面幅について
初心者のため、分かりづらい質問になると思いますがお許しください。 background-repeat:no-repeat; background-position:right; background-attachment:fixed; 上記のようなCSSで背景画像を固定しています。 画面幅は918pxで設定していますが、これをプレビューで918px以上に伸ばすと、背景画像がどんどん右にズレていってしまいます。 画面環境はそれぞれだと思うので、大きな画面で見た方が背景画像が切れてしまうのを避けたいです。 画面幅918pxで固定をしたいのですが、どのようにすればいいのでしょうか？ 何か補足事項があればすぐに追記します。 よろしくお願いします。
- ベストアンサー
- CSS
- 背景設定をするとグローバルナビ・テキストが消えてしまいます
CSSで背景を設定しますと グローバルナビ・テキストが 消えてしまいます。 背景でなく、前面に画像が貼られているような イメージです。 どのように設定したらよいのでしょうか。 宜しくお願いします。
- 締切済み
- HTML
- footer部分をheight:100%にするには?
現在制作しているウェブサイトのfooter部分をheight:100%にしたいのですが、どうしたらいいのかわかりません。 どのようなサイズのブラウザで見てもfooter部分の背景が画面下いっぱいまで表示されるようにしたいのですが、どうしたらよいのでしょうか? 組み方はテーブルコーディングではなく、完全cssでレイアウトしています。 footer部分にcssでheight:100%を指定しても変わりませんし、htmlタグとbodyタグにheight;100%を指定しても、footer部分がやたら長くなってしまうし、もうどうしたらいいのか・・・ ご存知の方がいらっしゃいましたら、教えてください!!
- ベストアンサー
- HTML
- ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。 それほど複雑な構成ではないシンプルなタグ構造だと思います。 ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- 締切済み
- HTML
- CSSで背景の２カ所に位置を指定してボーダーを入れるにはどうしたらいいでしょうか？
http://www.thefujiyagohonjin.com/ このサイトのようにページの最上部と、ページの下から100pxの位置に、画面いっぱいに伸縮するボーダーを入れたいと思っています。上部のボーダーは指定できたのですが、下部の方をどうやって位置を設定していいのかわからず困っています。ナビゲーションもこのサイトのように画面サイズによって伸縮するデザインなので、このサイトの背景部分のCSSを教えていただけたら非常に助かります。 かなり低レベルな質問かもしれませんが、どなたか宜しくお願いします。
- 締切済み
- レンタルサーバ・ASP
- Dreamweaver CS3で背景画像が表示されません
セールスレター（ホームページ）の背景に画像を使いたいので ＣＳＳの「body」から背景→背景イメージの欄に使用したい画像を設定しています。 理想はグラデーション画像なのですが、 どんな画像を入れても表示されません。 （グラデーションでないものも、ファイルサイズ等に関係なく表示されません） jpg画像で同じフォルダ内に入っています。 背景色は問題なく表示されます。 ホームページ内の背景でない部分はdivで囲み影画像を背景にしてあります。 （幅680px,高さ指定なし マージン：左右自動、上下０ 影の画像をＹ軸にリピート） body：（幅高さ指定なし、マージン上０、背景に入れたい画像） ページプロパティから背景画像を指定した場合は表示されますが、 ページのＴＯＰのみグラデーションのある画像にしたいため リピートするとグラデーションが何度も繰り返されてしまいます。 そのため「固定」を使うためにＣＳＳを使用しなければならないと思い ＣＳＳで表示する方法を探しております。 初心者なので何か初歩的なミスをしているかもしれません。 よろしくお願い致します。
- ベストアンサー
- CSS
- 背景画像
背景画像のCSSを教えてください wordpressのfooterのように、footer内のみに縦100px横幅1pxの画像で敷き詰めたいです 実際に横960pxに敷き詰められるようにしたいです #footer_in { position:relative; margin:0 auto; padding:0; width:960px; height:100px; background:url(../images/footer_bg.png) no-repeat center 13px; font-size:12px; } <div id="footer_in"> </div>
- ベストアンサー
- CSS
お礼
ありがとうございます。 非常に助かりました。 本当にご丁寧にありがとうございました。