印刷すると中途半端な箇所で切れてしまう…？
HTMLには、ワープロのように「ページ」という概念がありません。紙に印刷されることは考慮していないので当然ですね。 しかし、実際には、ホームページの内容が印刷されることはよくあります。 そのとき、あまり望ましくない位置で改ページされてしまうことがあります。 そんな場合に備えて、スタイルシートを使って「改ページ位置」を指定しておきましょう。
スタイルシートを使うと、改ページして欲しい箇所を指定することができます。 画面表示などには一切影響しませんが、印刷される場合に、その指示に従って改ページが行われます。
逆に、「ここでは改ページして欲しくない」という箇所を指定することもできます。
page-break-before / page-break-after プロパティ
スタイルシートには、page-break-before と page-break-after というプロパティが用意されています。 これらが、印刷時の改ページを指定するプロパティです。
page-break-beforeプロパティは、要素の直前での改ページについて指定するプロパティです。 page-break-afterプロパティは、要素の直後での改ページについて指定するプロパティです。
改ページさせる指定
例えば、次のように使います。
div.pageblock {
page-break-after: always;
}
上記のように記述すると、「pageblock」クラスのdiv要素の直後で、常に改ページされるようになります。
例えば、HTMLを次のように書きます。
<div class="pageblock"> このブロックの直後で改ページされます。 </div> <div class="pageblock"> このブロックは直前のブロックとは異なるページに印刷されます。 </div>
すると、上記の2つのdiv要素は、各要素の直後で改ページされるため、同じ紙（ページ）には印刷されなくなります。
改ページさせない指定・使用上の注意
改ページさせる指定のほか、改ページさせないようにもできます。 また、これらのプロパティを使う際には注意が必要な点もあります。 それらについては、次のページで。
