CSS3のcolumn-widthでマルチカラムレイアウトを実現する

column-widthでもマルチカラムレイアウトが作れます。 Ardor(@ArdorOnline)です。 マルチカラムレイアウトをCSS3で作るならcolumn-widthでも作れます。 前回、column-countでマルチカラムを作成しました。 column-countでは、段組み数を指定する方法なので、他の幅などを考慮して作成する必要があります。 何段で作成するかを明確に指定が可能な方法です。 では、幅に合わせて段組みを作りたい場合は、どうしたらいいでしょうか？ 幅で指定したい場合は、column-widthを利用します。

幅指定でマルチカラム

幅を指定してマルチカラムレイアウトを実現する場合は、column-widthを利用します。 ブラウザによって指定が異なりますので、すべて指定すると良いです。

プロパティ	値	サンプル
column-width	段幅 / auto	column-width : 100px
-moz-column-width	段幅 / auto	-moz-column-width : 100px
-webkit-column-width	段幅 / auto	-webkit-column-width : 100px

スタイルの記述

スタイルの記述例は次の通りです。

.sample {
 width: 600px;
 margin: auto;
 column-width: 250px;
 -moz-column-width: 250px;
 -webkit-column-width: 250px;
}

例では、マルチカラムの幅を250pxで指定しています。
ただし必ずしも250pxになることはないようです。 段組みの間には余白ができますし、全体で600pxを指定しています。 250px×2 = 500px ですので、残り100pxが段組みの余白になります。

サンプル

次に上記スタイルを指定した段組みの内容を表示させています。

マルチカラムレイアウト

このブロックはcolumn-countプロパティで2段になるように指定されています。

段組みレイアウトサンプル

このブロックはcolumn-countプロパティで2段になるように指定されています。

最後に

CSS3からはレイアウトにもあまり苦労しなくて済みそうです。 少し前は、だいぶ苦労した記憶があります。。

最後までお読み頂きありがとうございます。