CSS マルチカラムレイアウトモジュールレベル 1

1. はじめに

（このセクションは規定ではありません。）

このモジュールはCSSにおけるマルチカラムレイアウトについて説明します。本書の機能を使用することで、スタイルシートは要素の内容を複数のカラムにレイアウトすることを宣言できます。

CSSの他のレイアウト手法は、親要素に適用すると、直接の子の表示プロパティを変更します。例えば、3カラムのグリッドレイアウトを作成した場合、グリッドコンテナの直接の子はグリッドアイテムとなり、カラムトラックに配置されます。各セルに1つずつ要素が入り、必要に応じて追加の行が作成されます。

マルチカラムコンテナの子要素は通常のフローのままですが、そのフローが複数のカラムに分割されて配置されます。これらのカラムはインラインサイズが柔軟で、利用可能なスペースに応じて表示されるカラムのサイズや数が変化します。

マルチカラムレイアウトはCSSで簡単に記述できます。以下はシンプルな例です：

body { column-width: 12em }

この例では、body要素のカラム幅が最低12emになるように設定されています。実際のカラム数は利用可能なスペースによって決まります。

カラム数はスタイルシートで明示的に設定することもできます：

body { column-count: 2 }

この場合、カラム数は固定され、カラム幅は利用可能な幅によって変化します。

ショートハンドのcolumnsプロパティを使えば、どちらか一方または両方のプロパティを1つの宣言で設定できます。

これらの例では、カラム数、カラム幅、両方の数と幅の設定例です：

body { columns: 2 }
body { columns: 12em }
body { columns: 2 12em }

このモジュールで導入された別のプロパティ群は、カラム間の隙間や罫線について説明します。

body {
  column-gap: 1em;
  column-rule: thin solid black;
}

上記の例の最初の宣言は、隣接する2つのカラムの間隔を1emに設定します。カラムギャップはパディング領域に似ています。隙間の中央には罫線が入り、これはcolumn-ruleプロパティで設定できます。

column-ruleプロパティの値はCSSのborderプロパティと似ています。 borderと同様に、column-ruleはショートハンドプロパティです。

この例では、先ほどのcolumn-rule のショートハンド宣言を展開しています：

body {
  column-gap: 1em;
  column-rule-width: thin;
  column-rule-style: solid;
  column-rule-color: black;
}

column-fillやcolumn-spanプロパティを使うことで、マルチカラムレイアウトでさらに多様な表現が可能になります。

この例ではカラムをバランス良く配置し、つまり長さがほぼ同じになるようにしています。また、h2要素がすべてのカラムにまたがるように設定されています。

div { column-fill: balance }
h2 { column-span: all }

テスト

multicol-fill-balance-029.html （ライブテスト）（ソース）

この仕様では、上記の例全てで使われている10個の新しいプロパティを導入しています。

すべてのカラムプロパティが初期値の場合、要素のレイアウトは 1カラムだけのマルチカラムレイアウトと同じになります。

カラムギャップ（斜線ハッチング）やカラム罫線は、このサンプルのマルチカラムコンテナのレンダリングで（クロスハッチングの）パディングとともに示されています。ハッチングされた領域は説明用であり、実装時にはこれらの領域は背景によって決まります。 2枚目の画像はマルチカラムコンテナのカラム罫線付きのレンダリング例です。

a diagram showing the various parts of multi-column layout — マルチカラムレイアウトの非表示のcolumn-spanやパディング部分が強調表示されています。

key to the conventions used to display invisible parts of diagram — マルチカラムレイアウトの非表示のcolumn-spanやパディング部分が強調表示されています。

1.1. 値の定義

この仕様はCSSプロパティ定義の慣習（[CSS21]）に従い、値定義構文（[CSS-VALUES-3]）を使用しています。この仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。他のCSSモジュールとの組み合わせによって、これらの値型の定義が拡張される場合もあります。

プロパティ定義に記載された個別値に加え、本仕様で定義されるすべてのプロパティは CSS全体キーワードもプロパティ値として受け付けます。可読性のため、ここでは繰り返し記載していません。

2. マルチカラムモデル

column-widthまたはcolumn-countプロパティがautoでない要素は、マルチカラムコンテナ（略してmulticol container）を確立し、マルチカラムレイアウトのコンテナとして機能します。

テスト

基本的なマルチカラムのテスト。

auto値ではmulticol containerが作成されないことを示すテスト。

multicol-count-computed-004.xht （ライブテスト）（ソース）

マルチカラムプロパティは継承されません。

inheritance.html （ライブテスト）（ソース）

スクロール可能なカラムのマルチカラム。

multicol-scroll-content.html （ライブテスト）（ソース）

高さゼロのマルチカラム。

従来のCSSボックスモデルでは、要素の内容は対応する要素のコンテンツボックスに流し込まれます。マルチカラムレイアウトは、フラグメンテーションコンテキストを導入し、匿名のフラグメンテーションコンテナからなるカラムボックス（略してカラム）を形成します。これらのカラムボックスは独立したブロックフォーマットコンテキストを確立し、マルチカラムコンテナの内容が流し込まれます。また、非positionedな子要素の包含ブロックとなります。

この例では、画像の幅が次のルールで設定されています：

img {
  display: block;
  width: 100%;
}

カラムボックスが新しいブロックフォーマットコンテキストを作るため、 widthはカラムボックスを基準に計算されます。したがって画像はカラムボックスからはみ出しません：

an image contained inside a column box — 画像は表示されているカラムボックスによって制約されています。

カラムボックスが新しいブロックフォーマットコンテキストを作るため、マルチカラムコンテナの最初の子要素で設定されたtop marginはマルチカラムコンテナのマージンと折り畳まれません。

最初の段落上部のマージンは折り畳まれず、マルチカラムコンテナ内の最初の行の上に1emの余白が残っています。

テスト

マルチカラムレイアウト内に現れるfloatは、 floatが現れるカラムボックスを基準に配置されます。

この例では、画像の表示を次のCSSで記述しています：

img {
  display: block;
  float: right;
}

HTMLでは、画像は「the leg of a chicken」で文が終わった後に現れます。

カラムボックス内でfloatされた画像 — 画像は現れるカラムボックス内でfloatされています。

カラムボックス内で内容がブロック軸方向にフラグメントされてオーバーフローすると、次のカラムボックスへ続きます。

注: 匿名ボックスであるカラムボックスは、包含ブロックにはなりません絶対位置指定ボックスのための。そのようなボックスの包含ブロックを確立するpositionプロパティは、 multicol container（principal box）に適用されます。

テスト

この例では、multi-column containerにposition: relativeが設定されているため、包含ブロックとなります。画像はmulti-column containerの直接の子であり、 position: absoluteが設定されています。画像の位置はmulti-column containerを基準に決まり、 column boxを基準にはしません。

.container {
  position: relative;
  column-count: 3;
}
img {
  position: absolute;
  top: 20px;
  left: 40px}

絶対位置指定された画像は [=multi-column container=] を基準に配置されており、[=column box=] ではありません。 — この図は、絶対位置指定された画像がcolumn boxではなくmulti-column containerを基準に配置されることを示しています。

multi-column containerのフロー外の子孫は、カラムのバランス調整やmulti-column containerのblock-sizeに影響します。

テスト

カラムボックスは、multicol containerのインライン基準方向で並べられ、 multicol lineとして配置されます。 column widthはカラムボックスのインライン方向の長さです。 column heightはカラムボックスのブロック方向の長さです。 1行内のすべてのカラムボックスは同じcolumn widthを持ち、 1行内のすべてのカラムボックスは同じcolumn heightを持ちます。

テスト

以下のテストはカラム内容のベースライン揃えに関するもので、これは本仕様書では定義されていません。

以下のテストは、multi-column containerでもあるリスト項目の挙動を確認します。

multi-col内のグリッド項目のテスト

balance-grid-001.html (ライブテスト) (ソース)

以下のテストはtable要素の挙動を確認します。

以下のテストは描画順序が正しいことを確認します。

以下のテストは、マルチカラムプロパティのアニメーションや変形に関連しています。

特定の規定テキストに関連しない実装バグに関するテスト。

マルチカラムに関連する印刷およびページメディアに関するテスト。

注: 縦書きモードで設定されたテキストでは、ブロック方向は水平方向に進みます。縦書きモードではカラムは水平方向に配置され、ブロックの流れの方向は右から左、または左から右のいずれかになります。 column-widthプロパティはそのため、カラムのインラインサイズを指し、実際の物理的な横幅を指すものではありません。

最初の画像は左から右（LTR）のインライン方向の横書きテキスト。二番目は右から左（RTL）のブロック流れの縦書きテキスト。三番目は左から右（LTR）のブロック流れの縦書きテキスト。 — 書字モードによってカラムの配置がどのように異なるかを示す図です。
左から順に: horizontal-tb, vertical-rl, vertical-lr。

テスト

縦書きモードに関するテスト。

マルチカラムコンテナ内の各multicol lineでは、隣接するカラムボックスはカラムギャップで分離されており、そのギャップにはカラム罫線が含まれる場合があります。同じマルチカラムコンテナ内のすべてのカラムギャップは等しいです。また、同じマルチカラムコンテナ内のすべてのカラム罫線も、表示されていれば等しくなります。カラム罫線は両方のカラムに内容がある場合のみ表示されます。

最も単純な場合、multicolコンテナには1行のカラムしか含まれず、各カラムの高さはマルチカラムコンテナのコンテンツボックスの使用高さと同じになります。しかし、フラグメンテーションやスパンナーによってマルチカラムコンテナの内容が複数のmulticol lineに分割されることがあります。

マルチカラムコンテナがページ分割されている場合、各カラムの高さはページによって制約され、内容は次のページの新しいカラムボックスの行に続きます。カラムボックスがページをまたいで分割されることはありません。

同じ効果は、スパン要素がマルチカラムコンテナを分割する場合にも発生します。スパン要素の前のカラムはバランスよく短くなり、その内容に合わせて調整されます。スパン要素の後の内容は、新しいカラムボックスの行に流し込まれます。

スパン要素によって上部のカラムが短くなり、下部の新しいカラムでテキストが続く図 — スパン要素がmulticolコンテナを分割する様子を示す図。

マルチカラムコンテナは、通常のブロックコンテナであり、新しい独立したフォーマットコンテキストを確立します。その内容は一連のmulticol lineとmulticolスパンナーから構成されます。各multicol lineはブロックレベルボックスとして機能し、そのカラムボックスに対してマルチカラムフォーマットコンテキストを確立します。また、スパンナーはブロックレベルボックスとして機能し、その型に応じた独立したフォーマットコンテキストを確立します（通常通りdisplay値による）。

マルチカラムコンテナのネストも可能ですが、実装依存の制限がある場合もあります。

テスト

注: カラムボックスにプロパティや値を設定することはできません。例えば、特定のカラムボックスの背景を設定したり、カラムボックスにパディング・マージン・ボーダーの概念を持たせることはできません。今後の仕様で追加機能が導入される可能性があります。例えば、異なる幅や異なる背景色のカラムをサポートするようになるかもしれません。

注: カラム高さがビューポートより大きいmulticolコンテナはアクセシビリティ上の問題となる場合があります。詳細はアクセシビリティに関する考慮事項をご覧ください。

3. カラム数とカラム幅

マルチカラムコンテンツをレイアウトする際、カラム数とカラム幅を決定することは基本です。これらのプロパティでカラム数とカラム幅を設定します：

column-count
column-width

三つ目のプロパティcolumnsは、 column-widthと column-countの両方を設定するショートハンドプロパティです。

明示的なカラム改ページ、内容、高さ制約などの他の要素も、実際のカラム数やカラム幅に影響する場合があります。

3.1. カラムのインラインサイズ：column-widthプロパティ

名前:	column-width
値:	auto \| <length [0,∞]>
初期値:	auto
適用対象:	ブロックコンテナ（ただしtable wrapper boxは除く）
継承:	no
百分率:	該当なし
算出値:	キーワードautoまたは絶対長さ
標準順序:	文法通り
アニメーション型:	算出値型による

このプロパティはmulticolコンテナのカラムの幅を記述します。

auto

他のプロパティ（例えばcolumn-countがauto以外の場合など）によってカラム幅が決定されることを意味します。

<length [0,∞]>

最適なカラム幅を記述します。実際のカラム幅は、利用可能なスペースに応じてより広くなる場合があります。また、指定されたカラム幅より少ないスペースしかない場合は、より狭くなることもあります。負の値は許可されません。使用値は最低1pxにクランプされます。

テスト

例えば、次のスタイルシートを考えてみましょう：

div {
  width: 100px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}

100px幅の要素の内部には、45px幅のカラムが2つ入る余地があります。利用可能なスペースを埋めるために、実際のカラム幅は50pxに増加します。

また、次のスタイルシートを考えてみましょう：

div {
  width: 40px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}

利用可能なスペースが指定されたカラム幅より小さいため、実際のカラム幅は縮小されます。

column-widthプロパティを縦書きテキストでも使えるようにするため、カラム幅はカラム内の行ボックスの長さを意味します。

注: column-widthをある程度柔軟にしている理由は、多様な画面サイズに適応したスケーラブルなデザインを実現するためです。カラム幅を正確に指定するには、カラムギャップとmulticolコンテナの幅（横書きの場合）も指定する必要があります。

3.2. カラム数：column-countプロパティ

名前:	column-count
値:	auto \| <integer [1,∞]>
初期値:	auto
適用対象:	ブロックコンテナ（ただしtable wrapper boxは除く）
継承:	no
百分率:	該当なし
算出値:	指定値
標準順序:	文法通り
アニメーション型:	算出値による

このプロパティはmulticolコンテナのカラム数を記述します。

auto: カラム数は他のプロパティ（例えばcolumn-widthがauto以外の場合など）によって決定されることを意味します。
<integer [1,∞]>: 要素の内容が流し込まれる最適なカラム数を記述します。値は0より大きくなければなりません。 column-widthとcolumn-countの両方がauto以外の場合、整数値は最大カラム数を示します。

テスト

例:

body { column-count: 3 }

3.3. column-widthとcolumn-countのショートハンド：columnsプロパティ

名前:	columns
値:	<'column-width'> \|\| <'column-count'>
初期値:	各個別プロパティを参照
適用対象:	各個別プロパティを参照
継承:	各個別プロパティを参照
百分率:	各個別プロパティを参照
算出値:	各個別プロパティを参照
アニメーション型:	各個別プロパティを参照
標準順序:	文法通り

これはcolumn-widthとcolumn-countを設定するためのショートハンドプロパティです。省略された値は初期値になります。

columnsプロパティを使った有効な宣言例：

columns: 12em;      /* column-width: 12em; column-count: auto */
columns: auto 12em; /* column-width: 12em; column-count: auto */
columns: 2;         /* column-width: auto; column-count: 2 */
columns: 2 auto;    /* column-width: auto; column-count: 2 */
columns: auto;      /* column-width: auto; column-count: auto */
columns: auto auto; /* column-width: auto; column-count: auto */

テスト

3.4. 疑似アルゴリズム

下記の疑似アルゴリズムは、column-count（N）とcolumn-width（W）の使用値を決定します。疑似アルゴリズムにはもう一つの変数があります：Uはマルチカラムコンテナの使用幅です。

注: マルチカラムコンテナの使用幅Uは要素の内容によって決まる場合があり、その場合、column-countやcolumn-widthプロパティの算出値にも依存します。この仕様ではUの算出方法は定義されていません。他のモジュール（おそらくBasic Box Model [CSS3BOX]やBox Sizing Module [CSS3-SIZING]）で定義される予定です。

テスト

floor(X)関数は、X以下の最大の整数Yを返します。

(01)  if ((column-width = auto) and (column-count = auto)) then
(02)      exit; /* not a multicol container */
(03)  if column-width = auto then
(04)      N := column-count
(05)  else if column-count = auto then
(06)      N := max(1,
(07)        floor((U + column-gap)/(column-width + column-gap)))
(08)  else
(09)      N := min(column-count, max(1,
(10)        floor((U + column-gap)/(column-width + column-gap))))

そして：

(11)  W := max(0, ((U + column-gap)/N - column-gap))

自動繰り返しカラム数を求める際、UAはゼロ除算を避けるためにカラムサイズをUA指定値まで切り捨てなければなりません。この下限値は1px以下が推奨されます。

ページメディアなどのフラグメント化されたコンテキストでは、ユーザーエージェントはこの計算をフラグメントごとに行う場合があります。

column-countの使用値は明示的なカラム改ページや高さ制約を考慮せずに計算されますが、実際の値はそれらも考慮されます。

テスト

column-count-used-001.html (ライブテスト) (ソース)

この例では、明示的なカラム改ページのために実際のcolumn-countが使用値より多くなっています：

div {
  width: 40em;
  columns: 20em;
  column-gap: 0;
}

p {
  break-after: column;
}

<div>
  <p>one
  <p>two
  <p>three
</div>

Two columns drawn inside the container, one outside — 計算されたcolumn-countはauto、使用値は2、実際のcolumn-countは3です。

実際のcolumn-countが使用値より少なくなることもあります。この例を考えてみましょう：

div {
  width: 80em;
  height: 10em;
  columns: 20em;
  column-gap: 0;
  column-fill: auto;
}

<div>foo</div>

計算されたcolumn-countはauto、使用値は4、実際のcolumn-countは1です。

3.5. スタッキングコンテキスト

マルチカラムコンテナ内のすべてのカラムボックスは同じスタッキングコンテキストに属し、内容の描画順序はCSS 2.1で指定された通りです。カラムボックスは新しいスタッキングコンテキストを確立しません。

テスト

multicol-rule-stacking-001.xht (ライブテスト) (ソース)

4. カラムギャップと罫線

カラムギャップと罫線は同じmulticolコンテナ内のカラム間に配置されます。カラムギャップと罫線の長さはカラムの高さと等しくなります。カラムギャップはスペースを占めます。つまり、カラムギャップは隣接するカラムの内容を（同じmulticolコンテナ内で）離して配置します。

テスト

カラム罫線はカラムギャップの中央に描画され、端点はmulticolコンテナの対向するコンテンツ端に位置します。カラム罫線はスペースを占有しません。つまり、カラム罫線の有無や太さによって他のものの配置が変わることはありません。カラム罫線がギャップより太い場合、隣接するカラムボックスは罫線に重なり、罫線がmulticolコンテナのボックス外にまで伸びることがあります。カラム罫線はmulticolコンテナのボーダーのすぐ上に描画されます。スクロール可能なmulticolコンテナの場合、コンテナのボーダーや背景は当然スクロールしませんが、罫線はカラムと一緒にスクロールする必要があります。カラム罫線は、両方のカラムに内容がある場合のみ描画されます。

テスト

基本的なカラム罫線のテスト

カラム罫線がギャップよりも太い場合、隣接するボックスが重なります。

multicol-rule-001.xht (ライブテスト) (ソース)
multicol-rule-large-001.xht (ライブテスト) (ソース)
multicol-rule-large-002.xht (visual test) (ソース)

カラム罫線は、両方のカラムに内容がある場合のみ描画されます。

背景やカラム罫線の挙動に関するテスト。

4.1. カラム間のガター：column-gapプロパティ

column-gapプロパティは[CSS3-ALIGN]で定義されています。

マルチカラムフォーマットコンテキストにおいて、normalがcolumn-gapプロパティの使用値となる場合、その値は1emです。これにより初期値が使われてもカラムが読みやすく保たれます。カラム間にカラム罫線がある場合、罫線はギャップの中央に表示されます。

テスト

ギャップがアニメーション可能であることをテストします。

4.2. カラム罫線の色：column-rule-color プロパティ

名前:	column-rule-color
値:	<color>
初期値:	currentcolor
適用対象:	multicolコンテナ
継承:	no
百分率:	該当なし
算出値:	算出された色
標準順序:	文法通り
アニメーション型:	算出値型による

<color>: カラム罫線の色を指定します。

テスト

4.3. カラム罫線のスタイル：column-rule-style プロパティ

名前:	column-rule-style
値:	<line-style>
初期値:	none
適用対象:	multicolコンテナ
継承:	no
百分率:	該当なし
算出値:	指定されたキーワード
標準順序:	文法通り
アニメーション型:	離散的

column-rule-styleプロパティは、要素のカラム間に表示される罫線のスタイルを設定します。 <line-style>の値は、ボーダーの折りたたみモデルと同様に解釈されます。

テスト

none値は、column-rule-widthの算出値を0に強制します。

4.4. カラム罫線の幅：column-rule-width プロパティ

名前:	column-rule-width
値:	<line-width>
初期値:	medium
適用対象:	multicolコンテナ
継承:	no
百分率:	該当なし
算出値:	絶対長さ、ボーダー幅としてスナップされた値; カラム罫線スタイルがnoneまたはhiddenの場合は0
標準順序:	文法通り
アニメーション型:	算出値型による

このプロパティはカラム間の罫線の幅を設定します。負の値は許可されません。

テスト

4.5. カラム罫線のショートハンド：column-ruleプロパティ

名前:	column-rule
値:	<'column-rule-width'> \|\| <'column-rule-style'> \|\| <'column-rule-color'>
初期値:	各個別プロパティを参照
適用対象:	各個別プロパティを参照
継承:	各個別プロパティを参照
百分率:	各個別プロパティを参照
算出値:	各個別プロパティを参照
アニメーション型:	各個別プロパティを参照
標準順序:	文法通り

このプロパティは、column-rule-width、column-rule-style、column-rule-colorをスタイルシート上で同時に設定するためのショートハンドです。省略された値は初期値になります。

テスト

この例では、カラム罫線とカラムギャップが同じ幅です。そのため、両者はまったく同じスペースを占めます。

body {
  column-gap: 35px;
  column-rule-width: 35px;
  column-rule-style: solid;
  column-rule-color: black;
}

罫線がギャップを完全に覆う様子。 — カラム罫線とカラムギャップが同じスペースを占めます。

テスト

5. カラム区切り

コンテンツが複数のカラムにレイアウトされる場合、ユーザーエージェントはカラム区切りの位置を決定しなければなりません。コンテンツをカラムに分割する問題は、ページに分割する問題と似ており、これはCSS 2.1の13.3.3節[CSS21]で説明されています。

カラム区切りをページ区切りと同じプロパティで指定できるように、3つの新しいプロパティが導入されています：break-before、break-after、break-insideです。

5.1. 分割制御：break-before、break-after、break-insideプロパティ

break-before、break-after、break-insideは[CSS3-BREAK]で定義されています。

テスト

multicol-break-000.xht (ライブテスト) (ソース)
multicol-break-001.xht (ライブテスト) (ソース)
multicol-br-inside-avoidcolumn-001.xht (ライブテスト) (ソース)
moz-multicol3-column-balancing-break-inside-avoid-1.html (manual test) (ソース)

6. カラムのまたぎ

column-spanプロパティを使うことで、要素を複数のカラムにまたがって配置することができます。

6.1. 要素をカラムにまたがらせる：column-spanプロパティ

名前:	column-span
値:	none \| all
初期値:	none
適用対象:	フロー内のブロックレベル要素
継承:	no
百分率:	該当なし
算出値:	指定されたキーワード
標準順序:	文法通り
アニメーション型:	離散的

テスト

column-span-invalid.html (ライブテスト) (ソース)

このプロパティは要素がいくつのカラムにまたがるかを指定します。値は以下の通りです：

none

要素は複数のカラムにまたがりません。

テスト

multicol-span-none-001.xht (ライブテスト) (ソース)

all

要素はカラム区切りを強制し、フロー外となって、最も近いマルチカラム祖先のすべてのカラムにまたがります（同じブロックフォーマットコンテキスト内）。通常フローの内容で要素より前に現れるものは、直前のマルチカラム行内で自動的にすべてのカラムに均等に分配され、要素の後のコンテンツは新しいマルチカラム行に流し込まれます。この要素は独立したフォーマットコンテキストを確立します。

注: この要素が新しいフォーマットコンテキストを確立するかどうかは、要素がマルチカラムの子孫かどうかには依存しません。 column-spanがallのときは必ず確立します。これは、後でマルチカラムが削除された場合や、メディアクエリで特定状況下でマルチカラムが無効化された場合でも、デザインの堅牢性を高めるためです。

テスト

複数のカラムにまたがる要素は、マルチカラムスパン要素と呼ばれ、その要素が作成するボックスはマルチカラムスパンナーと呼ばれます。

スパンナーの包含ブロックはマルチカラムコンテナ自体です。そのため、スパンナー自体が包含ブロックを確立しない場合、スパンナー内の絶対位置指定ボックスの包含ブロックチェーンは、マルチカラムコンテナまで直接スキップします（スパンナーとマルチカラムコンテナの間の祖先はスキップされます）。

スパンナーはフロー外となりますが、これはスパン要素の描画順序 [CSS21]には影響しません。

この例では、h2要素がサンプル文書の6番目の文の後（つまり "the leg of a" の後）に追加されています。このスタイルが適用されます：

h2 { column-span: all; background: silver }

column-spanにallを設定すると、 h2要素より前に現れるすべてのコンテンツがh2要素の上に表示されます。

要素が3つのカラムすべてにまたがる — h2要素が column-span: all に設定されています

スパンナーがマルチカラム行を分割するため、カラム罫線も中断されることに注意してください（罫線はマルチカラム行内のカラム間のみ描画されます）。

スパン要素は、同じフォーマットコンテキストに属していて、スパン要素とマルチカラムコンテナの間に固定位置子孫のための包含ブロックを確立するものがなければ、第一レベルの子孫より深い階層にあっても問題ありません。

この例では、column-span: allを持つ要素が、transform: rotate(90deg)を持つ要素の内側に入っています。 transformは固定位置子孫のための包含ブロックを確立するため、スパンナーは作成されません。

<article>
  <section>
    <div class="spanner">試みられたスパンナー</div>
  </section>
</article>

article {
  columns: 2;
}

section {
  transform: rotate(90deg);
}

.spanner {
  column-span: all;
  background: silver;
}

テスト

スパンナーの前のフラグメントが空の場合、特別なことは何も起こりません。上部のマージン／ボーダー／パディングは、空のフラグメントとしてスパン要素の上に表示されます。

この例では、マルチカラムコンテナは article要素です。この親要素の中には段落とsection要素が入っています。 sectionにはallが設定されたh2見出しがあり、これは3つのカラムすべてにまたがりますが、そのsection自体はカラムボックス内にとどまります。

h2はsectionの最初の子要素です。つまり、このセクションのマージン、ボーダー（図中赤色で示される）、パディングは、空のフラグメントとしてスパンするh2の前に現れます。

<article>
  <p>...</p>
  <section>
    <h2>An h2 element</h2>
    <p>...</p>
  </section>
</article>

section {
  border: 2px solid red;
  margin-top: 65px;
  padding-top: 20px;
}

h2 {
  column-span: all;
  background: silver
}

要素が3つのカラムすべてにまたがり、sectionの赤いボーダーはスパンナーの前で切れる。 — `h2`要素はcolumn-span: allに設定されており、 sectionには赤いボーダーと上側のパディング、マージンがあります

テスト

スパン要素は、通常よりも多くのスペースを占有します。スペースが限られている場合、スパン要素のための空間を確保できないことがあります。このような場合、ユーザーエージェントはこのプロパティにnoneが指定されたかのように扱うことがあります。

この例では、h2要素がコンテンツの後半に現れ、マルチカラムコンテナの高さが制限されています。そのため、h2要素はオーバーフロー内に現れ、要素をスパンさせるための空間がありません。結果として、この要素はcolumn-span: noneが指定されたかのように表示されます。

h2要素がオーバーフローカラムにある — h2要素はオーバーフローカラムにあり、column-span noneが指定されたかのように表示されます

この例は前の例に似ていますが、 H2要素が自然に最後のカラムに現れます。それでも、要素をスパンさせるための空間が十分ではありません。

h2要素が最終カラムにある — h2要素は最終カラムにあり、column-span noneが指定されたかのように表示されます

テスト

multicol-span-all-002.xht (ライブテスト) (ソース)

フラグメント化されたコンテキストでは、スパン要素はすべてのフラグメントで尊重されます。この例では、ページメディア環境で、最初の3つの段落の後にカラム区切りがあります。スパンするH2要素は4番目の段落の後に現れます。

3カラムすべてにまたがるスパン要素、上下にテキスト — これは2ページ目に表示されます

スパンナーはブロックレベルのボックスなので、 2つの隣接するスパンナーのマージンは互いに折り重なります（collapse）。絶対配置されたアイテムだけで分離された2つのスパンナーのマージンも折り重なります。絶対配置アイテムはカラムボックスを作成しないためです。カラムボックスは新しいブロックフォーマットコンテキストを確立するため、カラムボックス内の要素のマージンはスパンナーのマージンとは折り重なりません。

テスト

スパンナーは新しいフォーマットコンテキストを確立しますが、そのマージンは周囲の状況によって変化します。この例では、2つのスパンナーが自然にページの先頭に並びます。最初のスパンナーの上部マージンは、強制されない区切りと隣接しているため短縮されます。 2つのスパンナー間のマージンは互いに折り重なります。しかし、2番目のスパンナーの下部マージンは、次の要素の上部マージンとは折り重なりません。

h2 {
  margin: 16px 0;
  column-span: all;
  background: silver
}
p { margin-top: 16px }

2つのスパン要素間ではマージンが折り重なりますが、スパンナーの下部と次要素の上部マージンは折り重なりません。

テスト

スパンナー関連の追加テスト。

7. カラムの充填

カラムを充填するための戦略は2つあります：カラムを均等に分配（バランス）するか、分配しないかです。カラムを均等に分配する場合、ユーザーエージェントはカラムの高さのばらつきを最小限に抑えるよう努めるべきですが、強制的な改行、widowsやorphansなど、カラムの高さに影響する他のプロパティも尊重します。カラムをバランスしない場合、順番に内容が入れられます；一部のカラムは部分的にしか埋まらなかったり、全く内容が入らないこともあります。

7.1. カラムの均等分配：column-fillプロパティ

名前:	column-fill
値:	auto \| balance \| balance-all
初期値:	balance
適用対象:	multicolコンテナ
継承:	no
百分率:	該当なし
算出値:	指定されたキーワード
標準順序:	文法通り
アニメーション型:	離散的

このプロパティはマルチカラム行の内容が直前にスパンナーに続かない場合、カラム間で均等に分配されるかどうかを指定します。

テスト

値は以下の通りです：

balance

できる限りカラム間で均等に内容を分配します。フラグメント化されたコンテキストでは、最後のフラグメントだけが均等に分配されます。

テスト

balance-all

できる限りカラム間で均等に内容を分配します。フラグメント化されたコンテキストでは、すべてのフラグメントが均等に分配されます。

auto

カラムを順番に埋めていきます

テスト

連続的なコンテキストでは、オーバーフローカラムが存在する場合、このプロパティは効果を持ちません。

この例では、記事には短い段落が1つだけあり、3行に収まります。カラムバランスのため、3行は別々のカラムに表示されます。

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

4つのカラム、最初の3つに内容がある。 — カラムバランスにより、3行が3つのカラムに表示されます。

この例ではカラムバランスがオフになっており、記事には高さが指定されています:

article {
  width: 60em;
  height: 4em;
  columns: 4;
  column-fill: auto;
}

その結果、すべての内容が最初のカラムに詰め込まれます:

4つのカラム、最初のカラムだけ内容がある。 — バランスしないので、テキスト全体が1つの段落として表示されます。

この例では、記事に2つの段落があります：最初は長文、次は短めです。以下のコードが適用されます:

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

p {
  break-after: column;
}

最も短いカラムの高さは5行のテキストを含みます。カラムの高さが決定された後、カラムは順番に埋められます。その結果、3番目のカラムは最初の2つのカラムと同じ高さになり、最後のカラムはかなり短くなります。

4つのカラム、すべてに内容がある。 — カラムの高さが確定した後、カラムは順番に埋められます。

article {
  width: 60em;
  height: auto;
  columns: 4;
  column-fill: balance;
}

この例では、記事は分割できないfigureで始まり、そのfigureがカラムの高さを決定します。以降の内容は残りのカラムに順番に埋められます:

カラム1に画像、2と3に内容。 — カラムの高さはfigureによって決まります。

テスト

カラムバランスとフロー外要素の組み合わせに関するテスト。

その他のバランス調整に関するテスト

8. オーバーフロー

8.1. マルチカラムコンテナ内のオーバーフロー

カラム区切りを引き起こす場合を除き、カラムボックスの外にはみ出したコンテンツは目に見えてオーバーフローし、column boxにクリップされません。

注: カラム区切りについては§ 5 カラム区切り、マルチカラムコンテナの内容ボックスにクリップされるかどうかは§ 8.2 マルチカラムコンテナ外のページ分割とオーバーフローを参照してください。

この例では、画像がカラムよりも幅広です:

最初のカラムの画像がはみ出して表示されている — コンテンツが目に見えてオーバーフローし、カラムボックスにクリップされません。

テスト

8.2. マルチカラムコンテナ外のページ分割とオーバーフロー

マルチカラムコンテナの端でカラムボックスの外にはみ出したコンテンツやカラム罫線は、overflowプロパティに従ってクリップされます。

マルチカラムコンテナは、次の理由で、表示可能な領域より多くのカラムを持つことがあります：

カラムの高さを制限する宣言（例：heightや max-heightの使用）。この場合、追加のカラムボックスがインライン方向に作成されます
ページのサイズ。この場合、追加のカラムボックスは次のページへ移動します。
明示的なカラム区切り。この場合、連続的コンテキストでは追加のカラムボックスがインライン方向に作成され、フラグメント化メディアでは追加のカラムボックスが次のフラグメントへ移動します。

テスト

スクロール可能なコンテナが複数のカラムに分割されないことを確認するテストです。

連続的なコンテキストでマルチカラムコンテナの外側に現れるカラムは、オーバーフローカラムと呼ばれます。オーバーフローカラムはマルチカラムコンテナの高さに影響を与えることがあります。

この例では、マルチカラムコンテナの高さが最大値に制限されています。また、スタイルシートではオーバーフローした内容が表示されるように指定されています:

div {
  max-height: 5em;
  overflow: visible;
}

その結果、カラム数が増加します。

4つのカラム、1つがマルチカラムコンテナの外にある — オーバーフローカラムがインライン方向に作成されます。

連続的なコンテキストでは、オーバーフローカラムがマルチカラムコンテナの高さに影響を与えることがあります。この例では、オーバーフロー内に4行のテキストがあるカラムが現れます。マルチカラムコンテナはこのカラムを収容できる高さとなっています。

4つのカラム、オーバーフローカラムが他の3つより高い — 最後のカラムはオーバーフローカラムですが、他のカラムよりも高くなっています。コンテナはこのカラムに合わせた高さです。

フラグメント化されたコンテキストでは、オーバーフローした内容は次のフラグメントのカラムへ移動します。例31と同じ内容と、ページボックスが整形済みテキスト5行分しかスペースがない場合、これは1ページ目に表示されます:

カラムバランスがあると仮定すると、2ページ目には次のように表示されます:

この例では、段落の後に明示的なカラム区切りが生成されます:

p {
  break-after: column;
}

その結果、カラム数が増加し、余分なカラムがインライン方向に追加されます:

ページメディアでは、余分なカラムは次のページに表示されます。前の例と同じコードの場合、最後の段落は2ページ目に表示されます。これは1ページ目に表示されます:

これは2ページ目に表示されます:

カラムバランスのため、最後の段落は3つのカラムに分割されます。

付録B. 変更点

この付録は参考情報です。

2021年10月12日版候補勧告(CR)からの変更点

「spanning要素とmulticol containerの間に固定位置子孫のための包含ブロックを確立する要素が何もない場合」という文言を追加。2022年3月9日解決

2021年2月12日版作業草案(WD)からの変更点

「マルチカラムコンテナのフロー外の子孫はカラムバランスやマルチカラムコンテナのblock-sizeに影響する」という文言を追加。2021年5月12日解決
「絶対配置アイテムだけで分離された2つのスパンナーのマージンも互いに折り重なる」という文言を追加。2021年5月12日解決
アクセシビリティ考慮事項セクションを追加。APAからの要望
縦書きモードでのカラムレイアウトについて説明と例を追加。i18n WGからの要望

2019年10月15日版作業草案(WD)からの変更点

「spannerがspanner内の絶対配置ボックスの包含ブロックとなり、そうでない場合はmulticol containerまで包含ブロックが遡る」と追加。2020年10月23日解決
「multi-column lineが直前にspannerに続かない場合、カラム間で均等分配されるかどうかを指定する」という文言を追加。2020年4月29日解決

2018年5月28日版作業草案(WD)からの変更点

「しかし、下記の通り、widthとcolumn数を両方指定することはほとんど意味がない」という非規範的文言を削除。2019年9月16日編集、issue 4291参照。
「スパンナーはブロックレベルのボックスなので、隣接する2つのスパンナーのマージンは互いに折り重なる。カラムボックスは新しいブロックフォーマットコンテキストを確立するため、カラムボックス内の要素のマージンはスパンナーのマージンとは折り重ならない。」という段落を追加。2018年10月22日解決、issue 2582も参照。
スパンナー要素がフロー外になり、強制区切りが残ることを仕様で明確化。段落を追加「スパンナー要素はフロー外となり、強制的な区切りが残る。これはスパンナーの描画順序には影響しない。」2019年2月28日解決。
column-gapプロパティの定義を[CSS3-ALIGN]に移し、multicolでの詳細を追加:
「multi-columnフォーマットコンテキストでは、column-gapプロパティのnormalの使用値は1em。初期値を使った場合でもカラムが読みやすくなる。カラム間に罫線がある場合はgap中央に表示される。」2019年6月4日解決。
The multi-column modelセクションを、issue 2203でのMorten Stenshorne氏の提案を元に書き直しました。
column-gapのlength-percentage値からat-riskマーカーを削除。2019年6月4日解決。
multicolの利点をテーブルレイアウトとの比較から、multicolの特性自体に言及するように導入文を編集。issue 3654参照。
2016年1月7日の決議後に擬似アルゴリズムセクションに追加された文章を、tracksではなくcolumnsに言及するよう修正。tracksはこの仕様内で定義されていないため。2019年3月13日解決。
仕様で使用するSVG画像の変更および明確化。
負の値／ゼロ値の制限について文法を括弧付き範囲表記に変更し、本文での説明と整合。

2017年10月5日版作業草案(WD)からの変更点

ページメディアへの参照をフラグメント化コンテキストへの参照に変更。2018年4月12日解決。
column-fillプロパティについての記述を変更:
In continuous media, this property does not have any effect in overflow columns.
→
In continuous media, this property does not have any effect when there are overflow columns.2018年4月12日解決
オーバーフローカラムがコンテナの高さに影響を与えることを示す文と例を追加。2018年4月12日解決
HTMLの例をSVGバージョンに置き換え、例の明瞭化。issue 1087。
column-gapのnormal値をUA指定長ではなく1emに変更し、1emを推奨。2018年4月4日解決
column-widthで負の値は不可、0は指定可能だが使用値は1px以上にクランプされると明記。2018年3月14日解決
スパンナー要素が現れる直前のカラム行は自動的に全カラムで均等分配されることを明確化。2017年11月9日解決
スパンナー要素が下位の子孫にもなり得ること、およびスパンナー要素を含む要素のマージン・ボーダー・パディングがスパンナーの上に描画されることを明確化する説明と例を追加。2017年11月8日解決
Column rules are painted in the inline content layer, but below all inline content inside the multicol element.という文を Column rules are painted just above the border of the multicol element. For scrollable multicol elements, note that while the border and background of the multicol element obviously aren’t scrolled, the rules need to scroll along with the columns.に変更。2017年11月7日解決
「マルチカラムを適用した要素」をmulti-column/multicol「element」からmulti-column/multicol「container」に参照を変更。2017年11月22日解決
「背の高い画像が次のページのカラムに移動した場合、その画像の元カラムが空になることがある。その場合でも罫線描画の判断上は内容ありとみなす」という例を削除。2017年9月7日解決

2011年4月12日版候補勧告(CR)からの変更点。

2016年7月の決議によりトラックサイズの下限をUA指定値とし、CSS Grid仕様と統一。2016年1月7日解決
column-fillがオーバーフローカラムに効果がない旨の記述から「overflow columns only being in continuous media」という制限を削除。2013年9月解決
balance-allキーワードとその例を追加し動作方法を明示。2013年9月解決
擬似アルゴリズムは度々改訂。最新2013年2月
columns、column-width、column-countは「block container」に適用されると明記。2013年2月参照
区切りプロパティはこの仕様からCSS Fragmentation Moduleへ移動。
column-fillはページ区切りの前に適用される旨を明記。2012年1月参照
マージンの折り重なりやスパン要素の扱いについて例と解説を追加。2013年10月参照
column-rule-widthがカラムのサイズや配置を変更しないことを明記。2013年9月参照
各スパン要素が個別のBFCを確立し、マージンが折り重なる旨を追加。2011年12月参照
カラム罫線はインラインコンテンツ層で描画されるが、multicol内のインラインコンテンツより下に描画される。2013年2月参照
column-spanは、multicolでなくても要素がフォーマットコンテキストを確立することがあると明確化。
スパンナーは常にブロックのフォーマットコンテキストを確立するわけではない。
column-gapが<length-percentage>を受け入れるように変更。<length>のみではなく。
column-widthとcolumn-countはblock container（table wrapper boxを除く）に適用。
カラムからオーバーフローした内容はクリップされません。

プライバシーに関する考慮事項

マルチカラムは新たなプライバシー漏洩を引き起こしません。

セキュリティに関する考慮事項

マルチカラムは新たなセキュリティ上の問題を引き起こしません。

コンテナの高さや行の長さの設定は、視覚障害や認知障害のある人々にとって課題となる場合があります。 WCAG成功基準1.4.10 Reflowや WCAG 1.4.8 視覚的提示を参照してユーザーのニーズを理解してください。

謝辞

この文書は過去の複数の提案やそのコメントに基づいています。貢献者は以下の通りです：

Alex Mogilevsky、 Andy Clarke、 Anton Prowse、 Bert Bos、 Björn Höhrmann、 Cédric Savarese、 Chris Lilley、 Chris Wilson、 Daniel Glazman、 Dave Raggett、 David Hyatt、 David Singer、 David Woolley、 Elika Etemad、 Giovanni Campagna、 Ian Hickson、 Joost de Valk、 Kevin Lawver、 L. David Baron、 Markus Mielke、 Melinda Grant、 Michael Day、 Morten Stenshorne、 Øyvind Stenhaug、 Peter Linss、 Peter-Paul Koch、 Robert O’Callahan、 Robert Stevahn、 Sergey Genkin、 Shelby Moore、 Steve Zilles、 Sylvain Galineau、 Tantek Çelik、 Till Halbach

適合性

文書の規約

適合性要件は、記述的な主張とRFC 2119の用語の組み合わせで表現されています。規範的な部分で使われる “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, “OPTIONAL” というキーワードはRFC 2119の定義通りに解釈されます。ただし、可読性のため、この仕様書ではこれらの単語はすべて大文字ではありません。

この仕様書のすべての文章は規範的ですが、明示的に非規範的と記載されたセクション、例、およびノートは除きます。[RFC2119]

この仕様書の例は “for example” という言葉で導入されるか、class="example" のように規範的な文から区別して示されます:

参考ノートは “Note” という語から始まり、class="note" によって規範的な文から区別されます:

助言は規範的なセクションであり、特別な注意を促すスタイルになっていて、<strong class="advisement"> によって他の規範的な文章と区別されます。例えば次のようになります: UAはアクセシブルな代替手段を提供しなければなりません。

適合クラス

この仕様書への適合性は、3つの適合クラスで定義されます:

スタイルシートがこの仕様書に適合していると見なされるには、このモジュールで定義された構文を使うすべての文が、汎用CSS文法およびこのモジュールで定義される各機能の個別文法に従って有効である必要があります。

レンダラーがこの仕様書に適合していると見なされるには、適切な仕様に従ってスタイルシートを解釈することに加え、この仕様書で定義されたすべての機能を正しくパースし、文書をそれに従ってレンダリングする必要があります。ただし、UAがデバイスの制限によって文書を正しくレンダリングできない場合でも、それは非適合とはなりません。（例：UAがモノクロモニターで色をレンダリングする必要はありません。）

オーサリングツールがこの仕様書に適合していると見なされるには、スタイルシートを汎用CSS文法およびこのモジュールで定義される各機能の個別文法に従って正しく作成し、このモジュールで説明されるスタイルシートのその他の適合要件もすべて満たす必要があります。

部分的な実装

著者が前方互換性のあるパース規則を利用してフォールバック値を指定できるように、 CSSレンダラーは、サポートできるレベルがない at-ルール、プロパティ、プロパティ値、キーワード、そのほかの構文要素を無効として（そして適切に無視）扱わなければなりません。特に、ユーザーエージェントは複数値プロパティ宣言においてサポートされない値だけを選択的に無視して、サポートされる値だけを適用してはなりません。どれか1つでも値が無効（＝サポート外）とみなされた場合、CSSでは宣言全体を無視しなければなりません。

不安定および独自機能の実装

非実験的な実装

仕様書が候補勧告段階（CR）に達すると、非実験的な実装が可能となり、実装者は仕様に従って正しく実装できていることを示せるCRレベルの機能については、ベンダープレフィックスなしの実装をリリースするべきです。

CSSの相互運用性を確立・維持するために、CSSワーキンググループは、非実験的なCSSレンダラーが、ベンダープレフィックスなしの実装をリリースする前に、実装レポート（必要に応じてそのテストケースも）をW3Cに提出することを求めています。W3Cに提出されたテストケースはCSSワーキンググループによるレビューや修正の対象となります。

テストケースや実装レポートの提出に関する詳細は、CSSワーキンググループのWebサイト https://www.w3.org/Style/CSS/Test/ で確認できます。質問は public-css-testsuite@w3.org メーリングリストまでお寄せください。

CR終了基準

この仕様書が提案勧告（PR）へ進むためには、各機能について少なくとも2つの独立した相互運用可能な実装が必要です。各機能は異なる製品によって実装されてもよく、すべての機能が1つの製品で実装される必要はありません。この基準のため、以下の用語を定義します:

この仕様書は少なくとも6ヶ月間、候補勧告（CR）として維持されます。

CSS マルチカラムレイアウトモジュール レベル 1

概要

この文書のステータス