CSS column-rule-width| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
column-rule-width CSS プロパティとは
トピック：マルチコラムレイアウトの列の間に引かれたルールの幅を設定することができる
プロパティ column-rule-width
- 基本 書式：セレクタ {
column-rule-width:値;}実例 コード 1
サンプル コードを試すp {/* Chrome, Safari, Opera */column-count: 3;column-gap: 100px;column-rule-color: red;column-rule-width: 2px;column-rule-style: solid;/* Firefox */column-count: 3;column-gap: 100px;column-rule-color: red;column-rule-width: 2px;column-rule-style: solid;/* Standard syntax */column-count: 3;column-gap: 100px;column-rule-color: red;column-rule-width: 2px;column-rule-style: solid;}
プロパティ 定義と使用法
| デフォルト値・初期値 : | medium |
|---|---|
| 適用対象 : | 多段要素 |
| 継承 : | 不可 |
| メディア : | visual |
| 計算値 : | 絶対的な長さ。列の罫線のスタイルが none か hidden なら 0 |
CSS Version | CSS3 |
| アニメーションの種類 : | length |
| JavaScript 構文 | object.style.columnRuleWidth="funWebref" |
| 正規順序 : | per grammar |
| CSSの構文 | column-rule-width: medium | thin | thick | length | initial | inherit; |
- CSS 実例 サンプル：
style ="columns: 3; column-rule: solid; column-rule-width: 12px; column-rule-color: coral;"CSSのcolumn-rule-widthプロパティを使用すると、複数列のレイアウト上の列間の列ルールの幅を設定できます列ルールは、複数列レイアウトの列間に表示される一種の境界線として表示される column-rule shorthandプロパティを使用すると、同じ結果を得ることができます。
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 | |||||
|---|---|---|---|---|---|---|
| column-rule-width | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| 基本 サポート | フルサポート◯50 | フルサポート◯12 | フルサポート◯50 | フルサポート◯10 | フルサポート◯11.1 | フルサポート◯3 |
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 | ||||||
|---|---|---|---|---|---|---|---|
| column-rule-width | Android | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet |
| 基本 サポート | フルサポート◯あり | フルサポート◯50 | フルサポート◯あり | フルサポート◯50 | 不明 | 不明 | フルサポート◯5.0 |
