From fc3d53d77d58c44762ce3c810204f111dcbb6d68 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 29 Dec 2021 23:33:35 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/column-rule-style/index.md | 93 ++++++++++++++--------------- 1 file changed, 46 insertions(+), 47 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/column-rule-style/index.md b/files/ja/web/css/column-rule-style/index.md index a27908eead..f57ff13790 100644 --- a/files/ja/web/css/column-rule-style/index.md +++ b/files/ja/web/css/column-rule-style/index.md @@ -3,23 +3,23 @@ title: column-rule-style slug: Web/CSS/column-rule-style tags: - CSS - - CSS プロパティ - CSS 段組みレイアウト - - Reference - - 段組み + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.column-rule-style translation_of: Web/CSS/column-rule-style --- -
{{CSSRef}}
+{{ CSSRef}} -

CSScolumn-rule-style プロパティは、段組みレイアウトで段の間に引かれる線 (段間罫) のスタイルを設定します。

+**`column-rule-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、段組みレイアウトで段の間に引かれる線 (段間罫) のスタイルを設定します。 -
{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}
+{{EmbedInteractiveExample("pages/css/column-rule-style.html")}} - +## 構文 -

構文

- -
/* <'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'>
-
{{ cssxref("border-style") }} で定義されているキーワードで、段間罫のスタイルを指定します。スタイルは collasped の境界線モデルで解釈されます。
-
+## 公式定義 -

形式文法

+{{cssinfo}} + +## 形式文法 {{csssyntax}} -

+## 例 + +### 破線の段間罫を設定 -

HTML

+#### HTML -
<p>This is a bunch of text split into three columns.
+```html
+

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>

+ Don't you think that's wonderful?

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   column-count: 3;
   column-rule-style: dashed;
-}
+} +``` + +#### 結果 -

結果

+{{ EmbedLiveSample('Setting_a_dashed_column_rule') }} -

{{ EmbedLiveSample('Example') }}

+## 仕様書 -

仕様書

+{{Specifications}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{ 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