column-rule-width
は CSS のプロパティで、段組みレイアウトで段間に引かれる線の太さを設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* キーワード値 */ 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>
またはthin
、medium
、thick
のキーワードのいずれかです。
形式文法
<'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 |
---|---|
適用対象 | 段組み要素 |
継承 | なし |
メディア | 視覚 |
計算値 | 絶対的な長さ、列の罫線のスタイルが none か hidden なら 0 |
アニメーションの種類 | length |
正規順序 | 構文通り |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
column-rule-width | Chrome
完全対応
50
| Edge
完全対応
12
| Firefox
完全対応
52
| IE 完全対応 10 | Opera
完全対応
11.1
| Safari
完全対応
9
| WebView Android
完全対応
50
| Chrome Android
完全対応
50
| Firefox Android
完全対応
52
| Opera Android
完全対応
11.1
| Safari iOS
完全対応
9
| Samsung Internet Android
完全対応
5.0
|
凡例
- 完全対応
- 完全対応
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。