CSS 段組みレイアウト

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

基本的な例

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

分割との関連

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

リファレンス

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

ガイド

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

仕様書

仕様書 状態 備考
CSS Multi-column Layout Module 草案 初回定義

関連情報

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