【CSS Modules】break-beforeプロパティの使い方

break-beforeプロパティは、要素の直前における改ページや改段組などの区切り位置の挙動を制御する設定を保持するプロパティです。このプロパティは、主に印刷時のレイアウトや、複数のカラム（段組）で構成されるWebページの表示において、コンテンツの区切り方を細かく調整するために使用されます。コンテンツが途中で不自然に分断されるのを防ぎ、情報の視覚的な流れを整えることで、読みやすさを向上させる役割があります。

具体的には、ある要素の直前で必ず新しいページやカラムを開始させたい場合や、逆に要素の直前での改ページ・改段組を避けたい場合にこのプロパティが活躍します。例えば、章のタイトルがページの最後に表示され、本文が次のページに続くといった状況を避けるために、タイトル要素の直前での改ページを禁止するといった使い方ができます。

指定できる値にはいくつかの種類があります。「auto」は、ブラウザやシステムが自動的に最適な区切り位置を判断する標準的な挙動を示します。「avoid」は、要素の直前での区切りを避けるよう指示します。「page」は、要素の直前で必ず新しいページを開始するよう強制します。また、「column」は、複数カラムレイアウトにおいて、要素の直前で必ず新しいカラムを開始するよう強制し、「region」はCSSの領域（Fragments）に関する区切りを強制する際に用いられます。これらの値を適切に利用することで、デジタルコンテンツを紙媒体に印刷する際や、複雑なレイアウトを構築する際に、表示の品質を大きく向上させることができます。

Copy
1selector {
2  break-before: always;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません