CSScolumn-rule-width プロパティは、段組みレイアウトで段間に惹かれる線(段間罫)の太さを設定します。

構文

/* キーワード値 */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* <length> 値 */
column-rule-width: 1px;
column-rule-width: 2.5em;

/* グローバル値 */
column-rule-width: inherit;
column-rule-width: initial;
column-rule-width: unset;

column-rule-width プロパティは単一の <'border-width'> の値で指定します。

<'border-width'>
border-width で定められたキーワードで段間罫の太さを指定します。 <length> または thinmediumthick のキーワードのいずれかです。

構文形式

<'border-width'>

HTML

<p>This is a bunch of text split into three columns.
   The `column-rule-width` property is used to change
   the width of the line that is drawn between columns.
   Don't you think that's wonderful?</p>

CSS

p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: thick;
}

結果

仕様策定状況

仕様書 策定状況 コメント
CSS Multi-column Layout Module
column-rule-width の定義
草案 初回定義。

初期値medium
適用対象段組み要素
継承なし
メディア視覚
計算値絶対的な長さ、列の罫線のスタイルが nonehidden なら 0
アニメーションの種類length
正規順序構文通り

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

50

あり -webkit-

12 -webkit-

50

3.5 -moz-

10

11.1

15 -webkit-

3 -webkit-
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり

50

あり -webkit-

あり -webkit-

50

あり -moz-

? ?

5.0

あり -webkit-

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, fscholz, Sebastianz, ethertank, sosleepy, Marsf
最終更新者: mfuji09,