Page breaks
ページ区切りプロパティは、印刷時やページ分割されたメディアでのコンテンツの分割方法を制御します。break-beforeとbreak-afterは要素の前後でページ区切りを強制または禁止し、break-insideは要素内部での区切りを制御します。印刷用CSSや電子書籍のレイアウト調整において不可欠な機能です。
概要
ページ区切りプロパティは、印刷時やページ分割されたメディアでのコンテンツの分割方法を制御します。break-beforeとbreak-afterは要素の前後でページ区切りを強制または禁止し、break-insideは要素内部での区切りを制御します。印刷用CSSや電子書籍のレイアウト調整において不可欠な機能です。
対応ブラウザ
デスクトップ
Chrome 50+
Edge 12+
Safari 10+
Firefox 65+
モバイル
Chrome Android 50+
Safari iOS 10+
Firefox Android 65+
基本構文
CSS
h2 {
break-before: page;
}
.keep-together {
break-inside: avoid;
}実務での使いどころ
-
印刷レイアウトの最適化
章の見出しを常に新しいページの先頭に配置したり、表や図が途中で分割されないよう制御します。
注意点
- ブラウザによってページ区切りの処理が異なる場合があるため、印刷プレビューで実際の出力を確認してください。
アクセシビリティ
- 印刷時のページ区切りを適切に設定することで、視覚障害のあるユーザーが拡大印刷した際の読みやすさが向上します。