【超常用】要素を横並びにする方法【IE8対応】（HTML・CSS実践 ）

このサイトは駆け出しのコーダーやwebデザイナーのためにテクニックをストックするサイト『TechStock（テックストック）』である。

この記事ではweb制作の現場で必ず使われている、要素を横並びする方法を紹介する。

また、この方法は、何かとバグの多いIE8でも対応できる方法だ。

ぜひ参考にしていただきたい。

まずは結論から。

floatとclearfix

筆者が超常用するCSSでの横並びの方法だ。

例えば、下記のサンプルようなhtmlがあったとする。

 

<div>

　<div><img src=“#”></div>

　<div><img src=“#”></div>

　<div><img src=“#”></div>

　<div><img src=“#”></div>

</div>

 

このようなhtmlに出くわしたとき、筆者ならこうする。

 

<div class=“wrapper clearfix”>

　<div><img src=“#”></div>

　<div><img src=“#”></div>

　<div><img src=“#”></div>

　<div><img src=“#”></div>

</div>

 

一番外側の<div>タグに

class=“wrapper clearfix”

とつけて、cssで

 

.clearfix:after{

　content: “”;

　clear: both;

　display: block;

}

.wrapper > div{

　float:left;

　width:25%;

}

.wrapper > div img{

　max-width:100%;

　width:auto;

　height:auto;

}

 

floatを使う人にとってはおなじみだろうが、お初にお目にかかる人に向けて記す。

floatプロパティは本来、テキストとセットで使うことが多く、画像をテキストの中に埋め込む時に使う。

そしてfloatが影響して欲しくない、次の要素が始まる直前にcssの『clear:both;』をつけることによってfloat特有のバグを回避することができる。

その特性を利用して要素を横並びにしようというのが『clearfix』という技だ。

任意の要素のクラスかidに擬似クラス『after』を付与して

 

.clearfix:after{

　content: “”;

　clear: both;

　display: block;

}

 

とcssを書く。

次に横並びにしたい要素を囲んでいるタグに先ほど設定したクラス（この例では『clearfix』）を付ける。

 

<div class=“wrapper clearfix”>

　<div><img src=“#”></div>

　<div><img src=“#”></div>

　<div><img src=“#”></div>

　<div><img src=“#”></div>

</div>

 

そして、横並びにしたい要素には

 

.wrapper > div{

　float:left;

　width:25%;

}

 

とfloatとwidthを設定してやる。

今回の例では width:25%; とcssで書いているが、これは、横並びにしたい要素が4つだからだ。

100％ ÷ 4 ＝25％

というわけだ。

 

ついでに、横並びにする要素の中に画像 imgタグがある場合に注意したcssを書いておいた。

横並びにする要素のwidthを%で指定すると、要素が可変になり、要素の中身が画像の場合は、要素の幅が画像の幅よりも小さくなった時、画像が要素の外にはみ出してしまうのだ。

それを防ぐため、下記のcssを追記した。

 

.wrapper > div img{

　max-width:100%;

　width:auto;

　height:auto;

}

 

画像にwidth:100%; をつけてしまうと画像がぼやけてしまう可能性がある。

今回の場合、要素の幅がいちばん外側の要素、つまりウィンドウ幅の25%の横幅に合わせて画像が引き延ばされてしまうのです。

 

その結果、画像が引き延ばされてぼやけてしまうのです。

 

そこで、max-width:100%; と設定し、画像の幅は、、最大で画像の幅としている。

つまり、画像が300pxならば、横並びにする要素の横幅が400pxであっても画像自体は、画像の横幅である300pxを超えることはなくなる。

 

しかも、width:auto;とheight:auto; を設定しているので、画像の縦横比（アスペクト比）は一定で崩れることなく画像が可変する仕組みだ。

 

画像の最大サイズを指定し、そのサイズよりも小さくなったら可変して画像の縦横比（アスペクト比）を固定する。

 

こうすることで横並びにする要素の中の画像も要素に合わせて可変になる。