CSS 段組みレイアウト
CSS 段組みレイアウトは CSS のモジュールの一つで、段組みレイアウトの対応を追加するものです。対応内容はレイアウトする段数の指定、段から段へのコンテンツの流れ方、段間の空白、段区切り線 (段間罫) などの対応が含まれています。
基本的な例
以下の例では、 column-count プロパティをコンテナーのクラスの要素に適用しています。 column-count の値が 3 なので、内容物は同じ寸法の３つの段に並べられます。
分割との関連
段組みレイアウトは、文書全体が印刷ページに分割されるように行ボックスに分割することから、ページ付きメディアに密接に関連します。従って、 CSS 分割仕様書に定義されているプロパティが、段間の内容物の区切り位置を制御するために必要になりました。
リファレンス
段組みレイアウトのプロパティ
関連する CSS 分割のプロパティ
ガイド
- 段組みの基本概念
- 段組みレイアウト仕様の概要です。
- 段のスタイル付け
- 段間罫と段間の空間の使い方です。
- 段抜きと段の均衡
- すべての段にまたがる要素の作り方と、段を埋める方法の制御です。
- 段組みでのはみ出しの扱い
- アイテムが段をあふれたときに起こることと、段内のコンテンツが多すぎてコンテナーに収まらない場合に起こることです。
- 段組みにおける内容の分割の扱い
- 分割の仕様とどこで内容を区切るかの制御方法です。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Multi-column Layout Module | 草案 | 初回定義 |
関連情報
他の CSS レイアウト技術には以下のようなものがあります。
- CSS フレキシブルボックスレイアウト (CSS フレックスボックス)
- CSS グリッドレイアウト