column-rule-width プロパティ
column-rule-width プロパティは、カラム（列）間の罫線（rule）の太さを指定する CSS プロパティです。
ここでいうカラムとはエレメントの内容を新聞のように分割して表示する CSS の columns プロパティによる機能です。 column-rule-width プロパティによって分割された領域の境目を示す線の太さを指定することができます。
columns:150px auto;
column-rule-style: dotted;
column-rule-width: 10px;
カラムについての説明です。<table> の説明でもカラムという表現が出てくるので混合してしまいます。
詳しくは Example を参照してください
エレメントを分割する罫線は、column-rule-style プロパティで線の種類の指定をしなければ表示されません。
エレメントの領域を分割する罫線の色は、column-rule-color を使用します。 一括して罫線を指定するには column-rule を使用します。
column-rule-colorを省略するとテキストの色で表示されます。
ページ内 Index
構文(Syntax)
CSS
column-rule-width: medium | thin | thick | length | initial | inherit ;
DOM ( JavaScript )
String = object.style.columnRuleWidth;
object.style.columnRuleWidth=" medium | thin | thick | length | initial | inherit ";
値（Values）
| Value | 摘要 |
|---|---|
| medium | 初期値（default値） |
| thin | mediumに対して細め |
| thick | mediumに対して太め |
| length | 数値で設定 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | medium |
| 継承（Inherited） | No |
| 変化（Animatable） | Yes |
Example
column-rule-widthの例です。
column-rule-width プロパティによってカラム（列）間の境を示す罫線（rule）の太さを指定します。
ここでいうカラムとはエレメントの内容を新聞のように分割して表示する CSS の columns プロパティです。 column-rule-width プロパティは分割された境目を示す線の太さを指定します。
以下の例は、エレメントの内容全体を分割し、column-rule-styleで点線に指定しています。
関連プロパティ
以下のような関連するプロパティがあります。
| プロパティ名 | 概要 |
|---|---|
| カラムに分割 | |
| 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 | カラム間に装飾する罫線の幅 |