column-rule-style CSS プロパティとは
トピック：マルチカラムレイアウトで列の間に描かれたルールのスタイルを設定する事ができる コラムルールは、複数列のレイアウトの列の間に表示される境界線の種類として表示する
プロパティ column-rule-style
基本 書式：セレクタ {column-rule-style:値;}
使用上の注意：column-rule-styleプロパティは、column-rule-colorおよびcolumn-rule-widthプロパティと組み合わせて使用することが必要 です。そうしないと効果が発生しません(「幅」又は 、「色」の値がないため)。
実例 コード 1
サンプル コードを試すプロパティ 定義と使用法
| デフォルト値・初期値 : | none |
|---|
| 適用対象 : | 多段要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
|---|
| JavaScript 構文 | object.style.columnRuleStyle="funWebref" |
|---|
| 正規順序 : | per grammar |
|---|
| CSSの構文 | column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
none | デフォルト値。規則を定義しない |
hidden | 規則を表示しない noneと同じ 。 |
dotted | 点線のルールを表示する |
dashed | 破線のルールを表示する |
solid | ルールを単一の実線で表示する |
double | ルールを2つの平行な実線で表示し、その間にスペースを入れて表示する |
groove | 3Dグルーブルールを指定する 効果は幅と色の値に依存します |
ridge | 3Dリッジルールを指定する 効果は幅と色の値に依存します |
inset | 3D挿入ルールを指定する 効果は幅と色の値に依存します |
outset | 3Dアウトセットルールを指定する 効果は幅と色の値に依存します |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
unset | この値は、プロパティが継承されるかどうかに応じて、inheritまたはのいずれかinitialとして機能します。つまり、すべてのプロパティを継承可能な場合は親の値に設定し、継承できない場合は初期値に設定する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| column-rule-style | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯50 | フルサポート◯12 | フルサポート◯52 | フルサポート◯10 | フルサポート◯11.1 | フルサポート◯3 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| column-rule-style | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯あり | フルサポート◯50 | フルサポート◯あり | フルサポート◯52 | 不明 | 不明 | フルサポート◯5.0 |
|---|
CSS column-rule-style | CSS プロパティ 値| 意味 使い方 実例 – WebRef