締切済み

CSSでページ上部に余白ができてしまいました。

2012/12/03 15:35

下記の(質問用に作った)html とcssの記述について教えてください。これは幅800pxの水色の範囲の中に文字や写真を配置し、その外側は青色で、閲覧者の環境によって余白(青色)の幅が左右対称に増減するようにしました。これをFirefoxで確認すると上部に5～7mmほど余白の青が見えてしまいます。 margin-top: 0px;　　と記していますが、反映されていません。どうすれば、上部の余白をなくして、上まですべて水色になるでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift JIS"> <title>練習・質問の為のサイトです</title> <style type="text/css"> div { width: 800px; margin-top: 0px; margin-right: auto; margin-left: auto; } .cont { width:800px; background-color:lightcyan; } body { background: navy; color: black; } h1 { background: teal; color: white } h3 { font-weight: bold; color: red; } </style> </head> <body> <div class="cont"> <h3>社会科の学習</h3> <h1>日本の地理について</h1> <p><img src="photo.jpg"></p> <h2>日本には47の都道府県があります。</h2> <h3>東北地方</h3> <p>青森　岩手　秋田　宮城　山形　福島<br> <br> <h3>関東地方</h3> <p>群馬　栃木　茨城　千葉　埼玉　東京　神奈川<br> <br> <br> <p>練習用の為、ここまでとする。 </body> </html> 以上です。　どうぞアドバイスよろしくお願いいたします。

hpmake
お礼率81% (105/129)

その他(ソフトウェア)
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/12/04 10:46 回答No.3

原因は、IEが仕様どおりの動作をしないことが原因(自身のサイズをborder辺までと間違う)ですが、仕様どおりなら多少の隙間が開くのが正しい動作です。　--IEを標準モードで動作させれば、やはり隙間ができます。--- ・HTML要素、BODY要素のもつpadding 　html,body{margin:0;padding:0;} 　ですこし余白が小さくなる。・各ブロックのpaddingの値が内部のmarginより小さい　div{padding:15px;} 　など大きめな値をいれとおく　　この場合、ボックスの幅が大きくなります。・H1要素、P要素などのmargin 　h3{border:solid 1px aqua;} 　いれるとわかります。のふたつです。対策は、 1) html,body{margin:0;padding:0;} 2) 子供ブロックのpaddingの値を大きめにする。 3) body直下の要素にborderを入れる。 4) H1,H2,H3,Pなどのmarginを0にする。の四点です。　サンプルを上げておきます。1～4の対策はコメントアウトしていますから、　ひとつずつコメントを外して、それぞれがどのような意味を持つかを理解してください。(前後の/* */を消す) 　★どれがどのような意味かを知っておくと良いでしょう。　なお、余計なことですが、HTML5の時代が来ることを考えて、きちんとセマンティックにマークアップしています。<div class="header">→<header></header>・・同様に<hgroup><section><footer>にするとHTML5になります。・header部分は<header> ・sectionには必ずひとつのh要素が入る。複数入るときは<hgroup>で囲むなど、これはHTML4でも暗黙のうちに定められていたけど守られていなかった。 ※lightcyanは、使用できません。色名のキーワードは17色です。 4.3.6 Colors ( http://www.w3.org/TR/CSS2/syndata.html#value-def-color ) 　それ以外は、コードで指定しましょう。・<br>は余白をあけるために使ってはなりません。スタイルシートで指定しましょう。・日本語はフォントが大きいので、marginを0にする代わりに、line-heightを大きくすると読みやすいでしょう。またpやdd,liにはtext-indentを指定しておくと読みやすいでしょう。・H1にはそのページのタイトルを書きましょう。 ★HTML4.01strict + CSS2.1 のShift_JISです。　Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# ) 　で検証済み ★<DOCTYPE>をIEでも標準モードで動作するように書いてあるので、すべてのブラウザできちんと表示されるはずです。 ★印刷時にはスタイルシートが適用されませんから素のスタイルで印刷されます。(media="screen") ★タブは、＿に置換してあります。戻すこと。 ★この手の質問は、Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/category/258 )が良いです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<div class="hgroup"> ＿＿＿<h1>日本の地理について</h1> ＿＿＿<h2>社会科の学習</h2> ＿＿</div> ＿＿<p><img src="photo.jpg" alt="地図" width="480" height="480"></p> ＿</div> ＿<div class="section"> ＿＿<h2>日本には47の都道府県があります。</h2> ＿＿<div class="section"> ＿＿＿<h3>東北地方</h3> ＿＿＿<p class="kenmei"><span>青森</span>、<span>岩手</span>、<span>秋田</span>、<span>宮城</span>、<span>山形</span>、<span>福島</span></p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>関東地方</h3> ＿＿＿<p class="kenmei"><span>群馬</span>、<span>栃木</span>、<span>茨城</span>、<span>千葉</span>、<span>埼玉</span>、<span>東京</span>、<span>神奈川</span></p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>・・・</h3> ＿＿＿<p>練習用の為、ここまでとする。</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

corokorocoro
ベストアンサー率29% (63/211)

2012/12/03 18:36 回答No.2

よくやる手法だけど *{ margin: 0px; padding: 0px; } をやっておいて必要な所(タグ,ID,CLASS)に対してmarginとpaddingで余白を入れていく。

質問者

お礼 2012/12/04 01:15

{ }の前の*や、padding, id,class　など、まだ使ったことのない語なので今すぐに理解できませんが、調べながらトライしてみます。どうもありがとうございました。

t_ohta
ベストアンサー率38% (5292/13827)

2012/12/03 15:49 回答No.1

body と h3 に margin-top: 0px; を追加すると消えます。

質問者

お礼 2012/12/04 01:08

bodyとh3に下記のように追加したら、上部の余白がなくなりました！ body { background: navy; color: black; margin-top: 0px; } h1 { background: teal; color: white } h3 { font-weight: bold; color: red; margin-top: 0px; } また、下記のmargin-rightと margin-leftと並んで記していたmargin-topは有っても無くても関係ない、とわかりました。 div { width: 800px; margin-right: auto; margin-left: auto; } どうもありがとうございました。