DAINASHI YESTERDAY

2013.10.23

【CSS】横並び(float)したブロック要素のマージン(margin)を指定する方法

01_

上の画像のように、divなどのブロック要素の中に
子要素を横並び(float)で表示させたいときに便利な方法。

上の例では、幅150px、高さ100pxのdiv要素を
マージン20pxで横に3つ並べています。

こういう場合、子要素の右と下に
マージンを指定するのが一般的だと思います。

02

しかしこれだと、一番右端の子要素マージンの分だけ
親要素より幅が大きくなるため、3番目の子要素が
下に回りこんでしまいます。

07

3番目、6番目の子要素に別のクラス名をつけて
スタイルを「margin-right:0;」と指定すれば意図した表示にはなりますが、
結構めんどくさいですし、今後さらにに子要素を追加したり、
並べ替えたりするときのことを考えるとできれば一括で指定したいところです。

ということで、子要素の3の倍数番目(3個、6個、9個、・・・)の
右マージンを0して、親要素にピッタリはめてやります。

06

サンプルコード

HTML

<div class="container">
<div><img src="images/01.jpg" alt="画像1" width="150" height="100" /></div>
<div><img src="images/02.jpg" alt="画像2" width="150" height="100" /></div>
<div><img src="images/03.jpg" alt="画像3" width="150" height="100" /></div>
<div><img src="images/04.jpg" alt="画像4" width="150" height="100" /></div>
<div><img src="images/05.jpg" alt="画像5" width="150" height="100" /></div>
<div><img src="images/06.jpg" alt="画像6" width="150" height="100" /></div>
</div>

CSS

.container {
width: 490px;
border: 2px solid #999;
}
.container > div {
width: 150px;
height: 100px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
background: #f00;
}
.container > div:nth-child(3n) {
margin-right: 0;
}

上記cssの(3n)の数字を変えれば、横に並べる個数を変更できます。
たとえば子要素を横に5つずつ並べたい場合は、

.container > div:nth-child(5n) {
margin-right: 0;
}

というふうになります。

clearfixもセットで指定するといいかも

ブロック要素の中で子要素をfloatさせると、
ブラウザが子要素の高さを認識できなくなります。

下の画像では子要素を2pxのボーダーで囲ってますが、
floatしているため高さが認識されていません。

これでも問題ない場合もあるんですが、
このままだとmarginの指定が反映されなかったり
背景画像が表示されなかったりといろいろ不便なことが多いので、
ブラウザに高さを認識してもらう必要があります。

cssに以下を追加します。

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

これはclearfixというCSSハックのひとつで、
簡単に言うとfloatした要素の後にCSSで空白を追加して、
ブラウザに「要素はここまでありますよ」と伝えるためのものです。

CSSファイルの中に上記を追加しておけば、
以下のようにしてどこでも使えるので便利です。

<div class="container cf">
<div><img src="images/01.jpg" alt="画像1" width="150" height="100" /></div>
<div><img src="images/02.jpg" alt="画像2" width="150" height="100" /></div>
<div><img src="images/03.jpg" alt="画像3" width="150" height="100" /></div>
<div><img src="images/04.jpg" alt="画像4" width="150" height="100" /></div>
<div><img src="images/05.jpg" alt="画像5" width="150" height="100" /></div>
<div><img src="images/06.jpg" alt="画像6" width="150" height="100" /></div>
</div>

containertというクラス名のついた親要素にクラス名「cf」も追加しています。

ということで、marginが効かなかったり背景画像が表示されないなどのときは
clearfix試してみるといいかもです。それでは!

投稿者: