印刷するページを変えたい時の対処法

CSS

印刷物とは違うWEBの世界ですが、いつもWEBサイトをディスプレイ上で見ているとは限りません。

目的地へ行くときは地図を印刷して持っていく方もいらっしゃるでしょう。普通に作成しただけだと、印刷したときに思わぬ場所で切れて次のページになってしまうこともあります。

この箇所で印刷するのを次のページに変えて欲しい!そんな時にはこういう風に記述しましょう。

CSS

div{
   page-break-after: always;
}

HTML

<div>
テキスト1
</div>
<p>テキスト2</p>

このように記述するとテキスト1とテキスト2の間で印刷するページが変わります。(実際にはclassやIDを付けて使用するといいでしょう)

ちなみに<p>の方に

p {
   page-break-before: always;
}

と指定すると同じくテキスト1とテキスト2の間で印刷するページが変わります。

まとめ

page-break-after: always;
指定した要素の直後で印刷ページを変える
page-break-before: always;
指定した要素の直前で印刷ページを変える

ディスプレイだけではなく印刷したときも綺麗に見えるページを製作したいですね。