7. 段組が崩れるのを防ぐ

最終更新 2006年3月6日


今回はフロートに関するさまざまなバグの復習です。また、バグに関係なく段組が崩れる条件とその対処法を簡単にまとめます。

バグ対策

これまでに紹介したバグとその対処法

その他の致命的なバグ

これについては実践編 - CSS による 2カラム(2段組)レイアウト -でも少し触れます。

WinIE では float や clear を指定したボックスのマージンやボーダー、ボックス内の文字や背景色に関するバグがいくつもあります。 対処法のひとつは、ボックスに width を指定することです。 これまでの例で、clear したボックスに width:100% を指定していたのは、このためです。

また、フロートのコンテナブロックに幅を指定しない場合、IE では表示がおかしくなることがよくあります。 フロートのコンテナブロックには width を指定するようにしましょう。

いわゆる「カラム落ち」を防ぐには

完璧に段組を完成させ、バグも回避できたとしても、カラム(段)の内容によってはカラム落ちすることがあります。 カラム落ちを防ぐには、カラムの内容にも気をつけなければなりません。

カラムの幅をこえる要素を使わない

幅を指定したカラムの内容に、カラムの幅よりも大きな幅を持つ要素があると、カラム落ちの原因になります。

仕様では、ボックスの内容物がボックスの幅をこえる場合は、ボックス自体の幅はそのままで、内容物がボックスをはみ出すようになっています(11.1 オーバフロー及び切取り参照)。 ところが、WinIE は width で決められたボックス自体の幅を広げようとします。その結果、カラム落ちが発生します。

カラム落ちを防ぐにはカラムの幅をこえる要素を使わないことが確実です。 内容がボックスの幅をこえる主な原因には以下のものがあります。

pre 要素

pre 要素は整形済みテキストを示します。HTMLの仕様では、pre 要素内のテキストは自動的な語の折り返しを不可能にしてよいとされています。 よって、pre 要素内の文字数によってはカラムの幅を超えてしまいます。

対策としては、pre 要素に overflow:auto などを指定し、内容物がボックスの幅をこえる場合に横スクロールを提供することが挙げられます。 ただし、WinIE6 では、overflow を指定した要素自体に width によって幅を与えないと効果が現れません。

また、MacIE5 には overflow:visible(初期値)以外を指定した要素の内容が消えるというバグもあります。

とにかく、pre 要素はやっかいだということです。

table 要素

大きな表を使った場合にもボックスをはみ出す(IEならボックス幅を広げる)ことがあります。

URLなどの長い半角英数字

空白文字を含まない長い半角英数字はひとつの英単語と見なされるのか、自動折り返しがされないことがあります。 それには URL も含まれます。

大きな画像

img 要素はそれ自体に幅を備えています。幅可変のレイアウトでは、ウインドウ幅を狭くしたときに、カラムの幅が画像の幅よりも小さくなってしまうことがあります。 その結果、カラム落ちします。

カラムに overflow:hidden

各カラムに overflow:hidden を指定すれば、カラムの子要素がカラムの幅をこえた場合に、はみ出す部分を「表示しない」ようになります。 これによってカラム落ちを回避できます。