マルチカラムをCSS3で実装
wrote2012.09.14
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の指定(値)関わらず、カラム間、というとこです。
ほとんどのブラウザで対応
残念ながら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
この辺も対応してくるとマークアップがもっとシンプルになること間違いなし。
今後の対応にブラウザの対応に期待。
about me恐縮です
- 川上 武範(かわかみ たけのり)
- 1975年生。マークアップデザインエンジニア。
正しいマークアップ、デザインと文章の完全分離を意識したWebサイト制作が得意。ユーザー視点の情報設計を意識した制作、Web標準に準拠を前提にしたビジュアルデザイン制作の実現を目指して日々精進しています。
twitter : OnlyTwo