From 3a89b5008c1d8f07e57a6d7595b3967c63b51f8e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 29 Dec 2021 22:27:29 +0900 Subject: CSS Columns 関係のプロパティを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/column-count/index.html | 98 --------------------- files/ja/web/css/column-count/index.md | 98 +++++++++++++++++++++ files/ja/web/css/column-fill/index.html | 108 ------------------------ files/ja/web/css/column-fill/index.md | 108 ++++++++++++++++++++++++ files/ja/web/css/column-rule-color/index.html | 101 ---------------------- files/ja/web/css/column-rule-color/index.md | 101 ++++++++++++++++++++++ files/ja/web/css/column-rule-style/index.html | 96 --------------------- files/ja/web/css/column-rule-style/index.md | 96 +++++++++++++++++++++ files/ja/web/css/column-rule-width/index.html | 96 --------------------- files/ja/web/css/column-rule-width/index.md | 96 +++++++++++++++++++++ files/ja/web/css/column-rule/index.html | 117 -------------------------- files/ja/web/css/column-rule/index.md | 117 ++++++++++++++++++++++++++ files/ja/web/css/column-span/index.html | 115 ------------------------- files/ja/web/css/column-span/index.md | 115 +++++++++++++++++++++++++ files/ja/web/css/column-width/index.html | 108 ------------------------ files/ja/web/css/column-width/index.md | 108 ++++++++++++++++++++++++ files/ja/web/css/columns/index.html | 101 ---------------------- files/ja/web/css/columns/index.md | 101 ++++++++++++++++++++++ 18 files changed, 940 insertions(+), 940 deletions(-) delete mode 100644 files/ja/web/css/column-count/index.html create mode 100644 files/ja/web/css/column-count/index.md delete mode 100644 files/ja/web/css/column-fill/index.html create mode 100644 files/ja/web/css/column-fill/index.md delete mode 100644 files/ja/web/css/column-rule-color/index.html create mode 100644 files/ja/web/css/column-rule-color/index.md delete mode 100644 files/ja/web/css/column-rule-style/index.html create mode 100644 files/ja/web/css/column-rule-style/index.md delete mode 100644 files/ja/web/css/column-rule-width/index.html create mode 100644 files/ja/web/css/column-rule-width/index.md delete mode 100644 files/ja/web/css/column-rule/index.html create mode 100644 files/ja/web/css/column-rule/index.md delete mode 100644 files/ja/web/css/column-span/index.html create mode 100644 files/ja/web/css/column-span/index.md delete mode 100644 files/ja/web/css/column-width/index.html create mode 100644 files/ja/web/css/column-width/index.md delete mode 100644 files/ja/web/css/columns/index.html create mode 100644 files/ja/web/css/columns/index.md (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/column-count/index.html b/files/ja/web/css/column-count/index.html deleted file mode 100644 index 04e0ee9338..0000000000 --- a/files/ja/web/css/column-count/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: column-count -slug: Web/CSS/column-count -tags: - - CSS - - CSS プロパティ - - CSS 段組みレイアウト - - リファレンス - - 段組み -translation_of: Web/CSS/column-count ---- -
{{CSSRef}}
- -

CSS の column-count プロパティは、指定された段数で要素のコンテンツを分割します。

- -
{{EmbedInteractiveExample("pages/css/column-count.html")}}
- - - -

構文

- -
/* キーワード値 */
-column-count: auto;
-
-/* <integer> 値 */
-column-count: 3;
-
-/* グローバル値 */
-column-count: inherit;
-column-count: initial;
-column-count: unset;
- -

値

- -
-
auto
-
段数は {{cssxref("column-width")}} など、他の CSS プロパティによって決定されます。
-
{{cssxref("<integer>")}}
-
正の{{cssxref("<integer>", "整数")}}のみで、要素の中で流れる理想的な列の数を記述します。 {{cssxref("column-width")}} が auto 以外の値で一緒に設定された場合は、最大の列数を示します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p class="content-box">
-  This is a bunch of text split into three columns
-  using the CSS `column-count` property. The text
-  is equally distributed over the columns.
-</p>
-
- -

CSS

- -
.content-box {
-  column-count: 3;
-}
-
- -

結果

- -

{{EmbedLiveSample('Example', 'auto', 120)}}

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/column-count/index.md b/files/ja/web/css/column-count/index.md new file mode 100644 index 0000000000..04e0ee9338 --- /dev/null +++ b/files/ja/web/css/column-count/index.md @@ -0,0 +1,98 @@ +--- +title: column-count +slug: Web/CSS/column-count +tags: + - CSS + - CSS プロパティ + - CSS 段組みレイアウト + - リファレンス + - 段組み +translation_of: Web/CSS/column-count +--- +
{{CSSRef}}
+ +

CSS の column-count プロパティは、指定された段数で要素のコンテンツを分割します。

+ +
{{EmbedInteractiveExample("pages/css/column-count.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+column-count: auto;
+
+/* <integer> 値 */
+column-count: 3;
+
+/* グローバル値 */
+column-count: inherit;
+column-count: initial;
+column-count: unset;
+ +

値

+ +
+
auto
+
段数は {{cssxref("column-width")}} など、他の CSS プロパティによって決定されます。
+
{{cssxref("<integer>")}}
+
正の{{cssxref("<integer>", "整数")}}のみで、要素の中で流れる理想的な列の数を記述します。 {{cssxref("column-width")}} が auto 以外の値で一緒に設定された場合は、最大の列数を示します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into three columns
+  using the CSS `column-count` property. The text
+  is equally distributed over the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example', 'auto', 120)}}

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/column-fill/index.html b/files/ja/web/css/column-fill/index.html deleted file mode 100644 index 7f3de2dafa..0000000000 --- a/files/ja/web/css/column-fill/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: column-fill -slug: Web/CSS/column-fill -tags: - - CSS - - CSS Multi-column Layout - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/column-fill ---- -
{{CSSRef}}
- -

column-fill は CSS のプロパティで、段組みレイアウトで要素のコンテンツが複数の段に分割されるとき、どのようにバランスを取るのかを制御します。

- -
{{EmbedInteractiveExample("pages/css/column-fill.html")}}
- - - -

構文

- -
/* キーワード値 */
-column-fill: auto;
-column-fill: balance;
-column-fill: balance-all;
-
-/* グローバル値 */
-column-fill: inherit;
-column-fill: initial;
-column-fill: unset;
-
- -

column-fill プロパティは、以下に挙げたキーワード値のうちの1つで指定します。初期値は balance で、コンテンツは段の間で均等になります。

- -

値

- -
-
auto
-
段は順に埋められます。コンテンツは必要な余地があるときだけ分割されるので、一部の段は空になることがあります。
-
balance
-
コンテンツは各段に均等に分割されます。ページ付きメディアなどの断片化されたコンテキストでは、最後の断片のみが均等に分割されます。従ってページ付きメディアでは、最後のページのみが均等に分割されます。
-
balance-all
-
コンテンツは格段に均等に分割されます。ページ付きメディアなどの断片化されたコンテキストでは、すべての断片が均等になります。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

テキストを段間で均等に分割

- -

HTML

- -
<p class="content-box">
-  This is a bunch of text split into multiple
-  columns. The CSS `column-fill` property is
-  used to spread the contents evenly across
-  all the columns.
-</p>
-
- -

CSS

- -
.content-box {
-  column-count: 4;
-  column-rule: 1px solid black;
-  column-fill: balance;
-}
-
- -

結果

- -

{{EmbedLiveSample('Splitting_text_evenly_across_columns', 'auto', 120)}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -
-

仕様上の未解決の問題により、 column-fill にはブラウザ－間の相互運用性の問題やバグがあることに注意してください。

- -

特に、 column-fill: auto を使用して連続的に列を埋める場合、 Chrome は、段組みコンテナーにブロック方向の寸法 (例: 横書きモードならば高さ) がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の列をすべてのコンテンツで埋めます。

-
diff --git a/files/ja/web/css/column-fill/index.md b/files/ja/web/css/column-fill/index.md new file mode 100644 index 0000000000..7f3de2dafa --- /dev/null +++ b/files/ja/web/css/column-fill/index.md @@ -0,0 +1,108 @@ +--- +title: column-fill +slug: Web/CSS/column-fill +tags: + - CSS + - CSS Multi-column Layout + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/column-fill +--- +
{{CSSRef}}
+ +

column-fill は CSS のプロパティで、段組みレイアウトで要素のコンテンツが複数の段に分割されるとき、どのようにバランスを取るのかを制御します。

+ +
{{EmbedInteractiveExample("pages/css/column-fill.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+column-fill: auto;
+column-fill: balance;
+column-fill: balance-all;
+
+/* グローバル値 */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+
+ +

column-fill プロパティは、以下に挙げたキーワード値のうちの1つで指定します。初期値は balance で、コンテンツは段の間で均等になります。

+ +

値

+ +
+
auto
+
段は順に埋められます。コンテンツは必要な余地があるときだけ分割されるので、一部の段は空になることがあります。
+
balance
+
コンテンツは各段に均等に分割されます。ページ付きメディアなどの断片化されたコンテキストでは、最後の断片のみが均等に分割されます。従ってページ付きメディアでは、最後のページのみが均等に分割されます。
+
balance-all
+
コンテンツは格段に均等に分割されます。ページ付きメディアなどの断片化されたコンテキストでは、すべての断片が均等になります。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

テキストを段間で均等に分割

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into multiple
+  columns. The CSS `column-fill` property is
+  used to spread the contents evenly across
+  all the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 4;
+  column-rule: 1px solid black;
+  column-fill: balance;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Splitting_text_evenly_across_columns', 'auto', 120)}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +
+

仕様上の未解決の問題により、 column-fill にはブラウザ－間の相互運用性の問題やバグがあることに注意してください。

+ +

特に、 column-fill: auto を使用して連続的に列を埋める場合、 Chrome は、段組みコンテナーにブロック方向の寸法 (例: 横書きモードならば高さ) がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の列をすべてのコンテンツで埋めます。

+
diff --git a/files/ja/web/css/column-rule-color/index.html b/files/ja/web/css/column-rule-color/index.html deleted file mode 100644 index 10656f4c94..0000000000 --- a/files/ja/web/css/column-rule-color/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: column-rule-color -slug: Web/CSS/column-rule-color -tags: - - CSS - - CSS プロパティ - - CSS 段組みレイアウト - - HTML 色 - - Reference - - 段組み -translation_of: Web/CSS/column-rule-color ---- -
{{CSSRef}}
- -

column-rule-color は CSS のプロパティで、段組みレイアウトで段間に引かれる線の色を設定します。

- -
{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}
- - - -

構文

- -
/* <color> 値 */
-column-rule-color: red;
-column-rule-color: rgb(192, 56, 78);
-column-rule-color: transparent;
-column-rule-color: hsla(0, 100%, 50%, 0.6);
-
-/* グローバル値 */
-column-rule-color: inherit;
-column-rule-color: initial;
-column-rule-color: unset;
-
- -

column-rule-color プロパティは、単一の <color> 値で指定します。

- -

値

- -
-
{{cssxref("<color>")}}
-
段を分割する段間罫の色です。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p>This is a bunch of text split into three columns.
-   The `column-rule-color` property is used to change
-   the color of the line that is drawn between columns.
-   Don't you think that's wonderful?</p>
- -

CSS

- -
p {
-  column-count: 3;
-  column-rule-style: solid;
-  column-rule-color: blue;
-}
-
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/column-rule-color/index.md b/files/ja/web/css/column-rule-color/index.md new file mode 100644 index 0000000000..10656f4c94 --- /dev/null +++ b/files/ja/web/css/column-rule-color/index.md @@ -0,0 +1,101 @@ +--- +title: column-rule-color +slug: Web/CSS/column-rule-color +tags: + - CSS + - CSS プロパティ + - CSS 段組みレイアウト + - HTML 色 + - Reference + - 段組み +translation_of: Web/CSS/column-rule-color +--- +
{{CSSRef}}
+ +

column-rule-color は CSS のプロパティで、段組みレイアウトで段間に引かれる線の色を設定します。

+ +
{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+column-rule-color: red;
+column-rule-color: rgb(192, 56, 78);
+column-rule-color: transparent;
+column-rule-color: hsla(0, 100%, 50%, 0.6);
+
+/* グローバル値 */
+column-rule-color: inherit;
+column-rule-color: initial;
+column-rule-color: unset;
+
+ +

column-rule-color プロパティは、単一の <color> 値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
段を分割する段間罫の色です。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p>This is a bunch of text split into three columns.
+   The `column-rule-color` property is used to change
+   the color of the line that is drawn between columns.
+   Don't you think that's wonderful?</p>
+ +

CSS

+ +
p {
+  column-count: 3;
+  column-rule-style: solid;
+  column-rule-color: blue;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/column-rule-style/index.html b/files/ja/web/css/column-rule-style/index.html deleted file mode 100644 index a27908eead..0000000000 --- a/files/ja/web/css/column-rule-style/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: column-rule-style -slug: Web/CSS/column-rule-style -tags: - - CSS - - CSS プロパティ - - CSS 段組みレイアウト - - Reference - - 段組み -translation_of: Web/CSS/column-rule-style ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}
- - - -

構文

- -
/* <'border-style'> の値 */
-column-rule-style: none;
-column-rule-style: hidden;
-column-rule-style: dotted;
-column-rule-style: dashed;
-column-rule-style: solid;
-column-rule-style: double;
-column-rule-style: groove;
-column-rule-style: ridge;
-column-rule-style: inset;
-column-rule-style: outset;
-
-/* グローバル値 */
-column-rule-style: inherit;
-column-rule-style: initial;
-column-rule-style: unset;
-
- -

column-rule-style プロパティは、単一の <'border-style'> 値で指定します。

- -

値

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

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p>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>
- -

CSS

- -
p {
-  column-count: 3;
-  column-rule-style: dashed;
-}
- -

結果

- -

{{ EmbedLiveSample('Example') }}

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

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

diff --git a/files/ja/web/css/column-rule-style/index.md b/files/ja/web/css/column-rule-style/index.md new file mode 100644 index 0000000000..a27908eead --- /dev/null +++ b/files/ja/web/css/column-rule-style/index.md @@ -0,0 +1,96 @@ +--- +title: column-rule-style +slug: Web/CSS/column-rule-style +tags: + - CSS + - CSS プロパティ + - CSS 段組みレイアウト + - Reference + - 段組み +translation_of: Web/CSS/column-rule-style +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}
+ + + +

構文

+ +
/* <'border-style'> の値 */
+column-rule-style: none;
+column-rule-style: hidden;
+column-rule-style: dotted;
+column-rule-style: dashed;
+column-rule-style: solid;
+column-rule-style: double;
+column-rule-style: groove;
+column-rule-style: ridge;
+column-rule-style: inset;
+column-rule-style: outset;
+
+/* グローバル値 */
+column-rule-style: inherit;
+column-rule-style: initial;
+column-rule-style: unset;
+
+ +

column-rule-style プロパティは、単一の <'border-style'> 値で指定します。

+ +

値

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

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p>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>
+ +

CSS

+ +
p {
+  column-count: 3;
+  column-rule-style: dashed;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Example') }}

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

diff --git a/files/ja/web/css/column-rule-width/index.html b/files/ja/web/css/column-rule-width/index.html deleted file mode 100644 index c0241e7a31..0000000000 --- a/files/ja/web/css/column-rule-width/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: column-rule-width -slug: Web/CSS/column-rule-width -tags: - - CSS - - CSS Property - - CSS プロパティ - - CSS 段組みレイアウト - - Reference - - 段組み -translation_of: Web/CSS/column-rule-width ---- -
{{ CSSRef}}
- -

column-rule-width は CSS のプロパティで、段組みレイアウトで段間に引かれる線の太さを設定します。

- -
{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}
- - - -

構文

- -
/* キーワード値 */
-column-rule-width: thin;
-column-rule-width: medium;
-column-rule-width: thick;
-
-/* <length> 値 */
-column-rule-width: 1px;
-column-rule-width: 2.5em;
-
-/* グローバル値 */
-column-rule-width: inherit;
-column-rule-width: initial;
-column-rule-width: unset;
-
- -

column-rule-width プロパティは単一の <'border-width'> の値で指定します。

- -

値

- -
-
<'border-width'>
-
{{ cssxref("border-width") }} で定められたキーワードで段間罫の太さを指定します。 {{cssxref("<length>")}} または thin、 medium、 thick のキーワードのいずれかです。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p>This is a bunch of text split into three columns.
-   The `column-rule-width` property is used to change
-   the width of the line that is drawn between columns.
-   Don't you think that's wonderful?</p>
- -

CSS

- -
p {
-  column-count: 3;
-  column-rule-style: solid;
-  column-rule-width: thick;
-}
-
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

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

diff --git a/files/ja/web/css/column-rule-width/index.md b/files/ja/web/css/column-rule-width/index.md new file mode 100644 index 0000000000..c0241e7a31 --- /dev/null +++ b/files/ja/web/css/column-rule-width/index.md @@ -0,0 +1,96 @@ +--- +title: column-rule-width +slug: Web/CSS/column-rule-width +tags: + - CSS + - CSS Property + - CSS プロパティ + - CSS 段組みレイアウト + - Reference + - 段組み +translation_of: Web/CSS/column-rule-width +--- +
{{ CSSRef}}
+ +

column-rule-width は CSS のプロパティで、段組みレイアウトで段間に引かれる線の太さを設定します。

+ +
{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+column-rule-width: thin;
+column-rule-width: medium;
+column-rule-width: thick;
+
+/* <length> 値 */
+column-rule-width: 1px;
+column-rule-width: 2.5em;
+
+/* グローバル値 */
+column-rule-width: inherit;
+column-rule-width: initial;
+column-rule-width: unset;
+
+ +

column-rule-width プロパティは単一の <'border-width'> の値で指定します。

+ +

値

+ +
+
<'border-width'>
+
{{ cssxref("border-width") }} で定められたキーワードで段間罫の太さを指定します。 {{cssxref("<length>")}} または thin、 medium、 thick のキーワードのいずれかです。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p>This is a bunch of text split into three columns.
+   The `column-rule-width` property is used to change
+   the width of the line that is drawn between columns.
+   Don't you think that's wonderful?</p>
+ +

CSS

+ +
p {
+  column-count: 3;
+  column-rule-style: solid;
+  column-rule-width: thick;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

diff --git a/files/ja/web/css/column-rule/index.html b/files/ja/web/css/column-rule/index.html deleted file mode 100644 index 768c36a8d8..0000000000 --- a/files/ja/web/css/column-rule/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: column-rule -slug: Web/CSS/column-rule -tags: - - CSS - - CSS Multi-column Layout - - CSS Property - - Reference - - 'recipe:css-property' -browser-compat: css.properties.column-rule -translation_of: Web/CSS/column-rule ---- -
{{CSSRef}}
- -

column-rule は一括指定を行う CSS のプロパティで、段組みレイアウトで段間に引かれる線の太さ、スタイル、色を設定します。

- -
{{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;
-column-rule: solid blue;
-column-rule: thick inset blue;
-
-/* グローバル値 */
-column-rule: inherit;
-column-rule: initial;
-column-rule: revert;
-column-rule: unset;
-
- -

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

- -

値

- -
-
<'column-rule-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

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

例 2

- -

HTML

- -
<p class="content-box">
-  This is a bunch of text split into three columns.
-  Take note of how the `column-rule` property is used
-  to adjust the style, width, and color of the rule
-  that appears between the columns.
-</p>
-
- -

CSS

- -
.content-box {
-  padding: 0.3em;
-  background: #ff7;
-  column-count: 3;
-  column-rule: inset 2px #33f;
-}
-
- -

結果

- -

{{EmbedLiveSample('Example_2')}}

- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - diff --git a/files/ja/web/css/column-rule/index.md b/files/ja/web/css/column-rule/index.md new file mode 100644 index 0000000000..768c36a8d8 --- /dev/null +++ b/files/ja/web/css/column-rule/index.md @@ -0,0 +1,117 @@ +--- +title: column-rule +slug: Web/CSS/column-rule +tags: + - CSS + - CSS Multi-column Layout + - CSS Property + - Reference + - 'recipe:css-property' +browser-compat: css.properties.column-rule +translation_of: Web/CSS/column-rule +--- +
{{CSSRef}}
+ +

column-rule は一括指定を行う CSS のプロパティで、段組みレイアウトで段間に引かれる線の太さ、スタイル、色を設定します。

+ +
{{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;
+column-rule: solid blue;
+column-rule: thick inset blue;
+
+/* グローバル値 */
+column-rule: inherit;
+column-rule: initial;
+column-rule: revert;
+column-rule: unset;
+
+ +

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

+ +

値

+ +
+
<'column-rule-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

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

例 2

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into three columns.
+  Take note of how the `column-rule` property is used
+  to adjust the style, width, and color of the rule
+  that appears between the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  padding: 0.3em;
+  background: #ff7;
+  column-count: 3;
+  column-rule: inset 2px #33f;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example_2')}}

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/column-span/index.html b/files/ja/web/css/column-span/index.html deleted file mode 100644 index 1fd646cc09..0000000000 --- a/files/ja/web/css/column-span/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: column-span -slug: Web/CSS/column-span -tags: - - CSS - - CSS Multi-column Layout - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/column-span ---- -
{{CSSRef}}
- -

column-span は CSS のプロパティで、値に all を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。

- -
{{EmbedInteractiveExample("pages/css/column-span.html")}}
- -
/* キーワード値 */
-column-span: none;
-column-span: all;
-
-/* グローバル値 */
-column-span: inherit;
-column-span: initial;
-column-span: unset;
-
- -

複数の段にまたがる要素は、スパニング要素 (spanning element) と呼びます。

- -

構文

- -

column-span プロパティは以下に挙げたキーワード値のうちの一つで指定します。

- -

値

- -
-
none
-
この要素は複数の段にまたがりません。
-
all
-
この要素がすべての段にまたがります。この要素よりも前に現れた通常フローのコンテンツは、自動的にすべての段で均等になります。この要素は新しいブロック整形コンテキストを生成します。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

段をまたぐ見出しの設定

- -

この例では、見出しが記事のすべての段にまたがって作成されます。

- -

HTML

- -
<article>
-  <h2>Header spanning all of the columns</h2>
-  <p>
-     The h2 should span all the columns. The rest
-     of the text should be distributed among the columns.
-  </p>
-  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
-  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
-  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
-  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
-</article>
-
- -

CSS

- -
article {
-  columns: 3;
-}
-
-h2 {
-  column-span: all;
-}
-
- -

結果

- -

{{EmbedLiveSample('Making_a_heading_span_columns', 'auto', 260)}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/column-span/index.md b/files/ja/web/css/column-span/index.md new file mode 100644 index 0000000000..1fd646cc09 --- /dev/null +++ b/files/ja/web/css/column-span/index.md @@ -0,0 +1,115 @@ +--- +title: column-span +slug: Web/CSS/column-span +tags: + - CSS + - CSS Multi-column Layout + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/column-span +--- +
{{CSSRef}}
+ +

column-span は CSS のプロパティで、値に all を設定した場合、段組みレイアウトで要素をすべての段にまたがらせることができます。

+ +
{{EmbedInteractiveExample("pages/css/column-span.html")}}
+ +
/* キーワード値 */
+column-span: none;
+column-span: all;
+
+/* グローバル値 */
+column-span: inherit;
+column-span: initial;
+column-span: unset;
+
+ +

複数の段にまたがる要素は、スパニング要素 (spanning element) と呼びます。

+ +

構文

+ +

column-span プロパティは以下に挙げたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
none
+
この要素は複数の段にまたがりません。
+
all
+
この要素がすべての段にまたがります。この要素よりも前に現れた通常フローのコンテンツは、自動的にすべての段で均等になります。この要素は新しいブロック整形コンテキストを生成します。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

段をまたぐ見出しの設定

+ +

この例では、見出しが記事のすべての段にまたがって作成されます。

+ +

HTML

+ +
<article>
+  <h2>Header spanning all of the columns</h2>
+  <p>
+     The h2 should span all the columns. The rest
+     of the text should be distributed among the columns.
+  </p>
+  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
+  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
+  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
+  <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p>
+</article>
+
+ +

CSS

+ +
article {
+  columns: 3;
+}
+
+h2 {
+  column-span: all;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Making_a_heading_span_columns', 'auto', 260)}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/column-width/index.html b/files/ja/web/css/column-width/index.html deleted file mode 100644 index 51ac427682..0000000000 --- a/files/ja/web/css/column-width/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: column-width -slug: Web/CSS/column-width -tags: - - CSS - - CSS Property - - CSS プロパティ - - CSS 段組みレイアウト - - リファレンス - - 段組み -translation_of: Web/CSS/column-width ---- -
{{CSSRef}}
- -

column-width は CSS のプロパティで、段組みレイアウトで理想的な段の幅を設定します。コンテナーは column-width の値よりも狭い段がないように、できるだけ多くの段を配置します。コンテナーの幅が指定された値よりも狭い場合、実際の段の幅はより狭くなることがあります。

- -
{{EmbedInteractiveExample("pages/css/column-width.html")}}
- - - -

このプロパティは様々な画面の大きさに合うレスポンシブデザインを作成するのに役立ちます。特に (優先度の高い) {{cssxref("column-count")}} プロパティがある場合、正確な段の幅を設定するには、すべての幅の値を指定する必要があります。横書きでは、これらは {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}}, {{cssxref('column-rule-width')}} です。

- -

構文

- -
/* キーワード値 */
-column-width: auto;
-
-/* <length> 値 */
-column-width: 60px;
-column-width: 15.5em;
-column-width: 3.3vw;
-
-/* グローバル値 */
-column-width: inherit;
-column-width: initial;
-column-width: unset;
-
- -

column-width プロパティは以下に挙げた値のうちの一つで指定します。

- -

値

- -
-
{{cssxref("<length>")}}
-
段の最適な幅のヒントを与えます。実際の段の幅は指定された値と異なります。余白を埋める必要がある場合は広くなる可能性があり、利用可能な幅が小さすぎる場合は狭くなる可能性があります。この値は正の数だけで、そうでなければ宣言は無効になります。パーセント値も無効です。
-
auto
-
段の幅は {{cssxref("column-count")}} などの他の CSS プロパティによって決定されます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p class="content-box">
-Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-</p>
- -

CSS

- -
.content-box {
-  column-width: 100px;
-}
-
- -

結果

- -

{{EmbedLiveSample('Example', 'auto', 160)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Writing Modes', '#auto-multicol', 'column-width')}}{{Spec2('CSS4 Writing Modes')}}min-content, max-content, fill-available, fit-content の各キーワードによって固有の寸法を追加。
{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}{{Spec2('CSS3 Multicol')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/column-width/index.md b/files/ja/web/css/column-width/index.md new file mode 100644 index 0000000000..51ac427682 --- /dev/null +++ b/files/ja/web/css/column-width/index.md @@ -0,0 +1,108 @@ +--- +title: column-width +slug: Web/CSS/column-width +tags: + - CSS + - CSS Property + - CSS プロパティ + - CSS 段組みレイアウト + - リファレンス + - 段組み +translation_of: Web/CSS/column-width +--- +
{{CSSRef}}
+ +

column-width は CSS のプロパティで、段組みレイアウトで理想的な段の幅を設定します。コンテナーは column-width の値よりも狭い段がないように、できるだけ多くの段を配置します。コンテナーの幅が指定された値よりも狭い場合、実際の段の幅はより狭くなることがあります。

+ +
{{EmbedInteractiveExample("pages/css/column-width.html")}}
+ + + +

このプロパティは様々な画面の大きさに合うレスポンシブデザインを作成するのに役立ちます。特に (優先度の高い) {{cssxref("column-count")}} プロパティがある場合、正確な段の幅を設定するには、すべての幅の値を指定する必要があります。横書きでは、これらは {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}}, {{cssxref('column-rule-width')}} です。

+ +

構文

+ +
/* キーワード値 */
+column-width: auto;
+
+/* <length> 値 */
+column-width: 60px;
+column-width: 15.5em;
+column-width: 3.3vw;
+
+/* グローバル値 */
+column-width: inherit;
+column-width: initial;
+column-width: unset;
+
+ +

column-width プロパティは以下に挙げた値のうちの一つで指定します。

+ +

値

+ +
+
{{cssxref("<length>")}}
+
段の最適な幅のヒントを与えます。実際の段の幅は指定された値と異なります。余白を埋める必要がある場合は広くなる可能性があり、利用可能な幅が小さすぎる場合は狭くなる可能性があります。この値は正の数だけで、そうでなければ宣言は無効になります。パーセント値も無効です。
+
auto
+
段の幅は {{cssxref("column-count")}} などの他の CSS プロパティによって決定されます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p class="content-box">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+</p>
+ +

CSS

+ +
.content-box {
+  column-width: 100px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example', 'auto', 160)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Writing Modes', '#auto-multicol', 'column-width')}}{{Spec2('CSS4 Writing Modes')}}min-content, max-content, fill-available, fit-content の各キーワードによって固有の寸法を追加。
{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}{{Spec2('CSS3 Multicol')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/columns/index.html b/files/ja/web/css/columns/index.html deleted file mode 100644 index cc9fab26d3..0000000000 --- a/files/ja/web/css/columns/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: columns -slug: Web/CSS/columns -tags: - - CSS - - CSS Property - - CSS 段組みレイアウト - - Reference - - 一括指定プロパティ - - 段組み -translation_of: Web/CSS/columns ---- -
{{CSSRef}}
- -

CSS の columns プロパティは、段組みされた要素の段の幅や段数を設定します。

- -
{{EmbedInteractiveExample("pages/css/columns.html")}}
- - - -

これは {{cssxref('column-width')}} と {{cssxref("column-count")}} の両方を一度に便利に宣言できる一括指定プロパティです。他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます。

- -

構文

- -
/* 段の幅 */
-columns: 18em;
-
-/* 段数 */
-columns: auto;
-columns: 2;
-
-/* 段の幅と段数の両方 */
-columns: 2 auto;
-columns: auto 12em;
-columns: auto auto;
-
-/* グローバル値 */
-columns: inherit;
-columns: initial;
-columns: unset;
- -

columns プロパティは以下に挙げる値を1つまたは2つで、順不同で指定します。

- -

値

- -
-
<'column-width'>
-
{{cssxref("<length>")}} 値または auto キーワードで、段の幅を最適化するヒントになります。実際の段の幅はより広くなったり（余白を埋めるため）、より狭くなったり（利用可能なスペースが指定された段の幅よりも小さい場合のみ）します。この値は正の数だけで、そうでなければ宣言は無効になります。
-
<'column-count'>
-
正の {{cssxref("<integer>")}} のみで、要素の中で流れる理想的な段数を記述します。 {{cssxref("column-width")}} が auto 以外の値で一緒に設定された場合は、最大の段数を示します。
-
- -

構文形式

- -{{csssyntax}} - -

例

- -

HTML

- -
<p class="content-box">
-  This is a bunch of text split into three columns
-  using the CSS `columns` property. The text
-  is equally distributed over the columns.
-</p>
-
- -

CSS

- -
.content-box {
-  columns: 3 auto;
-}
- -

結果

- -

{{EmbedLiveSample('Example', 'auto', 120)}}

- -

仕様策定状況

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS3 Multicol', '#columns', 'columns')}}{{Spec2('CSS3 Multicol')}}初回定義。
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.columns")}}

diff --git a/files/ja/web/css/columns/index.md b/files/ja/web/css/columns/index.md new file mode 100644 index 0000000000..cc9fab26d3 --- /dev/null +++ b/files/ja/web/css/columns/index.md @@ -0,0 +1,101 @@ +--- +title: columns +slug: Web/CSS/columns +tags: + - CSS + - CSS Property + - CSS 段組みレイアウト + - Reference + - 一括指定プロパティ + - 段組み +translation_of: Web/CSS/columns +--- +
{{CSSRef}}
+ +

CSS の columns プロパティは、段組みされた要素の段の幅や段数を設定します。

+ +
{{EmbedInteractiveExample("pages/css/columns.html")}}
+ + + +

これは {{cssxref('column-width')}} と {{cssxref("column-count")}} の両方を一度に便利に宣言できる一括指定プロパティです。他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます。

+ +

構文

+ +
/* 段の幅 */
+columns: 18em;
+
+/* 段数 */
+columns: auto;
+columns: 2;
+
+/* 段の幅と段数の両方 */
+columns: 2 auto;
+columns: auto 12em;
+columns: auto auto;
+
+/* グローバル値 */
+columns: inherit;
+columns: initial;
+columns: unset;
+ +

columns プロパティは以下に挙げる値を1つまたは2つで、順不同で指定します。

+ +

値

+ +
+
<'column-width'>
+
{{cssxref("<length>")}} 値または auto キーワードで、段の幅を最適化するヒントになります。実際の段の幅はより広くなったり（余白を埋めるため）、より狭くなったり（利用可能なスペースが指定された段の幅よりも小さい場合のみ）します。この値は正の数だけで、そうでなければ宣言は無効になります。
+
<'column-count'>
+
正の {{cssxref("<integer>")}} のみで、要素の中で流れる理想的な段数を記述します。 {{cssxref("column-width")}} が auto 以外の値で一緒に設定された場合は、最大の段数を示します。
+
+ +

構文形式

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into three columns
+  using the CSS `columns` property. The text
+  is equally distributed over the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  columns: 3 auto;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example', 'auto', 120)}}

+ +

仕様策定状況

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS3 Multicol', '#columns', 'columns')}}{{Spec2('CSS3 Multicol')}}初回定義。
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.columns")}}

-- cgit v1.2.3-54-g00ecf