横幅いっぱい(ピッタリ)に要素を並べるCSS(もちろんレスポンシブで…)

要素を横並びにする場合、一般的には「float」を使うのですが、表示したい場所(親ボックス内)の横幅に合わせてピッタリと横並びさせたい場合、要素にマージン(margin)があると、カラム落ちしてしまいます。

そんな時には『calc』の登場。CSS3から有効となった、サイズを計算式できっちり調整してくれる便利もの。%(パーセント)指定やpx(ピクセル)はもちろん、%とpxを混在させての計算式も無問題。

  • 要素にmarginがある場合、親要素のwidthにネガティブマージンで子要素のマージン分を指定します。
  • 子要素をfloatさせてcalcで並べたいカラム数で割り算し、さらにマージン×2を減算。
  • 子要素のwidthは%指定になるため、親要素の幅に連動して自動的に調整されますので、レスポンシブデザインにおいても有効です。

以下のコードは、子要素同士を10pxの間隔で3個並びにする例です。

<style>
div.itemWrapper{
margin:0 -5px;
/*display:block;*/
/*overflow:hidden;*/
}
div.itemWrapper a{
float:left;
margin:5px;
width:calc(100% / 3 - 10px);
background-color:#ccc;
}
</style>
<div class="itemWrapper">
<a href="#1">item_1</a>
<a href="#2">item_2</a>
<a href="#3">item_3</a>
<a href="#4">item_4</a>
<a href="#5">item_5</a>
</div>

子要素は「float」してますので、子要素の最後に『clear:both;』などで回り込みを解除してもいいですが、親要素に

display:block;
overflow:hidden;

を追加しておいたほうがスマートですね。

Web制作覚書