制作ブログ Web制作マークアップCSSマルチカラムをCSS3で実装

マルチカラムをCSS3で実装

CSS3で利用できるマルチカラムについて再確認。
カラムサンプル

カラム

幅を指定

column-width: 150px;
columns: 150px;

カラム数を指定

column-count: 3;
columns: 3;

「columns」は、幅指定もカラム数の指定もできるので便利。

※両方指定した場合の挙動は、W3Cドキュメント「http://www.w3.org/TR/css3-multicol/」のThe floor() function rounds a number to the next smaller integer. に記載されているが、よくよく考えて幅とカラムを両方指定するシーンはそうないと思う。

カラム間

余白

column-gap: 40px;

区切り線

column-rule-color: #ccc;
column-rule-style: solid;
column-rule-width: 10px;
column-rule: 10px solid #ccc;

border感覚です。「column-rule」で一まとめに指定するのが便利。

column-gapとcolumn-ruleの関係:図説

図説:column-gapとcolumn-ruleの関係

ポイントは、column-gapは、column-ruleの指定(値)関わらず、カラム間、というとこです。

ほとんどのブラウザで対応

残念ながらIE9では未対応ですが、それ以外のモダンブラウザであれば、プリフィックスをつけることで対応しています(一応IE用にmsのプリフィックスもつけておきます)。
カラムサンプル

columns:3;
-webkit-columns:3;
-moz-columns:3;
-ms-columns:3;
-o-columns:3;

column-gap: 40px;
-webkit-column-gap: 40px;
-moz-column-gap: 80px;
-ms-column-gap: 40px;
-o-column-gap: 40px;

column-rule: 10px solid #ccc;
-webkit-column-rule: 10px solid #ccc;
-moz-column-rule: 10px solid #ccc;
-ms-column-rule: 10px solid #ccc;
-o-column-rule: 10px solid #ccc;

その他のプロパティ

Column breaks
break-before
break-after
break-inside
Spanning columns
column-span
Filling columns
column-fill

この辺も対応してくるとマークアップがもっとシンプルになること間違いなし。

今後の対応にブラウザの対応に期待。