Caution

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

CSSプロパティ辞典

page-break-before

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

サンプルコード

div.test { page-break-before: auto;}

指定可能な値一覧

値	概要
auto	ページ送りのの位置を指定しません。この『auto』が初期値です。
always	指定された位置で強制的にページ送りされます。
avoid	指定された位置でページ送りが行われないよう自動調整されます。
left	指定された位置で強制的にページ送りされます。左右見開きで印刷する場合は指定された要素が左側に印刷されます。
right	指定された位置で強制的にページ送りされます。左右見開きで印刷する場合は指定された要素が右側に印刷されます。

ブラウザでの表示結果

<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<p style="page-break-before: auto;">ここはp要素です。ここに『page-break-before: 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-before: always;">ここはp要素です。ここに『page-break-before: 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-before: avoid;">ここはp要素です。ここに『page-break-before: 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-before: left;">ここはp要素です。ここに『page-break-before: 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-before: right;">ここはp要素です。ここに『page-break-before: 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-after』プロパティを使用してください。

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

トップページへ

WebProgrammingPortalウェブプログラミングポータル