CSSによる段組（マルチカラム）レイアウト講座

最終更新 2006年5月28日

このサイトについて

テーブルを使わず、CSS で段組レイアウトを実現する方法を、CSS2 の仕様を根拠に、ブラウザのバグ対策を交えながら解説します。

CSS で段組レイアウトをするには float か position を使うのが一般的です。 テーブルレイアウトとは異なり、HTML はそのままで、CSS を変更するだけで左右のカラム（段）を入れ替えられます。

基礎編では float の仕様とブラウザのバグについて、 実践編では4つ（3カラムでは5つ）のボックスとそれらのコンテナブロックを用いた HTML を例に、float を利用したよくあるレイアウトのやり方を説明します。

目次

  1. 基礎編
    1. フロートを使ってみる
    2. ボックスモデルと DOCTYPE スイッチ
    3. ボックスモデルバグの対処法
    4. 実際に段組を作ってみる
    5. フロートの性質
    6. clear の性質
    7. 段組が崩れるのを防ぐ
  2. 実践編