Blog

何がしたいかと言うと、

こういうレイアウトを考えているとします。

背景がグレーのボックスにサムネイル画像が９枚並んでいますね。

floatでずら～っと並べるのが一般的かと思いますが、サムネイルのボックスにつけたclassに一括でmarginを指定すると

こういう感じになり、両端か片端に隙間が空いてしまいます。

隙間を空かないようにするには、端にくるボックスにのみ違う指定をしてあげればいいのですが、
「ループ処理で表示させている」、「ECサイトのシステムなどで個別にclass名をふることが出来ない」
という状況がちょいちょい訪れます。

そこで、サムネイルボックスに同じcss指定をしつつ、左右ピッタリに並べる方法を紹介します。

まずhtmlから。

<div id="container">
  <div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
</div>

次にcss。

div#container {
width: 640px;
overflow: hidden;
}
div.outer {
width: 660px;
}
div.outer:after {
display: block;
clear: both;
content: "";
}
div.inner {
width: 200px;
height: 100px;
margin: 10px 20px 10px 0;
float: left;
}

これでhtmlのclass指定をいちいち変更せずにぴったり配置が実現できます。
簡単に解説を。

サムネイルボックス(class名inner)にはmargin指定を左だけ０にします。
それを３つ並べるので、サムネイルボックスが入っている親ボックス(class名outer)はwidthが660pxになります。
しかし、さらにその親ボックス(ID名container)のwidthは640pxなので、20pxはみ出ます。
そのはみ出た部分を表示させないためにoverflow:hiddenを指定します。
このままでは、サムネイルの次に来る要素が親ボックスと被ってしまいます。
そこで擬似要素を入れてfloat要素をクリアします。

こういう細かい部分が、往々にしてデザインを左右するので気を配りたいですね。