From 575fbb2a63836fd238503de8838a3ba285bc5d1e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 29 Dec 2021 22:50:10 +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-fill/index.md | 130 +++++++++++++++++----------------- 1 file changed, 65 insertions(+), 65 deletions(-) (limited to 'files/ja/web/css/column-fill/index.md') diff --git a/files/ja/web/css/column-fill/index.md b/files/ja/web/css/column-fill/index.md index 7f3de2dafa..2a17d64f74 100644 --- a/files/ja/web/css/column-fill/index.md +++ b/files/ja/web/css/column-fill/index.md @@ -3,23 +3,23 @@ title: column-fill slug: Web/CSS/column-fill tags: - CSS - - CSS Multi-column Layout - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 段組みレイアウト + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.column-fill translation_of: Web/CSS/column-fill --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`column-fill`** は [CSS](/ja/docs/Web/CSS) のプロパティで、段組みレイアウトで要素の内容物が複数の段に分割されるとき、どのようにバランスを取るのかを制御します。 -
{{EmbedInteractiveExample("pages/css/column-fill.html")}}
+{{EmbedInteractiveExample("pages/css/column-fill.html")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 column-fill: auto;
 column-fill: balance;
 column-fill: balance-all;
@@ -27,82 +27,82 @@ column-fill: balance-all;
 /* グローバル値 */
 column-fill: inherit;
 column-fill: initial;
+column-fill: revert;
 column-fill: unset;
-
+``` -

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

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

値

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

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 + +### 段の内容を均等にする -

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

+#### HTML -

HTML

+```html +

+ この段落では、段を 1 つずつ埋めていきます。すべてのテキストが最初の段に収まるので、他の段は空白になります。 +

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

+#### CSS + +```css +p { + height: 7em; + background: #ff9; + columns: 3; + column-rule: 1px solid; +} -
.content-box {
-  column-count: 4;
-  column-rule: 1px solid black;
+p.fill-auto {
+  column-fill: auto;
+}
+
+p.fill-balance {
   column-fill: balance;
 }
-
+``` + +#### 結果 -

結果

+{{EmbedLiveSample('Balancing_column_content', 'auto', 320)}} -

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

+## 仕様書 -

仕様書

+{{Specifications}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Multicol', '#cf', 'column-fill')}}{{Spec2('CSS3 Multicol')}}初回定義
+## ブラウザーの互換性 -

ブラウザーの互換性

+{{Compat}} -

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

+> **Warning:** 仕様上の未解決の問題により、 `column-fill` にはブラウザ－間の相互運用性の問題やバグがあることに注意してください。 +> +> 特に、 `column-fill: auto` を使用して連続的に段を埋める場合、 Chrome は、段組みコンテナーにブロック方向の寸法 (例: 横書きモードならば高さ) がある場合にのみこの値を参照します。 Firefox は常にこのプロパティを参照するため、寸法がない場合は最初の段をすべての内容物で埋めます。 -
-

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

+## 関連情報 -

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

-
+- [段組みレイアウト](/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- {{CSSXref("column-count")}} +- {{CSSXref("column-width")}} -- cgit v1.2.3-54-g00ecf