【page-break-inside】印刷時の要素内での改ページ方法を指定

page-break-insideプロパティでは、印刷時にその要素の範囲内での改ページに関する設定をすることができます。 具体的には、その要素の途中での改ページを避ける(禁止する)か、どうかの設定をする事が可能です。

書式

  • page-break-inside : ……… 要素内での改ページを禁止する

★:auto、avoid、inherit

auto
要素内での改ページ方法を、特に制御しない(初期値)
avoid
要素内での改ページを避ける(禁止する)

使用した時の例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>改ページサンプル(page-break-inside)</title>
<style type="text/css">
.avoid {page-break-inside: avoid;}
p {font-size: 20px; line-height:340%;}
body {width: 600px;}
</style>
</head>
<body>
  
<h1>要素内での改ページを避ける(page-break-inside)</h1>
  <p>印刷プレビューで改ページ部分を確認することができます。</p>
  <p>要素内での改ページが禁止されている事を確認するため、下記では適当な文章を並べていきます。</p>
  <hr>
<div class="avoid">
  <h2>スマホ向けのページについて</h2> 
  <p>パソコン用に制作したホームページは、そのままでもスマートフォンで閲覧できます。
     ですが、何も設定をしていないと全体が縮小されて表示されてしまいますので、ユーザーは見たい箇所を拡大するなどの操作をしなければなりません。
     そのためユーザーが拡大などの操作をしなくても済むように、スマートフォン向けのレイアウトを用意しているサイトが今では多数あります。
     スマートフォンとパソコンにそれぞれ異なるレイアウトを適用するには、プログラムでパソコンか、スマートフォンかを判別してそれぞれ異なるページ
     を表示する方法と、メディアクエリーという機能を使用して、パソコンとスマートフォンとで読み込ませるcssを切り替えて表示させる方法があります。</p>
  <hr>
</div>
  <div class="avoid">
     <h3>メディアクエリー</h3>
     <p>メディアクエリーとはcss3で追加された仕様の一つで、cssを適用させる対象を「表示領域の幅」などによって振り分ける事ができます。
        またこれはcss3で追加された機能ではありますが、2012年の段階で確定したものであり、今では多くのサイトで利用されています。</p>
  </div>
  
</body>
</html>

ブラウザ上の表示例

表示例(avoidの場合)
値をautoにした場合の表示例

※上記ページで印刷プレビューを見ると改ページの状態が確認できます(対応しているブラウザの場合のみ)。

対応ブラウザなどのデータ

初期値 auto 値の継承 継承する
適用可能な要素 置換要素以外のブロックレベル要素(table要素を除く)、inline-blockの要素、th、td
メディア paged / page
対応ブラウザ Internet Explorer8~ , Google Chrome1~ , Opera7~ , Safari1.3~

関連情報