2017/04/29
float自体はよくわかっているつもりでも実際にレイアウトするときに右往左往しませんでしょうか。float解除はうまくいくけど後続要素との余白の設定がうまくいかずに、空のDIV要素を入れてからfloat解除したりして余白をねん出したりBRやHRなんかを使うかもしれませんが、セマンティック派の人に怒られます。
いくつも方法はあると思いますが私のよくやる方法を1つ。
ボックスを2行2列に並べてその下からまた文章が来る。ただし下の文章には背景色が設定されておりボックスからちょっと下げた位置から始めたい。
下のは見出しとボックスがくっつき過ぎているのでどうやって余白を取るかです。
ここに見出しです
まずボックスを4つ作ります。
<div class="floatbox1">1</div>
<div class="floatbox1">2</div>
<div class="floatbox1">3</div>
<div class="floatbox1">4</div>
次に大きさ背景色回り込み（float）を設定します。
.floatbox1{
float:left;
width:200px;
height:200px;
background-color:#f60;
margin:10px;
}
幅を設定してfloatしてあげると横に並びますね。しかし横に4つ並んでしまいました。そこで3つ目のボックスにfloat_clearクラスを足してclear:bothを書きます。
<div class="floatbox1 float_clear">
.float_clear{
clear:both;
}
ここに見出しです
うまく2行2列になりましたが、floatした要素は通常配置の要素からは認識できないので後続要素の見出しが上に来てしまいます。この後続要素にclear:bothを掛けたのが最初の様子です。
HTML
<div class="floatbox1">1</div>
<div class="floatbox1">2</div>
<div class="floatbox1 float_clear">3</div>
<div class="floatbox1">4</div>
<h2 class="float_clear">ここに見出しです</h2>
CSS
.floatbox1{
float:left;
width:100px;
height:100px;
background-color:#f60;
margin:10px;
}
.float_clear{
clear:both;
}
h2{
background-color:#0cf;
padding:10px;
}
ここから本題です。見出しとボックスの間に空間がほしいときどうしますか？
後続用の見出しに背景色がなければ見出しにpadding-topを設定すれば解決です。今回は背景色があるのでpadding-topでは背景色が上にたくさん取られるだけです。
margin-topではだめでしょうか。ダメなんですね。floatをクリアするためにその要素のmargin-topが既に使われてしまっているのでうまくいきません。
答えは簡単です。やり方はいくつもあります。4つのボックスの親要素のDIVを作って親要素のpadding-bottomを設定する方法もあるかもしれません。いわゆるdiv病というやつです。float_clearというクラス名だけでも見栄えががそのままクラス名ってどうよと言われそうなのでこれ以上HTMLを触りたくありません。
今回は、h2の上にある要素に下余白を取ってあげればいいのでboxの３か、4にクラスを追加してmargin:bottomを取って解決します。
.float_clear{
clear:both;
margin-bottom:50px;
}
でどうでしょう3つのボックスにfloat_clearクラスがあるのでそれにmargin-bottom:50px;を設定します。うまくいきました。ただし、見出しの下にも不要な余白がつくのでさらにCSSで余白を取っておきましょう。
h2.float_clear{
margin-bottom:auto;
}
これで出来上がりなんですが、おそらくこれって駄目なCSSの書き方なんだろうと思います。CSSが機能で分類されていないというか再利用性が低すぎるということですね。
float_clearクラスがclear:bothしたいのか、clear:bothしてさらにmargin-bottom:50px必要なのかです。今回2行2列だったのでうまく機能しますが、3行2列だとすると途中でfloat解除が2回出てくることになります。そうしたときにfloat_clearクラスには、clear:both機能だけが必要でmargin-bottom:50pxはべつのクラスに持たせるべきだというのが普通ですよね。そうすればh2.float_clearでmargin-bottom:autoする必要がなくなります。
わたしは、大規模な共同作業の経験がないのでついその場主義でCSSを書いてしまいます。逆にクラスが3つも4つもあるようなHTMLになれないものでアレルギーがあるようです。 class="floatbox1 float_clear"さえやりたくないです。 class="floatbox2"とかにして1つのクラスを見れば全部わかるようにしたいです。
.floatbox1,.floatbox2{
float:left;
width:100px;
height:100px;
background-color:#f60;
margin:10px;
}
.floatbox2{
clear:both;
}
これが好みですね。さらにmargin-bottom:50px必要なところにはclass="floatbox3"にして
.floatbox1,.floatbox2,.floatbox3{
float:left;
width:100px;
height:100px;
background-color:#f60;
margin:10px;
}
.floatbox2,.floatbox3{
clear:both;
}
.floatbox3{
margin-bottom:50px;
}
そうすると似たクラスがたくさんできますがHTML側はちょっとすっきりしますし、あとでCSS追いかけるの簡単だと思います。まったくもってわかっていませんがOOCSS（オブジェクト指向CSS）とは真反対の再利用性の低い、見てもわかりにくいものになっています。出来上がっているCSSに手を加えるとどこに影響があるかわからないし、ちょっとしたマイナー変更にまたクラスを作ってHTMLに6個目7個目のクラスを追加するのは抵抗がありますのでこんな方法でご紹介いたしました。
CSSの書き方よりflotaしてある方要素（先行要素）で余白を取ってくださいってことでよろしくお願いします。
