CSSで要素間の余白について

2012/01/29 23:24

このQ&Aのポイント

ホームページで画像の下にdivを配置する際、余白が発生し困っています。
div要素とh2要素にmarginを指定しても余白ができてしまいます。
また、div containerの大きさを指定しても反映されません。初心者の質問ですが、問題はどこにあるのでしょうか？

noname#163332

CSS
回答数3
ありがとう数4

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

質問者が選んだベストアンサー

ベストアンサー

naokita
ベストアンサー率57% (1008/1745)

2012/01/29 23:54 回答No.1

１行目から基本をしっかり勉強しなおしましょう。 CSSでこの値は間違いです。 width="800" height="40"; 　　　↓↓　　　　　↓↓ width:800px; height:40px; h1にもデフォルトで隙間（初期値）があるのでリセット　　　　　　　　↓↓　　　　　　　↓↓ h1 {margin-bottom:0; padding-bottom:0; }

質問者

お礼 2012/01/30 19:48

CSSでサイズを指定する場合には、必ずサイズ単位を指定しなければならなかったのですね。また、スキマについては両方のタグにデフォルトで隙間がある為、片方だけでなく、両方margin:0を記載する必要があったのですね。おかげさまで、無事に希望通りの表示にできました。ありがとうございました。

その他の回答 (2)

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

2012/01/30 01:58 回答No.3

原因は、それぞれのコンテナブロック内の要素のmarginです。どのように消せばよいかはサンプルを見てください。　なお、作成するときに*{border:gray solid 1px;}を書いて始めると、どの要素が競り合っているかがわかりやすいです。　なお、DOCTYPEは、DOCTYPEスイッチとして、きちんとIEを標準モードで動くよう指定しましょう。互換モードの場合は処理が変わることがあります。たとえば、width:800;とすると互換モードではpxと判断してしまいます。 ★DOCTYPEスイッチ - W3G Web用語集 ( http://w3g.jp/others/data/doctype_switching ) 特に、XML1.0strict/transitinalの場合、サーバーから送信されるMIME-TYPEと競合して期待通りにならないこともあります。　HTML4.01strictで作成し、きちんとDOCTYPEを宣言すると確実に標準モードで表示されますから無難です。そもそもtransitionalは、12年も前から非推奨ですし、他の多くのブラウザはウェブ標準ですから。　【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より　また、数年後に勧告される予定のHTML5では、strictなんてありませんし、4.01strictをキチンと身につけていれば、 ★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ ) を読む程度で移行出来るでしょう。下記サンプルは、HTML4.01strictで作成してあります。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みです。タブは＿に置換してあります。　また、class名は、文書構造を示すものに変えてあります。HTML5ではそのまま要素名になります。 <div class="header">→<header>、<div class="section">→<section>、<div class="footer">→<footer> 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より　それぞれのclass名の意味は ★3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) 　を参照すること。　表示幅は、基本80%,にスマートホン用に最小で640px、最大で900pxになります。(画像も伸縮します。) <!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"> ＿<h1><img src="images/hikaku.jpg" alt="具体的見出し" width="950" height="300"></h1> </div> <div class="section"> ＿<h2>本文見出し</h2> </div> </body> </html>

質問者

お礼 2012/01/30 20:01

最初に回答を頂いた方にベストアンサーはさせて頂きましたが、今回の質問内容だけで無く、技術に関するサイトまでご提示頂き、ありがとうございました。まだ、作り始めたばかりで、用語や使われているタグについて、技術的な理解が全く無いため、こうした体系的なご指導を頂けると理解が深まり、本当に助かります。教えて頂いたサイトで学び、スキルアップを目指したいと思います。この度はお時間を割いてご指導頂き、ありがとうございました。

szk9998
ベストアンサー率45% (1026/2241)

2012/01/29 23:55 回答No.2

まずは文法エラーから・・・ imgタグが閉じてませんけど、間違いですよね？ <img src="xxxxxx.jpg" alt="xxxxxxxxx" /> ですね。次に、 width="800" height="40"; の指定の仕方。 width:800px;height:40px; が正解。すきまがでるのは、 h1タグ、h2タグともに、デフォルトで上下にマージンがついているからですね。これを0に指定してやる必要があります。（上だけじゃなく下もですよね） h1 {margin:0px; color:#330000;font-family:Geogia,Times New Roman,sans-selif} h2 {margin:0px; color:#330000;font-family:Geogia,Times New Roman,sans-selif;} これで手元で試すと、ご要望のように表示できていますけど。どうでしょう。

質問者