段組みの基本概念

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

主要概念と用語

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

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

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

段の定義

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

column-count プロパティ

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

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

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

column-width プロパティ

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

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

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

column-count と column-width の併用

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

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

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

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

次のステップ

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

関連トピック