CSS 多段組みレイアウトモジュール レベル2

1. はじめに

（この節は規範的ではありません。）

このモジュールはCSSにおける多段組みレイアウトについて説明します。 本書で記載されている機能を使うことで、 スタイルシートは要素の内容を複数の段にレイアウトするよう宣言できます。

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

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

多段組みレイアウトはCSSで簡単に記述できます。 以下はシンプルな例です：

body { column-width: 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;
}

column-ruleプロパティの値は、CSSのborderプロパティと同様です。 borderと同じく、column-ruleもショートハンドプロパティです。

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

column-fillやcolumn-spanプロパティにより、 多段組みレイアウトでより多様なビジュアル表現が可能になります。

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

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

すべてのカラムプロパティが初期値の場合、 要素のレイアウトは実質的に1カラムの多段組みレイアウトと同じになります。

カラムギャップ（斜線ハッチ）やカラム罫線を持つ多段組みコンテナの例です（パディングはクロスハッチで表示）。 ハッチ部分は図示のためだけに描かれています。 実装ではこれらの領域は背景で決まります。 2枚目の画像は、多段組みコンテナのカラム罫線の描画例です。

1.1. 値の定義

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

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

2. モジュール間の相互作用

この文書は従来の仕様にはなかった新機能を定義します。 また、最終的には以下を置き換え、廃止します：

• CSS Multi-Column Layout Module Level 1

3. 多段組みモデル

column-widthまたはcolumn-countプロパティがauto以外である要素は、多段組みコンテナ（略してmulticol container）となり、 多段組みレイアウトのコンテナとなります。

従来のCSSボックスモデルでは、 要素の内容は対応する要素の内容ボックス内にフローします。 多段組みレイアウトでは、 分断コンテキストが作られ、 そこに匿名の分断コンテナであるカラムボックス（略してカラム）が並びます。 これらのカラムボックスは 独立したブロック整形コンテキストを確立し、multi-columnコンテナの内容が流れ込みます。 また、カラムボックスは非positionedな子の包含ブロックとなります。

この例では、画像の幅を次のルールで設定しています：

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

カラムボックスが新しいブロック整形コンテキストを作るため、 widthはカラムボックスに対して計算されます。 よって画像がカラムボックスからはみ出すことはありません：

カラムボックスが新しいブロック整形コンテキストを作るため、multicolコンテナの最初の子要素にtopマージンを設定してもmulticolコンテナのマージンとは折り重なりません。

多段組みレイアウト内のfloat要素は、 floatが現れるカラムボックスを基準に配置されます。

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

img {
  display: block;
  float: right;
}

HTMLでは、この画像は "the leg of a chicken" で終わる文の後に登場します。

カラムボックスからブロック軸方向にはみ出した内容は分割され、次のカラムボックスへ続きます。

注: 匿名ボックスであるカラムボックスは、 包含ブロックにはなりません（絶対位置ボックスの）。 そのようなボックスの包含ブロックを確立するpositionプロパティは、 multicolコンテナに適用され、それがプリンシパルボックスとなります。

この例では、multi-column containerがposition: relativeなので包含ブロックになります。 画像はmulti-column containerの直接の子で、 position: absoluteが指定されています。 配置基準はmulti-column containerであり、 カラムボックスではありません。

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

multi-column containerのアウトオブフローの子孫もカラムバランスや multi-column containerのブロックサイズに影響します。

カラムボックスの並び順はmulticol containerのインライン基準方向で決まり、multicol行に配置されます。 カラム幅はインライン方向の長さ、 カラム高さはブロック方向の長さです。 同一行の全カラムボックスは同じカラム幅・高さを持ちます。

注: 縦書きで組まれたテキストではブロック方向は水平方向となります。 縦書きの場合、カラムは水平方向に並び、ブロックの流れ方向は右から左や左から右にもなります。 column-widthプロパティはカラムのインラインサイズ（物理的な横幅ではない）を指します。

multicol行ごとに、 隣接するカラムボックスはカラムギャップで分離され、 そこにはカラム罫線が入る場合もあります。 同じmulti-column container内のカラムギャップ・罫線は全て等しくなります。 カラム罫線は両側に内容があるカラム間だけに現れます。

単純な場合、multicol containerは1行のカラムだけを持ち、 各カラムの高さはmulti-column containerの内容ボックスの使用高さと等しくなります。 ただし、分割やスパナーによって、 multi-column containerの内容が複数のmulticol行に分割されることもあります。

multi-column containerがページ分割される場合、各カラムの高さはページで制約され、次のページの新しいカラム行に内容が続きます。カラムボックスがページをまたいで分割されることはありません。

同じ効果はスパニング要素がmulti-column containerを分割する場合にも発生します。スパナーの前のカラムは内容に合わせてバランスよく短縮され、スパナーの後の内容は新しいカラム行に流れ込みます。

multi-column containerは、 したがって通常のブロックコンテナであり、 その内容は一連のmulticol行とmulticolスパナーから構成される新たな独立整形コンテキストを確立します。 各multi-column行はブロックレベルボックスとして そのカラムボックスのための多段組み整形コンテキストを確立します。 スパナーは ブロックレベルボックスとして、通常通りdisplay値に応じた独立整形コンテキストを確立します。

多段組みコンテナの入れ子も可能ですが、実装依存の制限がある場合があります。

注: カラムボックスにプロパティや値を直接設定することはできません。 例えば、特定のカラムボックスの背景を設定したり、カラムボックスにパディング・マージン・ボーダーの概念はありません。 将来的な仕様で追加機能が検討される可能性があります（例：カラムごとに幅や背景を変えるなど）。

注: ビューポートより高いカラム高さを持つmulticol containerはアクセシビリティ上の問題を招くことがあります。 詳細はアクセシビリティに関する考慮事項を参照ください。

4. カラムの数と幅

多段組みコンテンツをレイアウトする際、カラム数とカラム幅の決定は基本となります。 これらのプロパティを使ってカラム数とカラム幅を設定します：

• column-count
• column-width

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

明示的なカラム区切りや内容、高さの制約など、他の要因も実際のカラム数や幅に影響を与えることがあります。

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

このプロパティは多段組みコンテナのカラム幅を指定します。

auto

他のプロパティ（例：column-countがautoでない場合など）によってカラム幅が決まることを意味します。

<length [0,∞]>

最適なカラム幅を指定します。 実際のカラム幅は（利用可能なスペースを満たすために）より広くなることもあり、 または（利用可能なスペースが指定幅より小さい場合は）より狭くなることもあります。 負の値は指定できません。 使用値は最低でも1pxに丸められます。

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

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

column-widthを縦書きテキストにも使えるようにするため、 カラム幅とはカラム内の行ボックスの長さ（インライン方向）を指します。

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

4.2. カラム数: column-count プロパティ

このプロパティは多段組みコンテナのカラム数を指定します。

auto

他のプロパティ（例：column-widthがautoでない場合など）によってカラム数が決まることを意味します。

<integer [1,∞]>

要素の内容が流し込まれる最適なカラム数を指定します。 値は0より大きくなければなりません。 column-widthとcolumn-countがどちらもautoでない場合、 この整数値は最大カラム数を示します。

body { column-count: 3 }

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

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

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 */

4.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指定値までfloorしなければなりません。 この下限値は1px以下が推奨されます。

ページ分割メディアなどの分断文脈では、 UAはこの計算をフラグメントごとに行っても構いません。

column-countの使用値は明示的なカラム区切りやカラム高さ制約を考慮せずに計算されますが、 実際の値はこれらを考慮します。

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

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

p {
  break-after: column;
}

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

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

<div>foo</div>

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

多段組みコンテナ内のすべてのカラムボックスは同じスタッキングコンテキストに属し、内容の描画順序はCSS 2.1で規定されたとおりです。 カラムボックスは新たなスタッキングコンテキストを確立しません。

4.6. カラムのスタイリング: ::column 疑似要素

::column 疑似要素は、 多段組みコンテナ内の個々のカラムを表します。 これは多段組みコンテナにのみ存在します。

多段組みコンテナには、カラム数と同じ数の::column疑似要素があります。 これらは個別に指定することはできません。 multicolの::column疑似要素に指定したスタイルは その要素のすべてのカラムに適用されます。 各::columnは対応するカラムと同じサイズ・位置を持ちます。 カラムの利用可能スペース（インライン軸）や、コンテナの内容ボックス（ブロック軸）に一致します。 （カラム間のギャップや罫線部分は含みません。）

::column疑似要素は、自身の多段組みコンテナの子として扱われますが、内容は持ちません。 これらはカラムの内容をラップしません。同じスペースを塗りつぶすだけです。

::column疑似要素は、非常に限られたプロパティのみ受け付けます：

• scroll-margin、scroll-snap-align、scroll-snap-stop（スクロールコンテナ内要素に適用されるスクロールスナッププロパティ）

さらに、::column疑似要素には自身の::scroll-marker疑似要素を持つことができます（::column::scroll-marker）。 （その他の疑似要素は::columnには存在しません。） この::scroll-marker疑似要素は、::column疑似要素自身ではなく、 その起点要素から継承します。

注: ::columnで利用できるプロパティや疑似要素は、今後さらに拡張される可能性があります。 カラムの内容ではなく位置を気にする機能が増えれば、今後の追加が予想されます。

5. カラム間の間隔と罫線

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

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

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

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

多段組み整形コンテキストでは、normal値のcolumn-gap使用値は1emです。 これにより初期値のままでも可読性が確保されます。 カラム間に罫線がある場合は、そのギャップの中央に表示されます。

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

<color>

カラム罫線の色を指定します。

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

column-rule-styleプロパティは、要素のカラム間の罫線スタイルを設定します。 <line-style>値はcollapsing border modelと同様に解釈されます。

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

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

このプロパティはカラム間の罫線の幅を設定します。 負の値は指定できません。

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

このプロパティは、スタイルシート上で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;
}

6. カラム区切り

内容が複数カラムにレイアウトされる場合、 ユーザーエージェントはカラム区切り位置を決定しなければなりません。 内容をカラムに分割する問題は、ページへ分割する問題（CSS 2.1 セクション13.3.3 [CSS21]）とよく似ています。

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

6.1. 分断制御: break-before、break-after、break-insideプロパティ

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

7. カラムのまたぎ（スパニング）

column-spanプロパティにより、要素が複数のカラムにまたがって表示されることが可能になります。 本仕様では、前レベルで利用できた値に<integer>を追加しています。

7.1. column-span

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

none

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

all

要素はカラム区切りを強制し、フロー外となって、同じブロック整形コンテキストで最も近いmulticol祖先の全カラムにまたがります。 要素より前に現れる通常フローの内容は、直前のmulti-column行のすべてのカラムに自動的にバランスよく配置され、 要素の後の内容は新規のmulti-column行に流れ込みます。 要素は独立整形コンテキストを確立します。

注: 要素が新たな整形コンテキストを確立するかどうかは、その要素がmulticolの子孫かどうかに依存しません。 column-spanがallのときは常に確立します。 これは後でmulticolが削除されたり、メディアクエリ等でmulticolが無効になった場合にもデザインの堅牢性を保つためです。

<integer [1,∞]>

指定したカラム数だけ要素がまたがります。 値は0より大きくなければなりません。 指定された整数値がmulticol要素のカラム数以上なら、 column-span: allと同じになります。

この定義は不十分です。

• column-span: 1はcolumn-span: noneとみなすのか、それともスパナー（BFC）を作るのか？
• どのカラムをまたぐのか？
• 高さ計算やcolumn-fillとの相互作用は？

auto

要素がまたがるカラム数は、そのmin-content 外部サイズ（multi-column containerのインライン方向）によって決まります。 それがcolumn-widthの使用値より小さい場合は column-span: noneと同じです。 そうでなければ、またがりに必要な最小の正の整数nは n × column-width + (n - 1) × column-gap がmin-content外部サイズを超える最小のn。 これがカラム数を超える場合は、column-span: allと同様に扱います。

column-span: 1がcolumn-span: noneと同じでない場合、要素が小さい時はcolumn-span: 1とcolumn-span: noneどちらの動きにすべきか？

複数のカラムにまたがる要素を多段組みスパニング要素、その際に生成されるボックスを多段組みスパナーと呼びます。

スパナーの包含ブロックはmulti-column container自身です。 そのため、スパナー自身がスパナー内の絶対配置ボックスの包含ブロックチェーンを確立しない場合には、 multi-column containerまでスキップされます（スパナーとmulti-column container間の祖先はスキップされます）。

スパナーはフロー外扱いですが、 これによってスパニング要素の描画順 [CSS21]には影響しません。

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

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

column-spanをallに設定することで、 h2要素より前に現れるすべての内容はh2の上に表示されます。

スパナーはmulti-column行を分割するため、カラム罫線（これは同じカラム間でのみ描画される）も中断されることに注意してください。

スパニング要素は、同じ整形コンテキストに属し、かつスパニング要素とmulti-column containerの間にfixed位置子孫のための包含ブロックを確立するものがなければ、 第一レベル以外の子孫でも問題ありません。

<article>
  <section>
    <div class="spanner">Attempted spanner</div>
  </section>
</article>

article {
  columns: 2;
}

section {
  transform: rotate(90deg);
}

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

スパナーの前のフラグメントが空なら特別なことは起こりません。 上マージン・ボーダー・パディングはスパニング要素上に現れ、空のフラグメントとなります。

この例ではmulti-column containerはarticle要素です。 その中に段落とsection要素があり、sectionの中にh2見出し（column-span: all）があり、section自体はカラムボックス内に収まっています。

h2はsectionの最初の子なので、 このsectionのmargin・border（図中赤）・paddingはスパニング 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
}

スパニング要素は、通常の場合よりも多くのスペースを必要とします。 スペースが足りない場合、スパニング要素を配置できないことがあります。 その場合、ユーザーエージェントはこのプロパティにnoneが指定されたものとして扱うことがあります。

この例ではh2要素が後ろに現れ、multi-column containerの高さが制限されています。 そのためh2はオーバーフロー内に現れ、スパニングできる余地がありません。 結果として、column-span: noneのように表示されます。

この例は前述とほぼ同じですが、H2要素が自然に最後のカラムに現れています。 それでもスパニングする余地がありません。

分断文脈でもスパニング要素はすべてのフラグメントで有効です。 この例では、ページ分割メディアの中で、最初の3つの段落の後にカラム区切りがあります。 スパニングH2要素が4段落目の後に現れます。

スパナーはブロックレベルボックスなので、隣接するスパナー同士のマージンは相殺（マージンの折りたたみ）されます。 絶対配置要素だけで区切られた2つのスパナーのマージンも相殺されます（絶対配置要素はカラムボックスを生成しないため）。 カラムボックスは新たなブロック整形コンテキストを確立するため、カラムボックス内要素のマージンはスパナーのマージンと相殺されません。

スパナーは新たな整形コンテキストを確立しますが、そのマージンは周囲に影響される場合があります。 この例では、2つのスパナーが偶然ページ先頭に来ています。 1つ目スパナーの上マージンは非強制区切りと隣接しているため切り詰められます。 2つのスパナー間のマージンは相殺されます。 しかし2つ目スパナーの下マージンは次の要素の上マージンとは相殺されません。

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

8. カラムの充填

カラムの内容の詰め方には2つの戦略があります。 バランスさせるか、しないかです。 バランスする場合、ユーザーエージェントはカラム高さの差異を最小限にしようとしますが、強制区切りやwidowsやorphans等のカラム高さに影響するプロパティも考慮されます。 バランスしない場合は、カラムを順番に埋めていき、途中や最後のカラムが空になることもあります。

8.1. カラムのバランス調整: column-fillプロパティ

このプロパティは、multi-column行内で スパナーの直前でない内容がカラム間でバランスされるかどうかを指定します。

値は以下の通りです：

balance

可能な限り均等にカラム間で内容を分割します。 分断文脈では、最後のフラグメントだけバランスされます。

balance-all

可能な限り均等にカラム間で内容を分割します。 分断文脈ではすべてのフラグメントでバランスされます。

auto

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

連続文脈では、オーバーフローカラムがある場合このプロパティは効果を持ちません。

この例では、記事が短い段落1つだけで3行分しかありません。 カラムバランスにより3行が3カラムに分割表示されます。

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

この例ではカラムバランスをオフにし、記事の高さを指定しています：

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

結果として、すべての内容が最初のカラムに詰められます：

この例では、記事内に段落が2つあります。 最初は長く、次は短い段落です。 このコードが適用されています：

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

p { break-after: column;
}

最短カラム高さは5行です。 カラム高さが決まった後は、カラムを順に埋めていきます。 そのため3カラム目は前2つと同じ高さですが、最後のカラムはかなり短くなります。

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

この例では最初に分割できないfigure要素があり、これがカラム高さを決めます。 以降の内容は残ったカラムに順次埋められます：

9. オーバーフロー

9.1. 多段組みコンテナ内のオーバーフロー

カラム区切りを発生させる場合を除き、カラムボックスの外側にはみ出た内容は 目に見える形でオーバーフローし、カラムボックスでクリップされません。

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

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

9.2. 多段組みコンテナ外部のページ分割とオーバーフロー

多段組みコンテナの端でカラムボックスの外側にはみ出した内容やカラム罫線は、overflowプロパティに従ってクリップされます。

多段組みコンテナは、以下の理由で収まりきらないほど多くのカラムを持つことがあります：

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

連続文脈で多段組みコンテナの外側に現れるカラムは、オーバーフローカラムと呼ばれます。 オーバーフローカラムは多段組みコンテナの高さに影響を与えることがあります。

この例では、多段組みコンテナの高さが最大値で制限されています。 さらに、スタイルシートでオーバーフロー内容が見えるように指定されています：

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

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

連続文脈では、オーバーフローカラムが多段組みコンテナの高さに影響を与える場合があります。 この例では、オーバーフロー内に4行のテキストを含むカラムが現れ、 多段組みコンテナはこのカラムを収容できる高さになります。

分断文脈では、オーバーフロー内容は後続のフラグメントのカラムに入ります。 例31と同じ内容・1ページに5行しか収まらないページボックスの場合、 1ページ目はこうなります：

カラムバランスを仮定すると、2ページ目はこうなります：

この例では、段落ごとに明示的なカラム区切りが生成されています：

p {
  break-after: column;
}

その結果、カラム数が増え、追加のカラムがインライン方向に追加されます：

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

2ページ目はこうなります：

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

付録B. 変更点

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

2024年5月16日付 CSS-MULTICOL-1 Candidate Recommendation (CR)からの変更点

• ::column疑似要素を追加。2024年9月27日決定。
• <integer>およびauto値のドラフト案をcolumn-spanに追加。

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

多段組みは新たなプライバシー漏洩をもたらしません。

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

多段組みは新たなセキュリティ上の考慮事項をもたらしません。

アクセシビリティに関する考慮事項

コンテナの高さや行長の設定は、視覚・認知障害のある人にとって課題となる場合があります。 ユーザーのニーズを理解するには WCAG 達成基準 1.4.10 リフローや WCAG 1.4.8 ビジュアルプレゼンテーションを参照してください。

謝辞

本書はHåkon Wium Lieによる[CSS3-MULTICOL]の成果に基づいており、 複数の過去提案やそのコメントを参考にしています。 貢献者は次の通りです：

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