段抜きと段の均衡

あるアイテムを段抜きする場合は、 column-span プロパティの値を all に設定してください。これで、要素はすべての段にまたがります。

段組みコンテナーの子孫要素は、直接の子でも間接の子でも段抜き (spanner) になることができます。例えば、コンテナーの中に直接含まれる見出しは段抜きになることができますし、段組みコンテナーの中のセクションに含まれる見出しも同様です。

以下の例では、 h2 要素が column-span: all に設定され、すべての段に段抜きされます。

次の例では、見出しが <article> 要素の中にありますが、期待通りにコンテンツが段抜きになります。

段抜きが導入されると、段組みの流れが中断され、段抜きの後で実際に新しい一連の段ボックスを作成して段組みが再開します。内容物が段抜き要素をまたぐことはありません。

現在の Level 1 仕様書では、 column-span に許可されている値は二つしかありません。 none の値は初期値で、アイテムを段抜きせず、段の中に収めます。 all の値はアイテムがすべての段を段抜きすることを意味します。例えばアイテムを 3 段中 2 段に段抜きすることはできません。

段抜き要素がマージン、パディング、境界、背景色を持つ他の要素の中にあった場合、次の例に示すように、ボックスの上端が段抜きの上に現れ、残りの部分が段抜きの下に表示されることがあります。このため、要素を段抜きにするときにはいくらか注意が必要で、このシナリオに注意する必要があります。

加えて、コンテンツの後方に段抜き要素が現れる場合は、段組みをするのに十分なコンテンツが段抜きの後にないと、予期しない挙動または望まない挙動をすることがあります。段抜きは注意深く使用し、様々な分割点になったときに望み通りの結果が得られるかを検査してください。

均衡の取れた段組みは、すべての段のコンテンツの量がほぼ同じになっているものです。充足と均衡は、コンテンツの量が提供された空間の量に一致しない場合、例えばコンテナーの高さが宣言されている場合に発生します。

column-fill の段組みでの初期値は balance です。 balance の値は、可能な限りすべての段で均衡を取ることを意味します。ページ付きメディアのような断片化されたコンテキストにおいては、最後の断片のみで均衡が取られます。つまり、最後のページにおいて一連の段ボックスの均衡が取られます。

均衡を取るための第二の値は balance-all で、断片化されたコンテキストにおいて、最後の断片における段だけでなく、すべての段の均衡を取ろうとします。

この例には、画像とテキストを含む均衡の取れた段があります。画像は分割できないので最初の段に入り、他の段はテキストの量が同じになるように充足されます。

column-fill の他の値として auto があります。この場合、すべての段を同じ量で充足して高さの均衡を図るのではなく、段を順番に充足させます。以下の例では column-fill を auto に変更し、段を段組みコンテナーの高さまで順番に充足させ、最後のいくつかの段は空のままにします。

なお、段の均衡はすべてのブラウザーが対応しているわけではありません。対応させるブラウザーで期待通りの効果が得られるかをチェックしてください。

次のガイドでは、段組みがはみ出しをどう扱うかを、段の中とコンテナーに合う数よりも多くの段ができる場合の両方について学習します。