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

column-rule-style プロパティ

 column-rule-style プロパティは、カラム(列)間に装飾する罫線(rule)の線種を指定する CSS プロパティです。

 ここでのカラムとは、新聞記事のような縦割りのレイアウトに表示することができるスタイルです。例えば以下のような表示です。

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

カラムについての説明です。<table> の説明でもカラムという表現が出てくるので混合してしまいます。

詳しくは Example を参照してください

 カラムの線は線種(column-rule-style)、太さ(column-rule-width)、色(column-rule-color)があります。それらは column-rule によって一括で指定することができます。

 column-rule-colorを省略するとテキストの色で表示されます。

ページ内 Index

構文(Syntax)

 column-rule-width の構文についてです。

CSS

column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ;

DOM ( JavaScript )

値の取得
String = object.style.columnRuleStyle;
値の設定
object.style.columnRuleStyle=" none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ";

 グローバル値として initialinheritrevertunset も使用することができます。

値(Values)

 column-rule-width に指定できる値です。

Value摘要
none初期値(default値)
hidden非表示
dotted点線
dashed破線
solid直線
double二重線
groove凹んだ線
ridge凸んだ線
insetridgeと似る
outsetgrooveと似る

 以下のグローバル値も指定できます。

キーワード値機能
initial仕様で決められた設定値
inherit親エレメントの設定値を継承
revertブラウザで設定された値
unset継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は revert に同じ

 指定値を固定化する場合は !important 宣言を加えます。

備考(Remarks)

 column-rule-width の備考です。

初期値(Default value)none
継承(Inherited)No
変化(Animatable)No

Example

 column-rule-width の例です。 column-rule-style プロパティは、カラム(列)間の罫線(rule)の線種を指定できます。

 以下の例では、エレメントの内容全体を分割し、column-rule-styleで点線に指定。column-rule-widthで10pxに指定しています。