HTML/CSS 横並びレイアウトの手法 inline-block,float,flex

横並びレイアウト手法のまとめ

面倒なのでインラインでスタイルを書いていますがそれを推奨しているわけではありません。

float:left; float:right;

floatは要素を左右寄せするプロパティです。後続要素はフロートした側の反対に回りこみます。この手法は古くから使われており、現在も横並びの手法の主流です。

値はleft,right,noneの3つ

例

<div style="width:500px;">
  <div style="width:250px; height:250px; float:left; background:red;">CONTENT</div>
  <div style="width:250px; height:250px; float:right; background:blue;">CONTENT</div>
  <div style="clear:both;"></div>
</div>

表示↓

CONTENT

floatさせたブロック要素の後続要素はフロートと反対側に回り込んでしまうので、フロートさせている要素の直後にclear:bothをかけたブロック要素をおいてfloatをクリアしています。基本的にfloatとclear:bothというのはセットです。

<div style="clear:both"></div>

この方法では空divをひとつ作ることになるわけでコードが少し汚れてしまいます。そこで2004年にclearfixという手法が公開されました。

clearfixによるフロート解除

clearfixのCSSを見ると大体こうなってるでしょう。

.clearfix:after {
  display: block;
  content: '.';
  height: 0;
  visibility:hidden;
  clear: both;
}

clearfixというクラスがついているブロック要素の後（:after）にブロック要素(display:block; content:'.';)を非表示(height:0; visibility:hidden;)で生成し、clear:both;をかけるというスタイルになります。

使い方は、フロートさせたい要素をdivで囲み、そのdivに対してclass="clearfix"をつければおｋ。これを使えば無駄な空divを書く必要が無くなります。

<div style="width:500px;" class="clearfix">
  <div style="width:250px; height:250px;">CONTENT</div>
  <div class="width:250px; height:250px;">CONTENT</div>
</div>

content:''ではなくcontent:'.'とドットを入れる理由はIE7などの一部の古いブラウザでcontentが空のブロックが生成できないためです。古いブラウザの対応を捨てるのであれば以下の省略型のclearfixでも同じ挙動を示します。

.clearfix:after { display:block; content:''; clear:both; }

display: inline-block;

インラインブロックで表示することでテキストと同じように横に並んでくれます。これは並べたいものが複数あり、数行にもなりそうな場合で重宝します。

<div>
  <div style="display:inline-block; width:250px; height:250px; background:red;">CONTENT</div>
  <div style="display:inline-block; width:250px; height:250px; background:blue;">CONTENT</div>
  <div style="display:inline-block; width:250px; height:250px; background:red;">CONTENT</div>
  <div style="display:inline-block; width:250px; height:250px; background:blue;">CONTENT</div>
  <div style="display:inline-block; width:250px; height:250px; background:red;">CONTENT</div>
  <div style="display:inline-block; width:250px; height:250px; background:blue;">CONTENT</div>
</div>

inline-blockで横並びをさせた場合、要素の間にletter-spacing: 0.4emが勝手に入ってしまいます。そのためinline-blockを使用する際は必ずdivで囲み、そのdivに対してletter-spacing: -0.4em;を指定します。

これでdivの隙間はなくなりますが、子要素にletter-spacingが継承されてしまうため、子に対してletter-spacing:normalを指定します。

<div style="letter-spacing: -0.4em;">
  <div style="display:inline-block; letter-spacing:normal; width:250px; height:250px; background:red;">CONTENT</div>
  <div style="display:inline-block; letter-spacing:normal; width:250px; height:250px; background:blue;">CONTENT</div>
  <div style="display:inline-block; letter-spacing:normal; width:250px; height:250px; background:red;">CONTENT</div>
  <div style="display:inline-block; letter-spacing:normal; width:250px; height:250px; background:blue;">CONTENT</div>
  <div style="display:inline-block; letter-spacing:normal; width:250px; height:250px; background:red;">CONTENT</div>
  <div style="display:inline-block; letter-spacing:normal; width:250px; height:250px; background:blue;">CONTENT</div>
</div>

CONTENT

2014年に俺氏が考案したmulti-columnスタイル

.multi-column { letter-spacing:-0.4em; }
.multi-column > * {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
} .ie7 .multi-column > * { display:inline; zoom:1; }

横並びさせたい要素をmulti-columnクラスをつけたブロック要素で囲み、子要素のwidthと必要であればmarginを指定するだけで並んでくれます。横幅いっぱいになったら自動改行が入るため、レイアウトが大きく崩れる心配もありません。

<div class="multi-column">
  <div class="photo">画像</div>
  <div class="content">コンテンツ</div>
</div>

条件分岐コメントを使えば、IE7にも対応します。我ながら便利なスタイルです。

display: flex;

CSS3で実装されたプロパティです。上のmulti-columnと同じく、親要素にdisplay:flexを指定すれば勝手に横並びしてくれてしかも横幅、vertical-alignまでそろえてくれる賢いやつです。しかしブラウザによって解釈が違いすぎて使いづらいです。ちなみにiOS標準ブラウザであるSafariとアンドロイド標準ブラウザは現時点(2015/02)で対応していないことを確認しています。

まだ使わないほうがよさそうですね。

<div style="width:500px; display:flex;">
  <div style="width:250px; height:250px; background:red;">CONTENT</div>
  <div style="width:250px; height:250px; background:blue;">CONTENT</div>
</div>

CONTENT

関連記事