「column-width」で段の幅を指定する
段組みレイアウトは、column-widthプロパティで段組の幅の最小値を指定して実装することもできます。次の例では「column-width: 200px;」として、段組の幅の最小値を200pxに指定しています。
リスト4 1段組の幅の最小値を200pxに指定／CSS（sample02.html）
div#article {
～略～
-moz-column-width: 200px;
-webkit-column-width: 200px;
column-width: 200px;
}
図5 column-width:200px; を指定した時の表示
前項のcolumn-countの値を設定しなかった場合、ブラウザによって、できるだけ多くの段が納まるように自動調整されます。
図6 描画領域の幅に応じて段数も変化する
「columns」で段数と段の幅の両方を指定する
columnsプロパティを使うと、段の数と段の横幅の両方の値を指定することができます。
「columns: 2 200px;」のように2つの値を指定すると、column-count: 2、column-width: 200px;を指定したのと同じに結果になります。この場合、「最大で2段組かつ1段の幅の最小値は200px」という意味です。
リスト5 段数を最大3つ、段の幅を最小200pxに指定／CSS（sample03.html）
div#article {
～略～
-moz-columns: 2 200px;
-webkit-columns: 2 200px;
columns: 2 200px;
}
ウィンドウ幅を広げても2段より多くなることはなく、ウィンドウ幅を狭めても1段の幅が200pxより小さくなることはありません。
図7 ウィンドウ幅を広げても2段より多くならない
図8 ウィンドウ幅を狭めても1段の幅が200pxより小さくならない
ここまでで、コンテンツをマルチカラムにすることができました。さらに、段組みの間隔や区切り線など、マルチカラムをより豊かに表現できるCSSプロパティを見ていきましょう。
