CSS break-after

break-afterとは、要素の直後の区切りを設定するCSSプロパティである。

構文

break-after: mode

次に示す値を mode に指定できる。

auto

要素の直後に区切りを入れることを許可するが、強制はしない。

avoid

要素の直後に区切りを入れることを禁止する。

avoid-page

要素の直後で改ページすることを禁止する。

<p style="break-after: avoid-page">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

left

要素の直後でひとつまたは2つの改ページを行い、次のページが左ページとなるようにする。

<p style="break-after: left">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

page

要素の直後で改ページする。

<p style="break-after: page">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

right

要素の直後でひとつまたは2つの改ページを行い、次のページが右ページとなるようにする。

<p style="break-after: right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

初期値

auto

適用対象

以下に示すHTML要素に対して break-after プロパティを適用できる。

ブロックレベル要素（ただし、これらが「マルチカラムレイアウト」や「印刷メディア」などの文脈で使われているときに限る）
- article
- aside
- blockquote
- div
- figure
- footer
- h1 〜 h6
- header
- li
- main
- p
- section
グリッドアイテム (display: gridの子要素)
フレックスアイテム (display: flexの子要素)
テーブルの行または行グループ
- tbody
- tfoot
- thead
- tr

継承

親要素の break-after プロパティの値は、子要素に継承されない。

break-after と page-break-after の違い

page-break-after は印刷時のページ分割に使うプロパティであり、印刷用メディア（@media print）に限定されるのに対して、break-after は印刷だけでなく、より汎用的なブレーク制御を行い、印刷だけでなく、段組（columns）、リージョン（regions）、ページなどにも対応している。

break-after と page-break-after の違い
項目	break-after	page-break-after
対象	段組・リージョン・ページなど	印刷メディアのみ
モダン対応	新しい（推奨）	古い（レガシー）
値の種類	豊富	限定的
推奨度	モダンブラウザ向けに推奨	廃止予定ではないが、将来的には非推奨に近い

page-break-after

break-before

break-beforeとは、要素の直前の区切りを設定するCSSプロパティである。

break-before: mode

次に示す値を mode に指定できる。

auto

要素の直前に区切りを入れることを許可するが、強制はしない。

avoid

要素の直前に区切りを入れることを禁止する。

avoid-page

要素の直前で改ページすることを禁止する。

left

要素の直前でひとつまたは2つの改ページを行い、次のページが左ページとなるようにする。

<p style="break-before: left">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

page

要素の直前で改ページする。

<p style="break-before: page">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

right

要素の直前でひとつまたは2つの改ページを行い、次のページが右ページとなるようにする。

<p style="break-before: right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

初期値

auto

適用対象

以下に示すHTML要素に対して break-before プロパティを適用できる。

ブロックレベル要素（ただし、これらが「マルチカラムレイアウト」や「印刷メディア」などの文脈で使われているときに限る）
- article
- aside
- blockquote
- div
- figure
- footer
- h1 〜 h6
- header
- li
- main
- p
- section
グリッドアイテム (display: gridの子要素)
フレックスアイテム (display: flexの子要素)
テーブルの行または行グループ
- tbody
- tfoot
- thead
- tr

継承

親要素の break-before プロパティの値は、子要素に継承されない。

break-before と page-break-before の違い

page-break-before は印刷時のページ分割に使うプロパティであり、印刷用メディア（@media print）に限定されるのに対して、break-before は印刷だけでなく、より汎用的なブレーク制御を行い、印刷だけでなく、段組（columns）、リージョン（regions）、ページなどにも対応している。

break-before と page-break-before の違い
項目	break-before	page-break-before
対象	段組・リージョン・ページなど	印刷メディアのみ
モダン対応	新しい（推奨）	古い（レガシー）
値の種類	豊富	限定的
推奨度	モダンブラウザ向けに推奨	廃止予定ではないが、将来的には非推奨に近い

break-inside

break-insideとは、要素の途中の区切りを設定するCSSプロパティである。

break-inside: mode

次に示す値を mode に指定できる。

auto

要素の途中に区切りを入れることを許可するが、強制はしない。

avoid

要素の途中に区切りを入れることを禁止する。

avoid-page

要素の途中で改ページすることを禁止する。

left

要素の途中でひとつまたは2つの改ページを行い、次のページが左ページとなるようにする。

<p style="break-inside: left">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

page

要素の途中で改ページする。

<p style="break-inside: page">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

right

要素の途中でひとつまたは2つの改ページを行い、次のページが右ページとなるようにする。

<p style="break-inside: right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</p>

初期値

auto

継承

親要素の break-inside プロパティの値は、子要素に継承されない。

break-inside と page-break-inside の違い

page-break-inside は印刷時のページ分割に使うプロパティであり、印刷用メディア（@media print）に限定されるのに対して、break-inside は印刷だけでなく、より汎用的なブレーク制御を行い、印刷だけでなく、段組（columns）、リージョン（regions）、ページなどにも対応している。

break-inside と page-break-inside の違い
項目	break-inside	page-break-inside
対象	段組・リージョン・ページなど	印刷メディアのみ
モダン対応	新しい（推奨）	古い（レガシー）
値の種類	豊富	限定的
推奨度	モダンブラウザ向けに推奨	廃止予定ではないが、将来的には非推奨に近い

参考文献

World Wide Web Consortium (2023) CSS Fragmentation Module Level 3

CSS break-after

構文

初期値

適用対象

継承

break-after と page-break-after の違い

関連記事

break-before

初期値

適用対象

継承

break-before と page-break-before の違い

break-inside

初期値

継承

break-inside と page-break-inside の違い

参考文献