マルチカラムにした状態で、区切り線を付ける方法もあります。 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で追加されているのですが、対応しているブラウザがそれぞれ異なるので普及するか微妙なところです。
最後までお読み頂きありがとうございます。
0 件のコメント:
コメントを投稿