1. フロートを使ってみる

最終更新 2006年3月6日


CSSで段組レイアウトを実現するには、大きく分けて2つの方法があります。

それぞれに利点と欠点がありますが、ここでは float プロパティを利用した段組の作り方を説明します。

float(簡単にいうと)
float:left を指定したブロックは左に寄せられ、あとにつづく内容が右に回りこむ。
float:right を指定したブロックは右に寄せられ、あとにつづく内容が左に回りこむ。

float を使った段組は、float:left(またはright)でブロックレベル要素を横に並べることで実現します。 では実際に float を指定したボックスがどのように表示されるか見てみましょう。

ボックスA に width と float を指定すると

以下のソースの場合、どんなふうに表示されるでしょうか。

<div id="boxA">
ボックスA
</div>

<div id="boxB">
ボックスB
</div>
#boxA {
 width:300px;
 float:left;
}

ボックスA は幅 300px になり左に寄せられ、ボックスB の内容がその右側に回りこんで残りの領域を埋めます。 しかしこれでは段組にはなりません。 ボックスA に幅とフロートを指定するだけでは、ボックスB の内容が多い場合には、ボックスB の内容がボックスA の下にも流し込まれます。 段組にはなりませんが、float の使い方としては間違っていません。

ボックスB にも width を指定すると

ボックスA のほうが大きい場合

#boxA {
 width:300px;
 float:left;
}

#boxB {
 width:200px;
}

このように、ボックスB にも width を指定するとどうでしょうか。

Firefox ではボックスB の幅は 200px になり、ボックスA の下に置かれます。 IE6 だとボックスB はボックスA の右に置かれ、段組が成功したかのように見えます。

Firefoxでの表示 IE6での表示

ボックスB のほうが大きい場合

#boxA {
 width:200px;
 float:left;
}

#boxB {
 width:400px;
}

ボックスB の width のほうがボックスA のそれより大きい場合はまた少し違った表示になります。

Firefox ではボックスB の内容はボックスA の右側にまわりこみ、さらにボックスA の下にも流し込まれます。 IE6 だと先ほどと同様にボックスB はボックスA の右に置かれます。

Firefoxでの表示 IE6での表示

どちらの表示が正しいかというと、Firefox のほうです。 実は IE6 には、フロートの直後の(clear も float もしていない)ボックスに幅を指定するとこのような表示になるバグがあるのです。

つまり、IE できちんと表示させるためには、フロートしたボックスの直後の(clear も float もしていない)ボックスには幅を指定してはいけないことになります。

ボックスB にも float を指定すると

#boxA {
 width:300px;
 float:left;
}

#boxB {
 float:left;
}

ボックスB に width を指定せずに float だけ指定するとどうでしょうか。

IE では段組になりますが、Firefox ではなりません。

Firefoxでの表示 IE6での表示

CSS2 の仕様によるとフロートの幅は明確に指定しなければなりません(img 要素などそれ自体に幅をもつ場合を除く)。 幅が明確でないフロートをどのように表示するかはブラウザによって異なります。

float を指定したボックスには必ず width も指定しましょう。

※CSS2.1 では、width が明確でないフロートの幅は内容量に合わせて縮められた幅になります。 Firefox や Opera などはそのように表示します。Mac 版 IE5 では幅100%であるかのように表示されるようです。

ボックスB にも width と float を指定すると

#boxA {
 width:300px;
 float:left;
}

#boxB {
 width:200px;
 float:left;
}

今回はうまくいきます。IE でも Firefox でも、幅 300px のボックスA の右側に幅 200px のボックスBが配置されます。

では何故この方法で段組ができるのでしょうか。 「float:left は、ボックスを左に寄せ、後続の要素を右側に回り込ませるもの」であるならば、ボックスB にまで float:left を指定する必要はないのではないか。 するとしても、float:right じゃないのか。 このような疑問を持っている人も多いかと思います。仕様書を読めばこの疑問は解消されます。

float で段組を実現する仕組み

まずはCSS2.1仕様書日本語訳の9.5浮動体を参照してください。 難しくてよくわかりませんね。では、多少平易に書かれたCSS2 リファレンスfloat(フロートを配置する)の項を見てみましょう。 終わりのほうに「フロートの働きを規定する厳密な規則」が載っています(当然これは仕様書にも書かれています)。

float での段組を理解するには、このうち(少なくとも)次の3つの規則を知る必要があります。

  1. あるボックスが左フロートで,ソース文書内でそれ以前に出現する要素が左フロートを生成する時,後に出現する左フロートの外左辺が,前に出現する左フロートの外右辺より右でなければならない。あるいは,後に出現する左フロートの外上辺が,前に出現する左フロートの外下辺より下でなければならない。右フロートも同様の規則に従う。
  2. フロートはできる限り上に位置しなければならない。
  3. 左フロートはできる限り左に,右フロートはできる限り右に位置しなければならない。ただし,右寄せや左寄せよりは,できる限りの上寄せを優先する。

つまり、2番の規則により、ボックスの配置はつぎのどちらかでなければならず、

横に並ぶ 縦に並ぶ

しかも8番、9番の規則により、ボックスが横に並ぶ配置が優先されるわけです。

「できる限り」というのは、通常、「フロートしたボックスの幅の合計が親要素(あるいはウインドウ)の幅以下の場合には」と解釈できます。 フロートしたボックスの幅が親要素の幅を超えると、「できる限り上に」配置することはできず「できる限り左に」配置されます。いわゆる「カラム落ち」です。

※厳密には、「できる限り」というのはフロートの働きを規定する厳密な規則のうちの、「〜してはならない」を満たす範囲で可能な限り、ということです。

ボックスA と B が左フロートのサンプルを開いて、ウインドウ幅を狭くしてみてください。 表示領域が 500px 未満になると、ボックスB はボックスA の右側にいられなくなり、ボックスA の下に落ちます。

まとめ

次回