From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/column-fill/index.html | 110 ++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 files/ja/web/css/column-fill/index.html (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 new file mode 100644 index 0000000000..1ccb7597ae --- /dev/null +++ b/files/ja/web/css/column-fill/index.html @@ -0,0 +1,110 @@ +--- +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