ウェブランサー

page-break-after - 印刷の改ページ箇所を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 ブロックレベル要素
継承 しない

page-break-afterプロパティは、印刷時に要素の直後での改ページをコントロールする使用します。このプロパティが指定された要素の直後で強制的に改ページさせたり、その位置での改ページを禁止したりします。

Internet Explorerのバージョン7までは、[auto], [always]以外の値に対応していないようです。

page-break-afterに与えられる値

page-break-after: auto;
特にその位置での改ページを指定しません。
page-break-after: always;
指定された要素が生成するボックスの直後で、常に強制的に改行します。
page-break-after: avoid;
指定された要素が生成するボックスの直後での改行を禁止します。
page-break-after: left;
指定された要素が生成するボックスの直後で、常に強制的に改行します。次のページが左手側のページとして整形出来るように、必要に応じて改頁します。
page-break-after: right;
指定された要素が生成するボックスの直後で、常に強制的に改行します。次のページが右手側のページとして整形出来るように、必要に応じて改頁します。

page-break-afterの使用サンプル

CSS
.sample01 {
 page-break-before: always;
 page-break-after: avoid;
 margin-bottom: 10px;
}
.sample02 {
 page-break-before: avoid;
 page-break-after: always;
}
XHTML
<p class="sample01">
CSSは、HTMLをブラウザで見る際に、要素の表示方法を指定出来るものです。HTMLには文章構造と意味付けに専念してもらい、CSSが表示方法を担当する事で、非常に合理的になりました。<br /> 同じ情報ソースに対して、PC用のスタイルシート、モバイル用のスタイルシート、プリントアウト用のスタイルシートと、別々のスタイルを指定する事で、各端末に最適化された表現が可能となりました。CSSの解釈や各端末の実装が統一されれば、あらゆる場面で情報ソースの共有と有効活用が出来るようになるでしょう。</p> <p class="sample02"> 例えば、料理のレシピのデータベースに、インターネット接続されたテレビからアクセスして今夜のおかずを考えたり、買い物中に携帯からアクセスして食材を確認したり、プリントアウトして献立表を作ったり出来るようになります。アクセス先が同じで、各端末に合わせて表示を切り替えてくれたなら、利用者はとても便利になると思いますよね。</p>
表示確認

CSSは、HTMLをブラウザで見る際に、要素の表示方法を指定出来るものです。HTMLには文章構造と意味付けに専念してもらい、CSSが表示方法を担当する事で、非常に合理的になりました。
同じ情報ソースに対して、PC用のスタイルシート、モバイル用のスタイルシート、プリントアウト用のスタイルシートと、別々のスタイルを指定する事で、各端末に最適化された表現が可能となりました。CSSの解釈や各端末の実装が統一されれば、あらゆる場面で情報ソースの共有と有効活用が出来るようになるでしょう。

例えば、料理のレシピのデータベースに、インターネット接続されたテレビからアクセスして今夜のおかずを考えたり、買い物中に携帯からアクセスして食材を確認したり、プリントアウトして献立表を作ったり出来るようになります。アクセス先が同じで、各端末に合わせて表示を切り替えてくれたなら、利用者はとても便利になると思いますよね。

page-break-afterに関連するCSSプロパティ