From fc3d53d77d58c44762ce3c810204f111dcbb6d68 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO CSS の このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。 This is a bunch of text split into three columns.
The `column-rule-style` property is used to change
the style of the line that is drawn between columns.
- Don't you think that's wonderful?</p>column-rule-style プロパティは、段組みレイアウトで段の間に引かれる線 (段間罫) のスタイルを設定します。構文
-
-/* <'border-style'> の値 */
+```css
+/* <'border-style'> の値 */
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
@@ -34,63 +34,62 @@ column-rule-style: outset;
/* グローバル値 */
column-rule-style: inherit;
column-rule-style: initial;
+column-rule-style: revert;
column-rule-style: unset;
-
+```
+
+`column-rule-style` プロパティは、単一の `<'border-style'>` 値で指定します。
-column-rule-style プロパティは、単一の <'border-style'> 値で指定します。値
+- `<'border-style'>`
+ - : {{ cssxref("border-style") }} で定義されているキーワードで、段間罫のスタイルを指定します。スタイルは collasped の境界線モデルで解釈されます。
-
-
+## 公式定義
-<'border-style'>形式文法
+{{cssinfo}}
+
+## 形式文法
{{csssyntax}}
-例
+## 例
+
+### 破線の段間罫を設定
-HTML
+#### HTML
-<p>This is a bunch of text split into three columns.
+```html
+
+ Don't you think that's wonderful?
p {
+```css
+p {
column-count: 3;
column-rule-style: dashed;
-}
+}
+```
+
+#### 結果
-{{ EmbedLiveSample('Example') }}
+## 仕様書 -| 仕様書 | -状態 | -備考 | -
|---|---|---|
| {{ SpecName('CSS3 Multicol', '#crs', 'column-rule-style') }} | -{{ Spec2('CSS3 Multicol') }} | -初回定義 | -
{{cssinfo}}
+{{Compat}} -{{Compat("css.properties.column-rule-style")}}
+- [段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- {{CSSXref("column-rule")}} +- {{CSSXref("column-rule-width")}} +- {{CSSXref("column-rule-color")}} -- cgit v1.2.3-54-g00ecf