段組みにおける内容の分割の扱い

段組みレイアウトでは段ボックス間で、ページ付きメディアのページ間と同様に内容が分割されます。どちらのコンテキストでも、 CSS 断片化仕様書のプロパティを用いて、どのように内容を分割するかを制御します。このガイドでは、段組みで断片化がどのように動作するかを見てみます。

断片化の基本

CSS Fragmentation specification は、断片化コンテナー間、または fragmentainer の間でどのように内容を分割するかを詳述しています。段組みでは、 fragmentainer は段ボックスです。

段ボックスは他のマークアップを含むことができ、できれば分割したくない場所がたくさんあります。例えば、ふつうは画像のキャプションは参照する画像と別な段に分割されないほうが望ましく、見出しが段の最後にあるのも変です。断片化プロパティはこれをいくらか制御するための方法を提供します。

分割を制御したくなる場所は様々なものがあります。

  • 例えば figure 要素の内部などの、ボックス内での分割。
  • 上記の見出しの例のような、ボックスの前後の分割。
  • 行間の分割。

ボックス内での分割

ボックス内での分割を制御するには、 break-inside プロパティを使用します。このプロパティは以下の値を取ります。

  • auto
  • avoid
  • avoid-page
  • avoid-column
  • avoid-region

以下の例では、 break-inside を figure 要素に適用して、キャプションが画像から分割されることを防ぎます。

ボックスの前後の分割

break-before および break-after プロパティを使用して、要素の前後の分割を制御します。段組みのコンテキストでは、以下の値を取ります。

  • auto
  • avoid
  • avoid-column
  • column

次の例では、 h2 要素の前で強制的に改段しています。

行間での分割

orphans および widows プロパティも便利です。 orphans プロパティは、断片の末尾に残る行数を制御します。 widows プロパティは、断片の先頭に残る行数を制御します。

orphans および widows プロパティは整数値を取り、断片のそれぞれ末尾および先頭の行数に残す行数を表します。なお、これらのプロパティは段落などのブロックコンテナー内でのみ動作します。ブロックの行数が値で指定された数より少なかった場合、すべての行が一緒に保持されます。

以下の例では、 orphans プロパティを用いて段の末尾に残す行数を制御しています。値を変更すると、内容を分割する効果を確認できます。

期待通りに動作しない場合

内容の量が少なく、様々な方法で分割を制御しようとしている場合や、複数の要素があり、内容をどこかで分割する必要がある場合、常に意図する結果が得られるとは限りません。断片化の使用はある程度まで、常にブラウザーに対する提案であり、可能であればその方法で分割が制御されます。

上記に加えて、これらのプロパティーに対するブラウザーの対応は若干まばらです。ここ MDN の個別のプロパティページにおける互換性データ表は、どのブラウザーがどの機能に対応しているかを確認するのに便利かもしれません。多くの場合、分割が制御できないフォールバックにより、美しくない分割が発生することが次善の策であり、レイアウトが崩れるよりましです。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,