column-rule-widthプロパティの説明
CSSのcolumn-rule-widthプロパティは、段組み要素の段と段の間に引かれる罫線の太さを指定します。基本的な仕様はborder-widthと同じです。初期値ではmediumが適用されており、ブラウザ依存の幅になります。
段組みレイアウトの罫線が引かれる場所は、段と段の分割された隙間です。これを表示する場合、column-rule-styleの値がnone以外であり、column-rule-widthの値が1px以上である必用があります。
段組みレイアウトの罫線は以下のプロパティを組み合わせて作成します。これらを一括で指定するには、ショートハンド・プロパティのcolumn-ruleを使用して下さい。
column-rule-color：段組み罫線の色を指定するcolumn-rule-style：段組み罫線の形状を指定するcolumn-rule-width：段組み罫線の太さを指定する
column-rule-widthに指定できる値
<line-width>- 罫線の太さを指定するキーワードあるいはデータ型の値です。初期値は
mediumが適用されています。記述の仕方はborder-widthと同じです。使用できる値には以下のものがあります。 thin- 段組みの罫線を細い線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
medium- 段組みの罫線を中太の線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
thic- 段組みの罫線を太い線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
<length>- CSSで使用できる単位つきの数値で指定します。ピクセル値、フォントサイズ、ビューポートに対する割合などから選べます。
column-rule-widthの使い方とサンプルコード
column-rule-widthプロパティの構文は以下の通りです。
/* キーワード値 */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;
/* <length>値 */
column-rule-width: 1px;
column-rule-width: 0.5em;
column-rule-width: 3pt;
column-rule-width: 6vmax;
/* グローバル値 */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: revert;
column-rule-width: unset;
column-rule-widthの実例
それでは実際にcolumn-rule-widthプロパティの書き方を見ていきましょう。この機能を使用する場合は、前提としてcolumn-rule-styleの値をnone以外にして下さい。
<section class="samp_box">
<h2>column-rule-width: thin;</h2>
<p id="crs_1">
あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
</p>
<h2>column-rule-width: medium;</h2>
<p id="crs_2">
あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
</p>
<h2>column-rule-width: thick;</h2>
<p id="crs_3">
あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。
</p>
</section>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box > p {
margin-top: 1rem;
padding: .3rem;
background: #fff;
column-count: 3;
column-rule-color: #666;
column-rule-style: solid;
}
#crs_1 {
column-rule-width: thin;
}
#crs_2 {
column-rule-width: medium;
}
#crs_3 {
column-rule-width: thick;
}