備忘録的プログラミングリファレンス

column-rule-colorプロパティ

 column-rule-colorプロパティは、エレメントの内容を分割して表示するプロパティで、列(カラム)間の罫線(rule)の色を指定するプロパティです。色はCSS Colorで指定します。

 column-rule-styleプロパティで線種の設定が必要です。

エレメントを幅250pxずつに分割して、緑色の点線を表示
columns:250px auto;
column-rule-style: dotted;
column-rule-color: green;

関連プロパティ

 以下のような関連するプロパティがあります。

column-count分割数
column-fill均等に割るか
column-gap分割した内容の間
column-rulecolumn-rule-width、column-rule-style、column-rule-colorプロパティの一括指定
column-rule-styleカラム間に装飾する罫線の種類
column-rule-widthカラム間に装飾する罫線の幅
column-span分割されたエレメントにまたがって表示
column-width分割する内容の幅
columnsエレメントの分割数と幅の指定

構文(Syntax)

CSS

column-rule-color: color | initial | inherit ;

DOM(JavaScript)

値の取得
String = object.style.columnRuleColor;
値の設定
object.style.columnRuleColor=" color | initial | inherit ";

値(Values)

Value摘要
colorCSS Color
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)設定しないことで初期値
継承(Inherited)No
変化(Animatable)Yes

Example

 column-rule-colorの例です。エレメントの内容全体を分割し、column-rule-styleで点線に指定。column-rule-colorで緑色に指定しています。