CSS3の作るマルチカラムに区切り線を付ける方法

マルチカラムにした状態で、区切り線を付ける方法もあります。 Ardor(@ArdorOnline)です。 CSS3を調べていると、便利なプロパティがたくさん追加になっていることに気が付きます。 主力ブラウザでサポートされているので、区切り線を付けたい方は試してみてください。

マルチカラムの区切り線

マルチカラムのレイアウトに区切り線をつけるには、column-ruleを利用します。
column-ruleプロパティには、次の種類があります。

プロパティ	値	サンプル
column-rule	スタイル 太さ 色	column-rule: solid 1px #d3d3d3;
-moz-column-rule	スタイル 太さ 色	-moz-column-rule: solid 1px #d3d3d3;
-webkit-column-rule	スタイル 太さ 色	-webkit-column-rule: solid 1px #d3d3d3;
column-rule-style	スタイル	column-rule-style: solid;
-moz-column-rule-style	スタイル	-moz-column-rule-style: solid;
-webkit-column-rule-style	スタイル	-webkit-column-rule-style: solid;
column-rule-width	太さ	column-rule-width: 1px;
-moz-column-rule-width	太さ	-moz-column-rule-width: 1px;
-webkit-column-rule-width	太さ	-webkit-column-rule-width: 1px;
column-rule-color	色	column-rule-color: #d3d3d3;
-moz-column-rule-color	色	-moz-column-rule-color: #d3d3d3;
-webkit-column-rule-color	色	-webkit-column-rule-color: #d3d3d3;

スタイルの記述

スタイルの記述は、次の通りです。 column-ruleを利用するとスタイル、太さ、色を一度に設定出来ます。 また、マルチカラムには、column-countを利用しています。

.sample {
 width : 550px;
 margin : auto;
 column-count: 2;
 -moz-column-count: 2;
 -webkit-column-count: 2;
 column-rule: solid 1px #d3d3d3;
 -moz-column-rule: solid 1px #d3d3d3;
 -webkit-column-rule: solid 1px #d3d3d3;
}

サンプル

上記にあるスタイルを指定したサンプルは次の通りです。

マルチカラムレイアウト

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

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

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

マルチカラムになっている間に区切り線が表示されていると思います。

最後に

CSS3でマルチカラムを利用した時の便利機能をご紹介してきました。
主力ブラウザで、現状使えそうなレイアウトはマルチカラムくらいです。
他のレイアウトもCSS3で追加されているのですが、対応しているブラウザがそれぞれ異なるので普及するか微妙なところです。

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