column-rule
column-rule プロパティは要素の段や列の間隔を指定します。
プロパティの詳細
- 値
- column-rule-width, column-rule-style, column-rule-color の各値
- 初期値
-
- column-rule-width：medium
- column-rule-style：none
- column-rule-color：currentcolor
- 対象
- 段組み要素
- 継承
- しない
- CSS レベル
- CSS 3
値の詳細
| 値 | 詳細 |
|---|---|
| column-rule-width | 段組みでは 1em の指定、列にはブラウザ既定の数値、他のレイアウトでは 0 |
| column-rule-style | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
| column-rule-color | 色名指定、RGB値指定（rgb や rgba） |
HTML
<div class="box1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>CSS
.box1 {
column-count: 3;
column-gap: 30px;
column-rule: 3px solid blue;
}
.box1 > div {
background-color: #cccccc;
}