CSS 段組みレイアウト

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

基本的な例

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

断片化との関係

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

リファレンス

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

関連する CSS 断片化のプロパティ

ガイド

段組みの基本概念

段組みレイアウト仕様の概要です。

段のスタイル付け

段間罫と段間の空間の使い方です。

段抜きと段の均衡

すべての段にまたがる要素の作り方と、段を埋める方法の制御です。

段組みでのはみ出しの扱い

アイテムが段をあふれたときに起こることと、段内の内容物が多すぎてコンテナーに収まらない場合に起こることです。

段組みにおける内容の分割の扱い

分割の仕様とどこで内容を区切るかの制御方法です。

仕様書

Specification
CSS Multi-column Layout Module Level 1

関連情報

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