【CSS Modules】break-afterプロパティの使い方
break-afterプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
break-afterプロパティは、要素の後にどのような種類の区切り（改ページ、改段、改領域など）を挿入するかを定義する値を保持するプロパティです。
このプロパティは、主に印刷時や複数段組レイアウトで、コンテンツの区切り方を調整するために使用されます。例えば、文書の見出しの直後に改ページが入ってしまうのを防ぎたい場合や、特定のセクションを必ず新しいページや段組の先頭から開始したい場合に役立ちます。
設定できる主な値としては、自動的に区切りを挿入する既定のauto、要素の直後で常に改ページや改段を行うalways、そして要素の直後での区切りを避けるavoidがあります。特に印刷物においては、pageを設定することで要素の直後で必ず改ページを行い、新しいページからコンテンツを開始させることが可能です。また、複数段組レイアウトでは、columnを指定することで、次のカラムからコンテンツを開始させることができます。
このプロパティを適切に使用することで、コンテンツの視覚的な流れを制御し、ユーザーにとって読みやすいレイアウトを実現できます。特に、ページ送りを伴う印刷物や、情報を複数のカラムに分けて表示するウェブページなどで、その効果を最大限に発揮します。ブラウザや印刷環境によって動作が異なる場合があるため、実装時には表示確認を行うことが推奨されます。
公式リファレンス: break-after
構文(syntax)
1break-after: auto;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません