Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

page-break-after

印刷時のページ送りの位置を指定できます。

サンプルコード
div.test { page-break-after: auto;}
指定可能な値一覧
概要
autoページ送りの位置を指定しません。この『auto』が初期値です。
always指定された位置で強制的にページ送りされます。
avoid指定された位置でページ送りが行われないよう自動調整されます。
left指定された位置で強制的にページ送りされます。左右見開きで印刷する場合は指定された要素が左側に印刷されます。
right指定された位置で強制的にページ送りされます。左右見開きで印刷する場合は指定された要素が右側に印刷されます。
ブラウザでの表示結果
<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<p style="page-break-after: auto;">ここはp要素です。ここに『page-break-after: auto』と指定しています。</p>
<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<button onclick="window.print();" onmouseover="this.style.color = &#39;red&#39;;" onmouseout="this.style.color = &#39;black&#39;;">印刷する</button>

<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<p style="page-break-after: always;">ここはp要素です。ここに『page-break-after: always』と指定しています。</p>
<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<button onclick="window.print();" onmouseover="this.style.color = &#39;red&#39;;" onmouseout="this.style.color = &#39;black&#39;;">印刷する</button>

<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<p style="page-break-after: avoid;">ここはp要素です。ここに『page-break-after: avoid』と指定しています。</p>
<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<button onclick="window.print();" onmouseover="this.style.color = &#39;red&#39;;" onmouseout="this.style.color = &#39;black&#39;;">印刷する</button>

<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<p style="page-break-after: left;">ここはp要素です。ここに『page-break-after: left』と指定しています。</p>
<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<button onclick="window.print();" onmouseover="this.style.color = &#39;red&#39;;" onmouseout="this.style.color = &#39;black&#39;;">印刷する</button>

<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<p style="page-break-after: right;">ここはp要素です。ここに『page-break-after: right』と指定しています。</p>
<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<button onclick="window.print();" onmouseover="this.style.color = &#39;red&#39;;" onmouseout="this.style.color = &#39;black&#39;;">印刷する</button>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

印刷時のページ送りの位置を指定できます。

このプロパティが指定された要素の後ろでページ送りが行われます。指定された要素の手前でページ送りを行いたい場合は『page-break-before』プロパティを使用してください。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。