レイアウト
column-rule
column-rule は、段組みの段と段の間に引く線を指定します。column-rule-width・column-rule-style・column-rule-color をまとめて書くショートハンドです。
構文
<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
column-rule2pxcolumn-rule-width
solidcolumn-rule-style
#88d1c7column-rule-color
コード
.box {
column-count: 2;
column-gap: 2em;
column-rule: 2px solid #88d1c7;
}コントロール
column-rule-width2px
column-rule-stylesolid
column-rule-color#88d1c7
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
border と同じく、太さ・線種・色を順不同で書きます（column-rule: 2px dashed #4a86cb）。省いたものは初期値に戻ります。線種の初期値は none なので、線種を書かないと線は出ません。太さの初期値は medium（3px）、色の初期値は currentcolor（文字の色）です。
線種は border-style と同じものが使えますが、表のセルの境界線をまとめるとき（border-collapse: collapse）と同じ扱いになり、inset は ridge と、outset は groove と同じに描かれます。
線の位置と太さ
- 線は段の間（
column-gap）の真ん中に、箱の中身（padding の内側）の上の端から下の端まで引かれます。 - 線は場所を取りません。太くしても段の幅や位置は変わらず、段の間より太い線は段の文章と重なります（文章が線の上に描かれます）。
- 線は、中身のある段どうしの間にだけ引かれます。
このページのプレビューは、補助の宣言で見本の文章の箱を column-count: 2 の 2 段にし、線が見えるように column-gap: 2em で段の間を広げています。