From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../basic_concepts_of_multicol/index.html | 94 ++++++++ .../handling_content_breaks_in_multicol/index.html | 74 +++++++ .../handling_overflow_in_multicol/index.html | 44 ++++ files/ja/web/css/css_columns/index.html | 100 +++++++++ .../css/css_columns/spanning_columns/index.html | 65 ++++++ .../web/css/css_columns/styling_columns/index.html | 52 +++++ .../using_multi-column_layouts/index.html | 243 +++++++++++++++++++++ 7 files changed, 672 insertions(+) create mode 100644 files/ja/web/css/css_columns/basic_concepts_of_multicol/index.html create mode 100644 files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.html create mode 100644 files/ja/web/css/css_columns/handling_overflow_in_multicol/index.html create mode 100644 files/ja/web/css/css_columns/index.html create mode 100644 files/ja/web/css/css_columns/spanning_columns/index.html create mode 100644 files/ja/web/css/css_columns/styling_columns/index.html create mode 100644 files/ja/web/css/css_columns/using_multi-column_layouts/index.html (limited to 'files/ja/web/css/css_columns') diff --git a/files/ja/web/css/css_columns/basic_concepts_of_multicol/index.html b/files/ja/web/css/css_columns/basic_concepts_of_multicol/index.html new file mode 100644 index 0000000000..fdc6e3f42c --- /dev/null +++ b/files/ja/web/css/css_columns/basic_concepts_of_multicol/index.html @@ -0,0 +1,94 @@ +--- +title: 段組みの基本概念 +slug: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +tags: + - CSS + - CSS 段組みレイアウト + - Guide + - レイアウト +translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +--- +
{{CSSRef}}
+ +

段組みレイアウト (Multiple-column Layout) は、内容物を新聞のように複数の段ボックスにレイアウトする仕様です。このガイドでは、この仕様がどのように働くかを、いくつかのよくある使用例と共に説明します。

+ +

主要概念と用語

+ +

段組みは他のレイアウト方法とは異なり、 CSS でコンテンツを分割し、すべての子孫要素を段に含めます。これは、印刷スタイルシートを作成するのに使われる CSS ページ付きメディアがコンテンツをページに分割するのと同様のことを行います。

+ +

仕様書で定義されているプロパティは次の通りです。

+ + + +

column-count 又は column-width を要素に追加することで、要素は段組みコンテナーになります。段は無名のボックスになり、仕様書上では段ボックスと呼ばれます。

+ +

段の定義

+ +

段組みコンテナーを作成するには、少なくとも一つの column-* プロパティ、つまり column-count か column-width を使用する必要があります。

+ +

column-count プロパティ

+ +

column-count プロパティは、内容物を表示したい段数を指定します。ブラウザーは要求された数の段を生成するために、それぞれの段ボックスに適正な大きさの空間を割り当てます。

+ +

以下の例では、 column-count プロパティを使用して .container 要素に3つの段を生成します。その内容は、 .container の子も含めて3つの段に分割されます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

上記の例では、内容物は既定のスタイルの段落 p タグで囲まれています。従って、それぞれの段落の上にはマージンがあります。マージンが働いてテキストの最初の行を押し下げているのが分かるでしょう。これは、段組みコンテナーは新しいブロック整形文脈 (BFC) を作成し、つまり子要素のマージンはコンテナーのマージンと相殺されないからです。

+ +

column-width プロパティ

+ +

column-width プロパティは、それぞれの段ボックスの最適な幅を設定するために使用されます。 column-width を宣言すると、ブラウザーは段組みコンテナー内にその幅の段と、段間の均等の空間が収まる数を計算します。従って、段の幅は最小幅として扱われ、段ボックスはふつう、追加の空間があるためにより広くなります。

+ +

段ボックスは、利用できる幅が column-width の値よりも狭い一段組の場合に限り、宣言された段の幅よりも狭くなることがあります。

+ +

以下の例では、 column-width の値を 200px にして使用しています。コンテナーに合うように200ピクセルの段が確保され、残りの空間は均等に割り当てられます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}

+ +

column-count と column-width の併用

+ +

段組みコンテナーに両方のプロパティを指定すると、 column-count は最大の段数として動作します。従って、 column-count の段数に達するまでは、 column-width で宣言された通りに動作します。これを超えると、 column-width で指定された寸法の段を追加する余裕があっても、段は追加されず、余った空間は既存の段に均等に割り当てられます。

+ +

両方のプロパティを併用すると、 column-count の値で指定されたよりも少ない数の段数になることがあります。

+ +

次の例では、 column-width を 200px で column-count を 2 で使用しています。３段以上の空間があっても２段になります。しかし、 200px の段を２つ設置する空間の余裕がなければ、１段になります。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}

+ +

columns 一括指定

+ +

columns 一括指定で column-count と column-width を設定することができます。長さの単位を設定すると、 column-width に使用され、整数値を設定すると、 column-count に使用されます。２つの値を空白で区切って両方を設定することができます。

+ +

この CSS は例１と同じ結果で、 column-count を 3 に設定します。

+ +
.container {
+  columns: 3;
+}
+ +

この CSS は例２と同じ結果で、 column-width を 200px に設定します。

+ +
.container {
+  columns: 200px;
+}
+ +

この CSS は例３と同じ結果で、 column-count と column-width の両方に設定します。

+ +
.container {
+  columns: 2 200px;
+}
+ +

次のステップ

+ +

このガイドでは、段組みレイアウトの基本的な利用を学びました。次のガイドでは、 段のスタイル付けがどれだけできるかを見てみます。

diff --git a/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.html b/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.html new file mode 100644 index 0000000000..d1a397801f --- /dev/null +++ b/files/ja/web/css/css_columns/handling_content_breaks_in_multicol/index.html @@ -0,0 +1,74 @@ +--- +title: 段組みにおける内容の分割の扱い +slug: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol +tags: + - CSS + - CSS 段組みレイアウト + - Guide + - レイアウト +translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol +--- +
{{CSSRef}}
+ +

段組みレイアウトでは段ボックス間で、ページ付きメディアのページ間と同様に内容が分割されます。どちらのコンテキストでも、 CSS 断片化仕様書のプロパティを用いて、どのように内容を分割するかを制御します。このガイドでは、段組みで断片化がどのように動作するかを見てみます。

+ +

断片化の基本

+ +

CSS Fragmentation specification は、断片化コンテナー間、または fragmentainer の間でどのように内容を分割するかを詳述しています。段組みでは、 fragmentainer は段ボックスです。

+ +

段ボックスは他のマークアップを含むことができ、できれば分割したくない場所がたくさんあります。例えば、ふつうは画像のキャプションは参照する画像と別な段に分割されないほうが望ましく、見出しが段の最後にあるのも変です。断片化プロパティはこれをいくらか制御するための方法を提供します。

+ +

分割を制御したくなる場所は様々なものがあります。

+ + + +

ボックス内での分割

+ +

ボックス内での分割を制御するには、 {{cssxref("break-inside")}} プロパティを使用します。このプロパティは以下の値を取ります。

+ + + +

以下の例では、 break-inside を figure 要素に適用して、キャプションが画像から分割されることを防ぎます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}

+ +

ボックスの前後の分割

+ +

{{cssxref("break-before")}} および {{cssxref("break-after")}} プロパティを使用して、要素の前後の分割を制御します。段組みのコンテキストでは、以下の値を取ります。

+ + + +

次の例では、 h2 要素の前で強制的に改段しています。

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}

+ +

行間での分割

+ +

{{cssxref("orphans")}} および {{cssxref("widows")}} プロパティも便利です。 orphans プロパティは、断片の末尾に残る行数を制御します。 widows プロパティは、断片の先頭に残る行数を制御します。

+ +

orphans および widows プロパティは整数値を取り、断片のそれぞれ末尾および先頭の行数に残す行数を表します。なお、これらのプロパティは段落などのブロックコンテナー内でのみ動作します。ブロックの行数が値で指定された数より少なかった場合、すべての行が一緒に保持されます。

+ +

以下の例では、 orphans プロパティを用いて段の末尾に残す行数を制御しています。値を変更すると、内容を分割する効果を確認できます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}

+ +

期待通りに動作しない場合

+ +

内容の量が少なく、様々な方法で分割を制御しようとしている場合や、複数の要素があり、内容をどこかで分割する必要がある場合、常に意図する結果が得られるとは限りません。断片化の使用はある程度まで、常にブラウザーに対する提案であり、可能であればその方法で分割が制御されます。

+ +

上記に加えて、これらのプロパティーに対するブラウザーの対応は若干まばらです。ここ MDN の個別のプロパティページにおける互換性データ表は、どのブラウザーがどの機能に対応しているかを確認するのに便利かもしれません。多くの場合、分割が制御できないフォールバックにより、美しくない分割が発生することが次善の策であり、レイアウトが崩れるよりましです。

diff --git a/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.html b/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.html new file mode 100644 index 0000000000..0840b1ef0c --- /dev/null +++ b/files/ja/web/css/css_columns/handling_overflow_in_multicol/index.html @@ -0,0 +1,44 @@ +--- +title: 段組みでのはみ出しの扱い +slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +--- +
{{CSSRef}}
+ +

このガイドでは、段ボックス内部と、コンテナーに収まらないほど多くの内容がある場合の両方において、段組みがどのようにはみ出しを扱うかを見てみます。

+ +

段ボックス内でのはみ出し

+ +

はみ出しは、アイテムの寸法が段ボックスよりも大きな場合に発生します。例えば、段内の画像が column-width の幅、または column-count で宣言された段数に基づく段の幅よりも広い場合に発生します。

+ +

この場合、内容は段ボックスで切り取られるのではなく、次の列にはみ出します。以下の例と、ブラウザーが描画時に別な方法で処理する予定のレンダリングの画像を見てください。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}

+ +

+ +

画像を段ボックスに合うよう縮小したい場合は、 max-width: 100% を設定する標準的なレスポンシブ画像の解決方法で実現することができます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}

+ +

より多くの段が生成される場合

+ +

印刷のような断片化メディアコンテキスト内と、ウェブページのような連続メディアコンテキスト内とで、あふれた段がどのように扱われるかです。

+ +

断片化メディアでは、1つの断片 (例えば1ページ) が段で埋まると、段は新しいページに移動し、それを段で埋めます。連続メディアでは、段はインライン方向にはみ出します。ウェブでは、これはスクロールバーが出現することを意味します。

+ +

以下の例ではこのはみ出しの挙動を紹介します。段組みコンテナーには高さが設定されており、列を生成する空間よりも多くのテキストがありますので、列がコンテナーをはみ出して作成されます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}

+ +

将来の版の仕様書では、連続メディアでブロック方向に段をあふれさせることができるため、読み手は次の一連の段を見るために下スクロールすることができるので、便利になるでしょう。

+ +

垂直メディアクエリの使用

+ +

ウェブでの段組みの問題の一つに、段がビューポートより高い場合、読み手は読むのに上下にスクロールしなければならなくなるので使い勝手が悪くなります。これを防ぐ一つの方法が、十分な高さがあると分かった時に段組みプロパティを適用することです。

+ +

以下の例では、 min-height クエリを使用して、段組みプロパティを適用する前に高さを検査します。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}

+ +

このシリーズの最後のガイドでは、段組みが断片化仕様でどのように動作するかを見て、段をまたいで内容が分割される方法を制御します。

diff --git a/files/ja/web/css/css_columns/index.html b/files/ja/web/css/css_columns/index.html new file mode 100644 index 0000000000..e3354ed01b --- /dev/null +++ b/files/ja/web/css/css_columns/index.html @@ -0,0 +1,100 @@ +--- +title: CSS 段組みレイアウト +slug: Web/CSS/CSS_Columns +tags: + - CSS + - CSS 分割 + - CSS 段組みレイアウト + - Reference + - レイアウト + - 概要 + - 段組み +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef("CSS3 Multicol")}}
+ +

CSS 段組みレイアウトは CSS のモジュールの一つで、段組みレイアウトの対応を追加するものです。対応内容はレイアウトする段数の指定、段から段へのコンテンツの流れ方、段間の空白、段区切り線 (段間罫) などの対応が含まれています。

+ +

基本的な例

+ +

以下の例では、 {{cssxref("column-count")}} プロパティをコンテナーのクラスの要素に適用しています。 column-count の値が 3 なので、内容物は同じ寸法の３つの段に並べられます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

分割との関連

+ +

段組みレイアウトは、文書全体が印刷ページに分割されるように行ボックスに分割することから、ページ付きメディアに密接に関連します。従って、 CSS 分割仕様書に定義されているプロパティが、段間の内容物の区切り位置を制御するために必要になりました。

+ +

リファレンス

+ +

段組みレイアウトのプロパティ

+ +
+ +
+ + + +
+ +
+ +

ガイド

+ +
+
段組みの基本概念
+
段組みレイアウト仕様の概要です。
+
段のスタイル付け
+
段間罫と段間の空間の使い方です。
+
段抜きと段の均衡
+
すべての段にまたがる要素の作り方と、段を埋める方法の制御です。
+
段組みでのはみ出しの扱い
+
アイテムが段をあふれたときに起こることと、段内のコンテンツが多すぎてコンテナーに収まらない場合に起こることです。
+
段組みにおける内容の分割の扱い
+
分割の仕様とどこで内容を区切るかの制御方法です。
+
+ +

仕様書

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

関連情報

+ +

他の CSS レイアウト技術には以下のようなものがあります。

+ + diff --git a/files/ja/web/css/css_columns/spanning_columns/index.html b/files/ja/web/css/css_columns/spanning_columns/index.html new file mode 100644 index 0000000000..c3f25e6453 --- /dev/null +++ b/files/ja/web/css/css_columns/spanning_columns/index.html @@ -0,0 +1,65 @@ +--- +title: 段抜きと段の均衡 +slug: Web/CSS/CSS_Columns/Spanning_Columns +tags: + - CSS + - CSS 段組みレイアウト + - Guide + - レイアウト +translation_of: Web/CSS/CSS_Columns/Spanning_Columns +--- +
{{CSSRef}}
+ +

このガイドでは、段組みコンテナー内で段抜きを作成する方法、段がどのように充足されるかを制御する方法を見てみます。

+ +
+

このガイドで紹介している段抜きや均衡を取る機能は、このガイドの前二章で紹介した機能ほどブラウザーの対応が進んでいないことに注意してください。

+
+ +

段抜き

+ +

アイテムを段抜きする場合は、 {{cssxref("column-span")}} プロパティの値を all に設定してください。これで、要素はすべての段にまたがります。

+ +

段組みコンテナーの子孫要素は、直接の子でも間接の子でも段抜き (spanner) になることができます。例えば、コンテナーの中に直接含まれる見出しは段抜きになることができ、段組みコンテナーの中のセクションに含まれる見出しも同様です。

+ +

以下の例では、 h2 要素が column-span: all に設定され、すべての段に段抜きされます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}

+ +

次の例では、見出しが {{HTMLElement("article")}} 要素の中にありますが、期待通りにコンテンツが段抜きになります。

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}

+ +

段抜きが導入されると、段組みの流れが中断され、段抜きの後で実際に新しい一連の段ボックスを作成して段組みが再開します。内容が段抜き要素をまたぐことはありません。

+ +

column-span の制約

+ +

現在の Level 1 仕様書では、 column-span に許可されている値は二つしかありません。 none の値は初期値で、アイテムを段抜きせず、段の中に収めます。 all の値はアイテムがすべての段を段抜きすることを意味します。例えばアイテムを3段中2段に段抜きすることはできません。

+ +

注意すべきこと

+ +

段抜き要素がマージン、パディング、境界、背景色を持つ他の要素の中にあった場合、次の例に示すように、ボックスの上端が段抜きの上に現れ、残りの部分が段抜きの下に表示されることがあります。このため、要素を段抜きにするときにはいくらか注意が必要で、このシナリオに注意する必要があります。

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}

+ +

加えて、コンテンツの後方に段抜き要素が現れる場合は、段組みをするのに十分なコンテンツが段抜きの後にないと、予期しない挙動または望まない挙動をすることがあります。段抜きは注意深く使用し、様々な分割点になったときに望み通りの結果が得られるかを検査してください。

+ +

段の充足と均衡

+ +

均衡の取れた段組みは、すべての段のコンテンツの量がほぼ同じになっているものです。充足と均衡は、コンテンツの量が提供された空間の量に一致しない場合、例えばコンテナーの高さが宣言されている場合に発生します。

+ +

{{cssxref("column-fill")}} の段組みでの初期値は balance です。 balance の値は、可能な限りすべての段で均衡を取ることを意味します。ページ付きメディアのような断片化されたコンテキストにおいては、最後の断片のみで均衡が取られます。つまり、最後のページにおいて一連の段ボックスの均衡が取られます。

+ +

均衡を取るための第二の値は balance-all で、断片化されたコンテキストにおいて、最後の断片における段だけでなく、すべての段の均衡を取ろうとします。

+ +

この例には、画像とテキストを含む均衡の取れた段があります。画像は分割できないので最初の段に入り、他の段はテキストの量が同じになるように充足されます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}

+ +

column-fill の他の値として auto があります。この場合、すべての段を同じ量で充足して高さの均衡を図るのではなく、段を順番に充足させます。以下の例では column-fill を auto に変更し、段を段組みコンテナーの高さまで順番に充足させ、最後のいくつかの段は空のままにします。

+ +

{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}

+ +

なお、段の均衡はすべてのブラウザーが対応しているわけではありません。対応させるブラウザーで期待通りの効果が得られるかをチェックしてください。

+ +

次のガイドでは、段組みがはみ出しをどう扱うかを、段の中とコンテナーに合う数よりも多くの段ができる場合の両方について学習します。

diff --git a/files/ja/web/css/css_columns/styling_columns/index.html b/files/ja/web/css/css_columns/styling_columns/index.html new file mode 100644 index 0000000000..1f9e2b7803 --- /dev/null +++ b/files/ja/web/css/css_columns/styling_columns/index.html @@ -0,0 +1,52 @@ +--- +title: 段のスタイル付け +slug: Web/CSS/CSS_Columns/Styling_Columns +tags: + - CSS + - CSS Multi-column Layout + - CSS 段組みレイアウト + - Guide + - Layout + - レイアウト + - 日本語処理 +translation_of: Web/CSS/CSS_Columns/Styling_Columns +--- +
{{CSSRef}}
+ +

段組みコンテナー内に作られた段ボックスは無名ボックスなので、スタイル付けできることはわずかです。しかし、できることは少数ながらあります。このガイドは、段同士の間隔および段間罫をスタイル付けする方法を説明します。

+ +

段ボックスにスタイル付けできるか

+ +

残念ながら、現在はできません。段を構成する無名ボックスはスタイル付けの対象にする方法がないため、ボックスの背景色を変更したり、一段だけを他よりも広くしたりすることはできません。おそらく将来の版の仕様書でできるようになるでしょう。しかし現時点で、段同士の間隔と段間罫を変更することはできます。

+ +

column-gap プロパティ

+ +

段同士の間隔 (段間) は、 column-gap プロパティで制御されます。このプロパティはもともと段組みレイアウト仕様書で定義されていました。しかし、現在はボックス配置仕様書で定義され、 CSS グリッドレイアウトなどの他の仕様書におけるボックス同士の間隔と統合されました。

+ +

段組みにおける column-gap の初期値は 1em です。つまり、段同士は互いに接しません。他のレイアウト方法では、 column-gap の初期値は 0 です。キーワード値 “normal” を使用した場合、間隔は 1em に設定されます。

+ +

段間は column-gap の値として任意の単位を使用して変更することができます。以下の例では、 column-gap は 40px に設定されます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}

+ +

column-gap に許されている値は <length-percentage> であり、つまりパーセント値を使用することができます。 column-gap のパーセント値は、段組みコンテナーの幅に対するパーセント値として計算されます。

+ +

段間罫

+ +

仕様書では column-rule-width, column-rule-style column-rule-color と、一括指定する column-rule を定義しています。これらのプロパティは、 border プロパティとまったく同じように動作します。 border-style で有効な値が column-rule-style で使用できます。

+ +

これらのプロパティは段組みコンテナーである要素に適用されるため、すべての段に同じ段間罫が引かれます。段間罫は段同士の間にのみ引かれ、外の辺には引かれません。段間罫は内容のある段の間にのみ引かれます。

+ +

次の例は、幅 5px の点線の段間罫を rebeccapurple の色で、個別指定を使用して作成しています。

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}

+ +

なお、段間罫自体は空間を占有しません。段間罫が太くなっても、段間が広がることはありません。そうではなく、段間罫が段間と重なります。

+ +

次の例では、とても太い 40px の段間罫を 10px の段間に引いています。段間罫は段の内容の下に表示されます。段間罫の両側に間隔を作るには、 gap を 40px より大きくする必要があるでしょう。

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}

+ +

まとめ

+ +

ここでは、現在段ボックスに対してスタイル付けすることができるすべての方法を説明しました。次のガイドでは、コンテナー内ですべての段をまたがる要素の作成を見てみましょう。

diff --git a/files/ja/web/css/css_columns/using_multi-column_layouts/index.html b/files/ja/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..f0ae1440c7 --- /dev/null +++ b/files/ja/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,243 @@ +--- +title: 段組みレイアウトの使用 +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts +tags: + - Advanced + - CSS + - CSS Multi-column Layout + - Guide + - Layout + - Web +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +
{{CSSRef}}
+ +

CSS の段組みレイアウト (Multi-column Layout) は、ブロックレイアウトモードを拡張して、文章の段組みを定義しやすくするものです。行が長すぎると、文章が読みづらくなるものです。行末から次の行の先頭まで目を移動する距離が長すぎると、どの行を読んでいたか見失ってしまうことがあります。したがって、大きな画面を最大限に活用するためには、新聞のように幅が狭い段を並べた方が適切です。

+ +

残念ながら、 CSS と HTML では位置を指定してで段を区切ったり、文章に許されるマークアップを厳重に制限したり、大げさなスクリプトを使用したりしなければ実現できません。この制限は、従来のブロックレイアウトモードを拡張する新しい CSS プロパティを追加することで解決します。

+ +

段組みの使用

+ +

段の数と幅

+ +

2つの CSS プロパティ、 {{cssxref("column-count")}} と {{cssxref("column-width")}} で、段組みをするかどうか、段数をいくつにするかを制御します。

+ +

column-count プロパティで、段数を特定の数に設定します。例えば以下のようにします。

+ +

例1

+ +

HTML

+ +
+
<div id="col">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua.
+  </p>
+  <p>
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat.
+  </p>
+  <p>
+    Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur.
+  </p>
+  <p>
+    Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</div>
+
+ +

CSS

+ +
#col {
+  column-count: 2;
+}
+
+
+ +

結果

+ +

コンテンツが（段組み対応のブラウザーを使用していれば）2段で表示されます。

+ +

{{EmbedLiveSample("column_count", "100%")}}

+ +

column-width プロパティは最小限ほしい段の幅を設定します。 column-count の値が一緒に設定されていない場合は、ブラウザーは有効な幅に収まるできるだけ多くの段を自動的に作成します。

+ +

例2

+ +

HTML

+ +
+
<div id="wid">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+ +

CSS

+ +
#wid {
+  column-width: 100px;
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample("column_width", "100%")}}

+ +

より厳密な詳細については、 CSS3 仕様書で説明されています。

+ +

段組みをしたブロックでは、コンテンツは必要に応じてある段から次の段に流れます。 HTML、 CSS、 DOM 機能はすべて段組みでの編集や印刷に対応しています。

+ +

一括指定の columns

+ +

たいていの場合、ウェブデザイナーは {{cssxref("column-count")}} と {{cssxref("column-width")}} の2つのうち1つを使用します。これらのプロパティの値は重複しないので、一括指定の {{cssxref("columns")}} を使うのがふつうは便利です。例えば以下のようにします。

+ +

CSS 宣言の column-width: 12em は columns: 12em に置き換えることができます。

+ +

例3

+ +

HTML

+ +
+
<div id="col_short">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+ +

CSS

+ +
#col_short {
+  columns: 12em;
+}
+
+
+ +

{{EmbedLiveSample("column_short", "100%")}}

+ +

CSS 宣言 の column-count: 4 は columns: 4 に置き換えられます。

+ +

例4

+ +

HTML

+ +
+
<div id="columns_4">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+ +

CSS

+ +
#columns_4 {
+  columns: 4;
+}
+
+
+ +

Result

+ +

{{EmbedLiveSample("example_4_columns", "100%")}}

+ +

column-width: 8em と column-count: 12 の2つの CSS 宣言は、 columns: 12 8em で置き換えることができます。

+ +

例5

+ +

HTML

+ +
+
<div id="columns_12">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+ +

CSS

+ +
#columns_12 {
+  columns: 12 8em;
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample("example_12_columns", "100%")}}

+ +

高さの均衡

+ +

CSS3 の段組みの仕様書では、段の高さが揃っていなければならないと規定されています。つまり、ブラウザーは自動的に段の高さの最大値を設定し、各段のコンテンツの高さはおよそ同じになります。 Firefox はこれを行っています。

+ +

しかし、場合によっては段の高さの最大値を明示的に設定し、コンテンツを最初の段から配置して必要に応じていくつもの段を作成し、右に流れることができるようにすることが有用であることもあります。従って、段組みブロックに CSS の {{cssxref("height")}} または {{cssxref("max-height")}} プロパティを設定することで高さを制限すると、それぞれの段は新しい段を追加する前にその高さまで伸びていきます。このモードはレイアウトではるかに効率的です。

+ +

段間

+ +

段と段の間には隙間があります。推奨される既定値は 1em です。この寸法は段組みブロックに {{cssxref("column-gap")}} プロパティを適用することで変更することができます。

+ +

例6

+ +

HTML

+ +
+
<div id="column_gap">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+ +

CSS

+ +
#column_gap {
+  column-count: 5;
+  column-gap: 2em;
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample("col_gap", "100%")}}

+ +

グレイスフルデグラデーション

+ +

段組みのプロパティは、段組みに対応していないブラウザーでは単に無視されます。従って、そのようなブラウザーでは一列で表示し、対応しているブラウザーでは段組みを行うというレイアウトが比較的簡単に作成できます。

+ +

まとめ

+ +

CSS3 の段組みは、ウェブ開発者が画面の資産を最大限に活用できるようにするためのレイアウト方法です。想像的な開発者は、特に自動的に高さを調整する機能を利用して、様々な利用方法を見つけるでしょう。

-- cgit v1.2.3-54-g00ecf