CSS

The CSS column-rule-width property is used to specify the thickness of the vertical lines between columns in a multi-column layout.

column-rule-width

　column-rule-widthプロパティは、多列レイアウトにおいて、列間に表示される縦線の太さを設定するために使用されます。

　このプロパティは、単位を指定して値を設定します。単位としては、px、em、rem、%などがあります。指定可能な値の範囲は、0以上の任意の数値です。

　column-rule-widthプロパティを使用すると、例えば、以下のような CSSコードで、多列レイアウトで縦線の太さを 1pxに設定することができます。

CSS

.column {
	column-count: 3;
	column-rule: 1px solid black;
	column-rule-width: 1px;
}

　このコードは、.columnというクラスを持つ要素に、3つの列を設定し、縦線を 1ピクセルの黒色の線で表示することを指定しています。

　また、column-rule-widthプロパティは、他の column-ruleプロパティと組み合わせて使用することもできます。たとえば、以下のように、縦線のスタイルや色を設定することもできます。

CSS

.column {
	column-count: 3;
	column-rule: 1px dashed red;
	column-rule-width: 3px;
}

　このコードは、同じく.columnクラスの要素に、3つの列を設定し、縦線を3ピクセルの赤色の破線で表示することを指定しています。

　このプロパティを利用することで、多列レイアウトで縦線の太さを自由に設定することができます。