From d1c7d94d2464f8b52a14a7f2a90ab41a2fc1cce0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 16 Aug 2021 13:01:50 +0900 Subject: Web/CSS/column-rule を更新 (#1978) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/07/04 時点の英語版に同期 --- files/ja/web/css/column-rule/index.html | 76 ++++++++++++++------------------- 1 file changed, 33 insertions(+), 43 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/column-rule/index.html b/files/ja/web/css/column-rule/index.html index cc1879d559..768c36a8d8 100644 --- a/files/ja/web/css/column-rule/index.html +++ b/files/ja/web/css/column-rule/index.html @@ -3,16 +3,11 @@ title: column-rule slug: Web/CSS/column-rule tags: - CSS + - CSS Multi-column Layout - CSS Property - - CSS プロパティ - - CSS 段組みレイアウト - - column-rule - - column-rule-color - - column-rule-style - - column-rule-width - - リファレンス - - 一括指定プロパティ - - 段組み + - Reference + - 'recipe:css-property' +browser-compat: css.properties.column-rule translation_of: Web/CSS/column-rule ---
{{CSSRef}}
@@ -21,15 +16,13 @@ translation_of: Web/CSS/column-rule
{{EmbedInteractiveExample("pages/css/column-rule.html")}}
- -

これは一括指定プロパティであり、一回の便利な宣言で個別の column-rule-* プロパティ ({{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, {{Cssxref("column-rule-color")}}) を設定できます。

メモ: 他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます (以前に個別指定プロパティを使用して設定された値を上書きする可能性があります)。

-

構文

+

構文

column-rule: dotted;
 column-rule: solid 8px;
@@ -39,43 +32,48 @@ column-rule: thick inset blue;
 /* グローバル値 */
 column-rule: inherit;
 column-rule: initial;
+column-rule: revert;
 column-rule: unset;
-

column-rule プロパティは、以下に挙げる値のうち1から3つを任意の順序で指定します。

+

column-rule プロパティは、以下に挙げる値のうち 1 ～ 3 個を任意の順序で指定します。

-

値

+

値

<'column-rule-width'>
-
{{cssxref("<length>")}} または3つのキーワード、 thin, medium, thick のうちの1つです。詳しくは {{cssxref("border-width")}} を参照してください。
+
{{cssxref("<length>")}} または 3 つのキーワード、 thin、medium、thick のうちの 1 つです。詳しくは {{cssxref("border-width")}} を参照してください。
<'column-rule-style'>
有効な値と詳細は {{cssxref("border-style")}} を参照してください。
<'column-rule-color'>
{{cssxref("<color>")}} 値です。
-

形式文法

+

公式定義

+ +

{{cssinfo}}

+ +

形式文法

{{csssyntax}} -

例

+

例

-

例1

+

例 1

-
/* "medium dotted currentColor" と同じ */
+
/* "medium dotted currentcolor" と同じ */
 p.foo { column-rule: dotted; }
 
 /* "medium solid blue" と同じ */
 p.bar { column-rule: solid blue; }
 
-/* "8px solid currentColor" と同じ */
+/* "8px solid currentcolor" と同じ */
 p.baz { column-rule: solid 8px; }
 
 p.abc { column-rule: thick inset blue; }
 

 
-
例2

+
例 2

 
 
HTML

 
@@ -97,31 +95,23 @@ p.abc { column-rule: thick inset blue; }
 }
-

結果

+

結果

{{EmbedLiveSample('Example_2')}}

-

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}{{Spec2('CSS3 Multicol')}}初回定義
+

仕様書

-

{{cssinfo}}

+{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

-

ブラウザーの対応

+

関連情報

-

{{Compat("css.properties.column-rule")}}

+ -- cgit v1.2.3-54-g00ecf