column-rule-style プロパティ
column-rule-style プロパティは、カラム(列)間に装飾する罫線(rule)の線種を指定する CSS プロパティです。
ここでのカラムとは、新聞記事のような縦割りのレイアウトに表示することができるスタイルです。例えば以下のような表示です。
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 ";
値(Values)
column-rule-width に指定できる値です。
| Value | 摘要 |
|---|---|
| none | 初期値(default値) |
| hidden | 非表示 |
| dotted | 点線 |
| dashed | 破線 |
| solid | 直線 |
| double | 二重線 |
| groove | 凹んだ線 |
| ridge | 凸んだ線 |
| inset | ridgeと似る |
| outset | grooveと似る |
以下のグローバル値も指定できます。
| キーワード値 | 機能 |
|---|---|
| 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に指定しています。
関連プロパティ
以下のような関連するプロパティがあります。
| プロパティ名 | 概要 |
|---|---|
| カラムに分割 | |
| columns | エレメントの分割数と幅の指定 |
| column-count | 分割数 |
| column-width | 分割する内容の幅 |
| 分割の調整 | |
| column-fill | 均等に割るか |
| column-span | 分割されたエレメントにまたがって表示 |
| カラム間のギャップと罫線 | |
| column-gap | 分割した内容の間 |
| column-rule | column-rule-width、column-rule-style、column-rule-colorプロパティの一括指定 |
| column-rule-color | カラム間に装飾する罫線の色 |
| column-rule-style | カラム間に装飾する罫線の種類 |
| column-rule-width | カラム間に装飾する罫線の幅 |
