- ベストアンサー
CSSでマージン設定がうまくいかない問題
- CSSを使用してdiv要素のマージン設定を行いたいがうまくいかない問題について
- clearfixを使用してもマージン設定がうまくいかない問題が発生している
- div要素の高さが変化するたびにマージンの効果がなくなる問題がある
- justin_shingo
- お礼率100% (10/10)
- HTML
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞clearfixを使用してもうまくいきません。 clearfixも記事をfloatで配置するのも、HTMLの考え方からは邪道です。 まず、HTMLは、文書構造にしたがって正しくマークアップしましょう。divやidはそのためのものです。(デザインに利用できますが、そのためじゃない)HTML5ではより厳密になります。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 ・floatを使うと、本来の記事中の挿絵などをfloat/clearできなくなります。 「親のmainの中のsub_01やsub_02に画像や文字が記入されるにつれて、」とあますが、それらにfoatさせたい画像などが入ると行きづまります。 ・多くの場合、構造を無視して文書の順番を変えなければならなくなります。 たとえばそのセクションの目次を前に書かなければならなくなる。 [例]文書の内容がわかりませんので、あくまで例としてお読みください。なお、div要素のcass名はHTM5の該当する要素名にしてあります。(3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )) ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みです。 ★i-pone,i-padにも対応するよう640px巾まで縮められます。最大900px ★(注)本来はfloatを使うべきではありません。今回は、中身がわからないのでfloatにしてあります。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★隙間が出来るのは、footer,header,section内にある最初と最後の<p>あるいは他のブロック要素のためです。その要素のマージンの影響です。 そのマージンを消すと隙間がくっつき、指定できるようになります。 ★hrでclearしています。 ★タブは、＿に置換してあります。戻すこと。 ★HTML5のときは、それぞれをheader,section,footerに変更する。 <!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"> <!-- html,body{margin:0;padding:0;} div.header,div.section,div.footer{width:85%;margin:0 auto;position:relative;padding:0;min-width:640px;max-width:900px;} div.section div.section{width:30%;float:left;margin:5px 2%;padding:0;min-width:0;} div.section div.section+div.section{width:60%;} hr.section_end{clear:both;/* visibility:hidden;*/border-color:red;margin:0;height:0;} div.section p,div.footer p,div.header h1{margin:0;} /* 見本がわかりやすくするため */ div.header,div.footer{ height:100px; background-color:yellow; } div.section{ background-color:silver; } div.section div.section{ background-color:orange; height: 200px;/* 高さを任意に変更 */ } div.section div.section+div.section{ height: 300px;/* 高さを任意に変更 */ } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<div class="section"> ＿＿＿<p>aaaaaaa</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<p>bbbbbbb</p> ＿＿</div> ＿＿<hr class="section_end"> ＿</div> ＿<div class="footer"> ＿＿<p>footer</p> ＿</div> </body> </html>
お礼
大変わかりやすい内容、いつもありがとうございます。 今回もhtmlの移し替えて、一つずつ確認しました。 文法に確実に沿って記述するのは大変難しいですが、今後も参考にさせていただきます。