概要
CSSプロパティ｢column-rule｣は、columns プロパティなどで指定された要素のカラム間の区切り線の幅（column-rule-width）、種類（column-rule-style）、色（column-rule-color）をまとめて指定することができるショートハンドプロパティです。
<p class="columns column-rule">明日の天気予報です。明日は全国的に晴れるでしょう。ですが、夕方以降急な雨に注意してください。次に海外の天気予報です。・・・・・・・・・・・・・・・</p>
<style>
p {
font-size: 12px;
border: 1px solid #000;
background-color: #def;
}
.columns {
column-width: 100px;
column-count: 2;
column-rule: 1px solid #000;
}
.column-rule {
column-rule: 5px solid #000;
}
</style>値の指定方法
{column-rule: <幅> <スタイル> <色>}値について
指定できる値の種類です。
| 値 | 説明 |
|---|---|
| value | 単位はpx, emなどが可能です。マイナス値は入れられません |
| keyword | thin, medium, thickが入ります |
スタイルについて
指定できるスタイルは以下の通りです。それぞれの表示は border-style で詳しく解説しています。
| 値 | 説明 |
|---|---|
| none | ボーダーは表示されません |
| solid | 一本線のボーダーが表示されます |
| dotted | １列にならんだドット模様のボーダーが表示されます |
| dashed | 破線のボーダーが表示されます |
| double | 二本線のボーダーが表示されます |
| groove | 立体的で窪んだ線が表示されます |
| ridge | 立体的で隆起した線が表示されます |
| inset | grooveと似てますが立体的で窪んだ線が表示されます |
| outset | ridgeと似てますが、立体的で隆起した線が表示されます |
色について
指定できる色の種類です。詳しくは color プロパティを参照してみてください。
| 値 | 説明 |
|---|---|
| color | 色を指定します. #000000やrgb(0,0,0)でも指定できます |
いくつか異なるスタイルを指定して、表示を確認してみます
<p class="columns column-rule-medium">明日の天気予報です。明日は全国的に晴れるでしょう。ですが、夕方以降急な雨に注意してください。続いて、今月のイベント情報です。今月は東京の目黒川がライトアップされます。</p>
<p class="columns column-rule-thin">明日の天気予報です。明日は全国的に晴れるでしょう。ですが、夕方以降急な雨に注意してください。続いて、今月のイベント情報です。今月は東京の目黒川がライトアップされます。</p>
<p class="columns column-rule-dotted">明日の天気予報です。明日は全国的に晴れるでしょう。ですが、夕方以降急な雨に注意してください。続いて、今月のイベント情報です。今月は東京の目黒川がライトアップされます。</p>
<p class="columns column-rule-red">明日の天気予報です。明日は全国的に晴れるでしょう。ですが、夕方以降急な雨に注意してください。続いて、今月のイベント情報です。今月は東京の目黒川がライトアップされます。</p>
<style>
p {
font-size: 12px;
border: 1px solid #000;
background-color: #def;
}
.columns {
column-width: 100px;
column-count: 2;
}
.column-rule-medium {
column-rule: medium solid #000;
}
.column-rule-thin {
column-rule: thin solid #000;
}
.column-rule-dotted {
column-rule: 5px dotted #000;
}
.column-rule-red {
column-rule: 5px solid red;
}
</style>プロパティの種類について
ショートハンドプロパティや、個別指定できるプロパティなど、columnプロパティをまとめた概要一覧です。詳細はそれぞれのページを参照してみてください。
| プロパティ名 | 説明 |
|---|---|
| columns | 「column-count」と「column-width」を指定できるショートハンドプロパティ |
| column-count | カラム数を指定する |
| column-width | カラムの幅と指定する |
| column-rule | 「column-rule-color」と「column-rule-style」と「column-rule-width」をまとめて指定するショートハンドプロパティ |
| column-rule-color | カラム間の区切り線の色を指定する |
| column-rule-style | カラム間の区切り線のスタイルを指定する |
| column-rule-width | カラム間の区切り線の幅を指定する |
| column-gap | カラム同士の間隔を指定する |
| column-fill | カラム同士の高さをそろえるかどうかを指定する |
| column-span | 複数のカラムにまたがる要素に指定する |
使用例
このプロパティを使うことで、マルチカラムレイアウトを実装することができます。今までは、一つ一つ組み上げていたものが簡単にできるようになります。
<div class="header">ヘッダー</div>
<div class="multicolumnbox column-rule">
<div>左カラムです。左カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
<div>真ん中のカラムです。真ん中カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
<div>右カラムです。右カラムに入れたいテキストなどはこの要素内に入れていきます。</div>
</div>
<div class="footer">フッター</div>
<style>
.header,
.footer {
margin: 0px 10px;
border: 1px solid #000;
}
.multicolumnbox div {
border: 1px solid #000;
background-color: #def;
}
.multicolumnbox {
padding: 10px;
columns: 3 100px;
column-fill: auto;
}
.column-rule {
column-rule: 1px solid #000;
}
</style>