column-rule CSS プロパティとは
トピック：複数の列ルールに関連するプロパティーを1か所に設定するための短縮タイプのプロパティー。具体的には、column-rule-width,column-rule-style,およびcolumn-rule-colorプロパティを設定する列ルールは、複数列レイアウトの列間に表示される一種の境界線として表示する 列間のルールの幅、スタイル、および色を設定する
プロパティ column-rule
基本 書式：セレクタ {column-rule:値;}
実例 コード 1
サンプル コードを試す.multicol { background: beige ; padding: 10px; -webkit-column-count: 3 ; -webkit-column-rule: 2px dotted coral; -moz-column-count: 3 ; -moz-column-rule: 2px dotted coral; column-count: 3 ; column-rule: 2px dotted coral; }
プロパティ 定義と使用法
| デフォルト値・初期値 : | 以下の一括指定の各プロパティとして
|
|---|
| 適用対象 : | 多段要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 以下の一括指定の各プロパティとして
|
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | 以下の一括指定の各プロパティとして
|
|---|
| JavaScript 構文 | object.style.columnRule="funWebref" |
|---|
| 正規順序 : | per grammar |
|---|
| CSSの構文 | column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
column-rule-width | 列の間のルールの幅を設定する デフォルト値はmediumです。負の値は許可されない |
column-rule-style | 列の間に規則のスタイルを設定する デフォルト値はnoneです。 |
column-rule-color | 列の間に規則の色を設定する デフォルト値はcolor要素の値です。 |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
unset | この値は、プロパティが継承されるかどうかに応じて、inheritまたはのいずれかinitialとして機能します。つまり、すべてのプロパティを継承可能な場合は親の値に設定し、継承できない場合は初期値に設定する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| column-rule | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯50 | フルサポート◯12 | フルサポート◯52 | フルサポート◯10 | フルサポート◯11.1 | フルサポート◯3 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| column-rule | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯あり | フルサポート◯50 | 不明 | フルサポート◯52 | 不明 | 不明 | フルサポート◯5.0 |
|---|
CSS column-rule | CSS プロパティ 値| 意味 使い方 実例 – WebRef