重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

拡大すると背景色が消える

解決済

  • 質問者：kirinraitu
  • 質問日時：
  • 回答数：1件

お世話になります。

ヘッダーやフッターに背景色を指定する際に、
HTML側では、
<div id="wrapper">
<div id="header">
ここにヘッダーの内容をいれる。
</div>
</div>
のようにし、
cssで、
#wrapper{width:100%;background-color:#ccc;}
#header{width:900px;margin:0 auto;}
のように指定して、ウィンドウ幅いっぱいに背景色を指定しているのですが、
通常時は問題ないのですが、
ブラウザの拡大機能で拡大して、横スクロールバーでスクロールすると、
背景色が途中で消えてしまいます。

なにか解決方法はあるのでしょうか？

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

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-html4 … )」
およびHTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
をみても、つければarticleでしょう。
[HTML5]
<body>
　<article>
　　<header>
[HTML4.01]
<body>
　<div class="article">
　　<div class="header">

これらセクショニングコンテンツと呼ばれるブロックは文書内に何度も登場するので、HTML4.01でしたらidではなくclassでなければなりません。

・・・そろそろHTML5を念頭においてHTMLを書くようにすると、将来とても楽ですよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

たしかに、ウィンドウ幅を基準に100%だから当然ですね。
全然気づいていませんでした(汗)

私はいま職業訓練でwebデザイン科を受講中なのですが、
ようやくHTML4.01に慣れ始めたところで、
今週からHTML5の授業が始まり、すこし困惑しております。

アドバイスを参考に、しっかりとアウトラインや文書構造の理解を深めたいと思います。

回答ありがとうございました。

通報する
お礼日時：2012/11/08 21:27

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報