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

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)

CSS

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

DOM ( JavaScript )

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

値(Values)

Value摘要
none初期値(default値)
hidden非表示
dotted点線
dashed破線
solid直線
double二重線
groove凹んだ線
ridge凸んだ線
insetridgeと似る
outsetgrooveと似る
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

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

Example

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