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

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

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

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

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

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

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

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

サンプルコード

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に以下を追加します。

CSS

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

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

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

HTML

<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>

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

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

それでは！