column-rule
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年3月.
column-rule は一括指定を行う CSS のプロパティで、段組みレイアウトで段間に引かれる線（段間罫）の太さ、スタイル、色を設定します。
試してみましょう
column-rule: dotted; column-rule: solid 6px; column-rule: solid blue; column-rule: thick inset blue; <section id="default-example"> <p id="example-element"> ロンドン。ミカエル学期の終わり、リンカーンズ・イン・ホールに大法官が座っています。容赦のない 11 月の天候。街は、まるで地球から水が引き始めたばかりのように泥だらけで、ホルボーン・ヒルを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。 </p> </section> #example-element { columns: 3; column-rule: solid; text-align: left; } 構成要素のプロパティ
このプロパティは、以下の CSS プロパティの一括指定です。
構文
css
column-rule: dotted; column-rule: solid 8px; column-rule: solid blue; column-rule: thick inset blue; /* グローバル値 */ column-rule: inherit; column-rule: initial; column-rule: revert; column-rule: revert-layer; column-rule: unset; 値
column-rule プロパティは、以下に挙げる値のうち 1 ～ 3 個を任意の順序で指定します。
<'column-rule-width'>-
<length>または 3 つのキーワード、thin、medium、thickのうちの 1 つです。詳しくはborder-widthを参照してください。 <'column-rule-style'>-
有効な値と詳細は
border-styleを参照してください。 <'column-rule-color'>-
<color>値です。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | 段組み要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして |
形式文法
column-rule =
<gap-rule-list> |
<gap-auto-rule-list>
<gap-rule-list> =
<gap-rule-or-repeat>#
<gap-auto-rule-list> =
<gap-rule-or-repeat>#? , <gap-auto-repeat-rule> , <gap-rule-or-repeat>#?
<gap-rule-or-repeat> =
<gap-rule> |
<gap-repeat-rule>
<gap-auto-repeat-rule> =
repeat( auto , <gap-rule># )
<gap-rule> =
<line-width> ||
<line-style> ||
<color>
<gap-repeat-rule> =
repeat( <integer [1,∞]> , <gap-rule># )
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
例
例 1
css
/* "medium dotted currentcolor" と同じ */ p.foo { column-rule: dotted; } /* "medium solid blue" と同じ */ p.bar { column-rule: solid blue; } /* "8px solid currentcolor" と同じ */ p.baz { column-rule: solid 8px; } p.abc { column-rule: thick inset blue; } 例 2
HTML
html
<p class="content-box"> これは 3 つ段に分割されたテキストの束です。 <code>column-rule</code> プロパティは、段と段の間に引かれる線のスタイル、太さ、色を変更するために使用されます。すばらしいと思いませんか？ </p> CSS
css
.content-box { padding: 0.3em; background: #ff7; column-count: 3; column-rule: inset 2px #33f; } 結果
仕様書
| Specification |
|---|
| CSS Multi-column Layout Module Level 1 # column-rule |