CSS

The CSS column-rule property is used to set the border between columns in a multi-column layout.

column-rule

　column-ruleプロパティは、カラムレイアウトを作成する際に使用されます。このプロパティは、カラム間に表示される縦の境界線を定義します。

　column-ruleプロパティは、以下の３つのサブプロパティから構成されています。

　これらのプロパティを組み合わせることで、カラム間に表示される境界線のスタイル、太さ、色を指定することができます。

　column-rule-widthプロパティは、カラム間の境界線の太さを指定するために使用されます。値は、px、em、rem、%などの単位を伴う数値で指定します。


.column {
	column-rule-width: 1px;
}

　上記の例では、カラム間の境界線の太さを 1px に設定しています。

　column-rule-styleプロパティは、カラム間の境界線のスタイルを指定するために使用されます。以下の値を指定することができます。


.column {
	column-rule-style: solid;
}

　上記の例では、カラム間の境界線のスタイルを実線に設定しています。

　column-rule-colorプロパティは、カラム間の境界線の色を指定するために使用されます。値は、カラーコード、rgb値、色名などで指定することができます。


.column {
	column-rule-color: #ccc;
}

　上記の例では、カラム間の境界線の色を #ccc に設定しています。

　以上のように、column-ruleプロパティを使用することで、カラムレイアウトの境界線をカスタマイズすることができます。以下に、これらのサブプロパティを組み合わせた例を示します。


.column {
	column-count: 3;
	column-gap: 20px;
	column-rule: 2px dashed #333;
}

　上記の例では、カラムの数を 3 に設定し、カラム間のスペースを 20px に設定しています。また、カラム間には 2px の破線の境界線が表示され、色は #333 に設定されています。

　注意点としては、column-ruleプロパティは、column-widthプロパティが設定されている場合にのみ使用することができます。また、column-spanプロパティでカラムをまたいで表示される要素には、column-ruleプロパティは適用されません。