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-fill/index.html | 108 -------------------------------- files/ja/web/css/column-fill/index.md | 108 ++++++++++++++++++++++++++++++++ 2 files changed, 108 insertions(+), 108 deletions(-) delete mode 100644 files/ja/web/css/column-fill/index.html create mode 100644 files/ja/web/css/column-fill/index.md (limited to 'files/ja/web/css/column-fill') 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 は常にこのプロパティを参照するため、寸法がない場合は最初の列をすべてのコンテンツで埋めます。

+
-- cgit v1.2.3-54-g00ecf