- ベストアンサー
背景色が消える問題の解決方法
- ヘッダーやフッターに背景色を指定している時に、ブラウザの拡大機能を使うと背景色が途中で消える問題の解決方法を紹介します。
- HTML側でヘッダーとフッターの要素を指定し、cssで背景色を設定する方法があります。
- 具体的には、div要素でヘッダーとフッターの領域を指定し、widthプロパティとbackground-colorプロパティを使って背景色を指定します。
- kirinraitu
- お礼率87% (80/91)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
widthは、この場合ディスプレイ幅を参照します。 ウィンドウ幅を基準に100%にしろ!!と指定してあるので、当然の結果です。 <body> <div class="header"> <h1>見だし</h1> </div> <div class="section"> <h2>見だし</h2> </div> <div class="footer"> <h2>フッタ</h2> </div> <body> に対して html,body{margin:0;padding:0;} body{background-color:silver;} body>div{width:90%;margin:0 auto;background-color:gray;} body>div h1,body>div h2,body>div p{margin:0;line-height:1.6em;} 位でよいはずです。 wrapperというclass名は感心しません。あるツールが用いているid名ですが、 「DIV要素とSPAN要素は、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 ) をみても、つければarticleでしょう。 [HTML5] <body> <article> <header> [HTML4.01] <body> <div class="article"> <div class="header"> これらセクショニングコンテンツと呼ばれるブロックは文書内に何度も登場するので、HTML4.01でしたらidではなくclassでなければなりません。 ・・・そろそろHTML5を念頭においてHTMLを書くようにすると、将来とても楽ですよ。
お礼
回答ありがとうございます。 たしかに、ウィンドウ幅を基準に100%だから当然ですね。 全然気づいていませんでした(汗) 私はいま職業訓練でwebデザイン科を受講中なのですが、 ようやくHTML4.01に慣れ始めたところで、 今週からHTML5の授業が始まり、すこし困惑しております。 アドバイスを参考に、しっかりとアウトラインや文書構造の理解を深めたいと思います。 回答ありがとうございました。