break-beforeプロパティは、要素の前でページ、列、または改行を発生させるかどうかを指定するプロパティです。印刷時のページ区切りやマルチカラムレイアウトでの列の区切りをコントロールするために使用します。
break-beforeプロパティの値とその効果
auto: デフォルトの動作で、ブラウザが自動的にページや列の区切りを決定します。page: 要素の前でページ区切りを強制します。印刷時に新しいページから開始します。column: 要素の前で新しい列を開始します（マルチカラムレイアウトの場合）。avoid: 要素の前でページや列の区切りが発生しないようにします。left,right: 新しいページを左または右ページから開始します（印刷メディアの場合）。
注意点と関連情報
break-beforeは、特に印刷メディアやマルチカラムレイアウトで有効なプロパティです。このプロパティを使用する際には、ページ区切りや列区切りが想定どおりに行われるように設計することが重要です。また、区切りのタイミングをコントロールすることで、印刷物や複数列レイアウトでの美しいレイアウトを実現できます。
break-beforeプロパティが効かない時の原因と対策
適用対象の要素が誤っている
break-beforeプロパティは、ブロックレベル要素やテーブル、フレックスコンテナ、グリッドコンテナなどに適用されますが、インライン要素には適用されません。インライン要素や非対応の要素に適用しても効果がありません。
対策: break-beforeを適用する要素が、適切なブロックレベル要素（例: divやsection）であることを確認し、インライン要素ではなくブロック要素に適用しているか確認しましょう。
レイアウトが対応していない
break-beforeは、ページ区切りやセクションの区切りを行うためのプロパティですが、一般的なWebページのレイアウトや通常の画面表示では効果が見られないことがあります。特に、印刷時や特定のレイアウトコンテキストでのみ機能します。
対策: break-beforeが主に印刷レイアウトや特定のレイアウト（例: カラムレイアウト）で機能するプロパティであるため、該当するコンテキストで使用されているか確認します。印刷用スタイルシートが必要な場合は、印刷メディア用のCSSを使いましょう。
共通するCSSコード
.css-sample-container {
width: 100%;
max-width: 600px;
padding: 20px;
margin: 20px auto;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.css-sample-item {
padding: 10px;
margin: 10px 0;
background-color: #4CAF50;
color: white;
font-size: 18px;
text-align: center;
}
.css-sample-item-2 {
padding: 10px;
margin: 10px 0;
background-color: #FF9800;
color: white;
font-size: 18px;
text-align: center;
}
break-before: page
break-before: pageは、要素の前でページ区切りを強制し、次の要素を新しいページに表示します。印刷メディアで使用すると、新しいページから次の要素が開始されます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item-2">前の要素</div>
<div class="css-sample-item css-sample-break-before-page">Page Break Before</div>
</div>CSSコード
.css-sample-break-before-page {
break-before: page;
}表示結果
break-before: column
break-before: columnは、要素の前で新しい列を開始する設定です。マルチカラムレイアウトでの列の切り替えに役立ちます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item-2">前の要素</div>
<div class="css-sample-item css-sample-break-before-column">Column Break Before</div>
</div>CSSコード
.css-sample-break-before-column {
break-before: column;
}表示結果
break-before: avoid
break-before: avoidは、要素の前でページや列の区切りが発生しないようにします。要素をページや列の途中で分割したくない場合に便利です。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item-2">前の要素</div>
<div class="css-sample-item css-sample-break-before-avoid">Avoid Break Before</div>
</div>CSSコード
.css-sample-break-before-avoid {
break-before: avoid;
}表示結果
まとめ
break-beforeプロパティを使用することで、要素の前にページや列の区切りをコントロールすることができます。特に印刷メディアや複数列レイアウトで、要素の前にページや列の分割を発生させるタイミングを細かく制御でき、意図したレイアウトを実現するために重要なプロパティです。