今更聞けない！エンジニアのための CSS の基礎講座横並び（float）レイアウト編

by Makky

2016/05/11

Nulab / Development

以前に掲載した、「今更聞けない！エンジニアのための CSS の基礎講座〜ボックスモデル編〜」が社内外で好評だったこともあり、エンジニアのためのCSS基礎講座シリーズ続編として、「横並び（float）レイアウト編」について解説していきたいとおもいます。

横並びのレイアウトを実現する場合にfloatはとても頻繁に使用する手法なのですが、仕組みが少し特徴的なので一見すると小難しいことをしているように思われがちな手法の1つです。

失敗しやすいポイントを交えながらfloatの解説を行うので、なんとなく使っていた方はこれを機会にしっかりと理解して、うまく活用していきましょう。

floatとは

画像と文章が横に並んでいたり、ナビゲーションとコンテンツが左右に並んでいるwebサイトを見たことは無いでしょうか？このレイアウトでよく使用される手法がfloatを使用したやり方です。

基本的には指定した要素を右や左に配置する際に使用し、ナビゲーションとコンテンツの配置、2・3カラムのコンテンツ、サムネイル付きの記事表示などで使用することが多いです。

今ではfloat以外での横並びのレイアウト手法も確立されていますが、基本的なfloatの仕組みを知ることでCSSの基礎部分への理解を深めていきましょう。

今回解説するfloatは以下のような機能をもっています。

floatプロパティの値	効果
left	指定した要素をブロックボックスとして左に配置します。後に続く内容はその右側に回り込みます。
right	指定した要素をブロックボックスとして右に配置します。後に続く内容はその左側に回り込みます。
none	配置を指定しません。初期値です。

float : leftの例

See the Pen float-left by makotofukuda (@mfukuda) on CodePen.

float : rightの例

See the Pen float-right by makotofukuda (@mfukuda) on CodePen.

floatの仕組み

floatの仕組みとしては、指定した要素を浮動化（浮いた状態）にさせ、右や左に配置することができます。

通常であればブロックボックスは縦方向へ、インラインブロックは横方向へ配置されるように、それぞれ決まっているフローがありますが、この「浮動化」という特徴的な仕組みでは、浮動化している要素は通常のフローから外れてしまいます。

さらに、floatで指定した要素はそれ以外の要素にも影響を与えてしまいます。具体的には「ブロックボックスは浮動ボックスの背面に、インラインボックスは前面に配置される」という仕組みになっています。また行ボックスの間にfloatがあると、テキストが回りこんだようになります。

この背面や前面という配置が、実際にどういう風に配置されるのか言葉だけではイメージしにくいため、詳しく掘り下げていきましょう。

「ブロックボックス」と「インラインボックス」の解説についてはこちらの記事で解説

背面に配置されるブロックボックス

See the Pen float(blockbox) by makotofukuda (@mfukuda) on CodePen.

通常のブロックボックスは幅関係なく上から下へ縦方向に配置されていきますが、このように、浮動化している要素は通常のフローから外れてしまうため、ないものとして扱われ配置されます。そして、それ以降のブロックボックスはfloatした要素の背面に並んで配置されるようになります。

前面に配置されるインラインボックス

See the Pen float(inlinebox) by makotofukuda (@mfukuda) on CodePen.

インラインブロックの場合はfloatしている要素の前面に配置されるため、通常のフローと同様に横方向へ配置されます。

このままではわかりにくいので、わかりやすいようにネガティブマージンを使用して、floatした要素の前面に来ていることがわかるように調整しています。

斜めからみるとこのようにイメージになります。

この様にfloatを指定した要素以外の要素にも影響を与えることがわかると思います。

行ボックスでテキストが回りこむ仕組み

最初の「float : left」「float : right」の例のように、テキストが回りこむような表示は行ボックスというものが関係しています。

この行ボックスはブロックボックス、インラインボックスとは別に一行ごとに生成されるボックスのことで、通常は包含するボックスの幅いっぱいに広がります。

しかし、間にfloatを指定している要素がある場合は、その要素に応じて幅を調整するようになります。そのため、行ボックスがfloat部分の幅を調整することで、テキストが回りこんだようになるという仕組みになります。

このような仕組みでfloatやfloat要素以外で影響を受ける要素は配置されていきます。

floatを使用して画像付き一覧表示

ブログやユーザーの一覧表示などでよく使われる、画像付きテキスト一覧表示がありますが（ヌーラボサイトのトップページにも使用されていますね）、このような画像とコンテンツの組み合わせもfloatを使用して、レイアウトすることが出来ます。

次はそのレイアウトを例にfloatでのレイアウトで失敗しやすいポイントを見ていきましょう。

最初に解説したように、左に配置する場合はleftを使用すればよいので、画像に「float:left」を指定すればうまくいきそうな印象です。一見するとこれだけで出来るお手軽な印象ですが、実はfloatは失敗しやすいポイントがいくつかあります。

失敗しやすいfloatのポイント

floatは勝手に解除されない
親要素がはみ出してしまう

1. floatは勝手に解除されない

See the Pen clear properties need by makotofukuda (@mfukuda) on CodePen.

floatは右や左に配置することができますが、配置後に出来た空白部分を埋めるように、その後の要素が配置されてしまいます。

例えば、画像に「float: left」のみを指定している場合、以降の要素が画像に回り込んでしまったり、テキスト量によってレイアウトが変わってしまうため、レイアウトが崩れてしまいます。そのため、floatを解除させるための記述が必要になります。

floatを解除するには、解除させたい要素にclearプロパティを指定することで解決することが出来ます。

clearプロパティの一覧は以下のようになります。

clearプロパティ値	効果
left	左フロートに対する回り込みを解除
right	右フロートに対する回り込みを解除
both	どちらの回り込みも解除
none	回り込みを解除しない（初期値）

また、clearプロパティの原理としては、margin-topを自動的に浮動化した要素の高さまで調整するような振る舞いをします。「floatを解除する」というよりも、「floatの影響の及ばない範囲まで調整する」というイメージの方が理解しやすいかもしれません。

2. 親要素がはみ出してしまう

See the Pen clear properties by makotofukuda (@mfukuda) on CodePen.

最初の解説のようにfloat要素は浮動化しているため、実は通常のフローから外れるような振る舞いになります。

これが原因のため、要素自体の高さはあっても、描写領域としては認識されないため、親要素からはみ出してしまうような表示になってしまいます。

この現象は「1. floatは勝手に解除されない」でclearプロパティを使用したように、親要素の内側で何かしらの要素を使ってclearを指定すればよいのですが、内容によっては都合よくclearを指定できる要素がないため、不要な要素が必要になったり、HTMLの文法的に問題が出る場合があります。

また、他の方法として、floatさせた親要素にoverflowプロパティでvisible以外を指定すると、問題が解決する手法もありますが、この手法はoverflowを使用しているために起こってしまう別の問題などを含んでいるため、使用できる場面が限られてしまいます。

そこで、この問題を解決するために確立されたのがclearfixという手法です。

clearfixとは

海外のデベロッパーの方が2004年ごろに公表したのが始まりとされていて、擬似要素の「:after」を利用して、htmlに不要な要素を作らずにfloatを解除させることを目的とした手法です。

当時はCSSで実現できることも限られていたのでIEのバグを利用したり、NetscapeやIE7以前のブラウザも考慮した記述で実装されていました。

現在では、利用率の多いとされていたブラウザやバージョンから変わっているため、内容も最適化されて短い記述で実現することが出来ます。

clearfix（最新バージョン）

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

clearfixの原理

See the Pen explain of clearfix by makotofukuda (@mfukuda) on CodePen.

clearfixはfloatを指定した要素の親要素に「:after」という擬似要素を追加します。

この「:after」は「contentプロパティ」と一緒に使用することで、指定した要素の末尾にインライン要素を追加することができ、その「:after」要素に対して、「display: block;」と「clearプロパティ」を指定することで、「div.clear」と同じような効果を実現することが出来ます。

clearfixの使い方

事前にclearfix用のクラスを準備します。このクラスをfloatさせた要素の親要素に対して設定することで、floatによる問題を解決することが出来ます。

もし、SASSなどを使用しているのであればmixinをつくっておくのもやり方の1つです。この場合は親要素のセレクタに「@include clearfix;」と記述することで、mixinの内容が展開されると思います。これでfloatの失敗しやすいポイントもしっかり解決できると思います。

時代とともに最適化するclearfix

最新のclearfixは内容が最適化されている分、少し古いブラウザへの考慮はそれほどされていません。そのため、最新版ではIE6,7のような古いブラウザは非対応になっていますが、時代ごとに最適化されてきた経緯があるため、IE6,7に対応した記述もあります。

clearfix（IE6,7対応）

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
/* End clearfix */

また、出来て間もない初期のバージョンは、今では使用されていないブラウザへの考慮も必要だったため、記述内容は大幅に違っています。

clearfix(初期バージョン)

.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE Mac \*/
* html .clearfix {height: 1%;}
.clearfix{display:block;}
/* End Hack */

このあたりの記述の違いにも、その時に最適なやり方を確立しようとする歴史を感じられると思います。

各記述が気になった方は、その記述について調べてみるとより深くその時のデベロッパーの~~ブラウザへの憤り~~創意工夫や歴史を垣間見れると思います。

他のレイアウト手法や次世代のレイアウト手法

floatプロパティとclearfixについて解説してきましたが、この手法も万能ではないため、場面によって他の手法を使い分けることで横並びのレイアウトを実現することも必要になります。

例えば、画像をテキストを水平に揃えたい場合。特に行数が可変したりする場合などは、floatでのレイアウトは向いていません。この場合は「display: table-cell」を使用することで、横並びしつつ水平に揃えることが可能になります。

See the Pen table-cell by makotofukuda (@mfukuda) on CodePen.

この方法はCSS側でtableタグやth,tdタグと同じような振る舞いになるように指定することで、実現出来ています。これも万能の様に見えますが、IE7以下はそのまま使用出来なかったり、marginが使えなかったりとそれなりに不便な面もあります。

また、「flexbox」という新しい手法の登場により、CSSでは難しかったレイアウトの実現なども可能となり、注目されています。

特に、等間隔での配置や縦の中央揃えなど、以前では難しかったレイアウトも簡単な記述で実現することで可能となり、とても期待できる手法の1つとなっています。（ヌーラボの一部サービスでも使用しています）

ただ、この手法も万能ではなく、IE9ではそのまま使用出来なかったり、IE10でも完全に対応出来ない部分があったりと、まだまだ環境によっては使用が難しい状態です。

それぞれの手法で得意な点と不得意な点があるので、特徴を理解することで場面に応じて手法を使い分けることが必要になってきます。また、新しい手法が生まれたからといって、floatのようにこれまで使われてきた手法がなくなっていくということでもないため、基礎的な部分を理解することで、それぞれの特徴を理解できることでしょう。

まとめ

今回はfloatについての解説でしたが、いかがだったでしょうか？

レイアウトが思うようにいかずに挫折、仕組みがピンとこなくて避けていたという方も多いのではないでしょうか。今回の解説でしっかりと理解してなんとなくのCSSから卒業していただけると幸いです。

ヌーラボでは現在フロントエンドエンジニアは募集しておりませんが、CSS も自分で書きたい！というエンジニアも大歓迎です。是非こちらからご応募ください。

ヌーラボのフロントエンド・エンジニアとお話がしてみたいという方も募集していますので、ご応募お待ちしています。