CSS3 column-rule-styleプロパティ
例
列間のスタイルルールを指定します：
div
{
column-rule-style:dotted;
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari and Chrome */
}
{
column-rule-style:dotted;
-moz-column-rule-style:dotted; /* Firefox */
-webkit-column-rule-style:dotted; /* Safari and Chrome */
}
試してみる »
このページの下部にさらに多くの例があります。
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。
-webkit-、-ms-、または -moz- の前にある数字は、そのプレフィックス付きプロパティをサポートする最初のブラウザバージョンを示します。
| プロパティ | |||||
|---|---|---|---|---|---|
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
プロパティの定義と使用説明
column-rule-style プロパティは、列間のスタイルルールを指定します。
| デフォルト値: | none |
|---|---|
| 継承: | no |
| バージョン: | CSS3 |
| JavaScript 構文: | object.style.columnRuleStyle="dotted" |
構文
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
| 值 | 説明 |
|---|---|
| none | ルールなしを定義します。 |
| hidden | 非表示のルールを定義します。 |
| dotted | 点線のルールを定義します。 |
| dashed | 破線のルールを定義します。 |
| solid | 実線のルールを定義します。 |
| double | 二重線のルールを定義します。 |
| groove | 3D グルーブ（溝付き）ルールを定義します。この効果は幅と色の値に依存します。 |
| ridge | 3D リッジ（畝状）ルールを定義します。この効果は幅と色の値に依存します。 |
| inset | 3D インセット（窪み）ルールを定義します。この効果は幅と色の値に依存します。 |
| outset | 3D アウトセット（出っ張り）ルールを定義します。この効果は幅と色の値に依存します。 |
その他の例
div 要素のテキストを3列に分割します。
div 要素のテキストを3列に分割し、列間に30ピクセルの間隔を指定します。
列間のルールを指定します：幅、スタイル、色。
関連記事
CSS3 チュートリアル:CSS3 Multiple Columns
その他の拡張