スポンサード

WEbページを印刷する場合、

「なんでここでページ分割されるの？？」

なんてことがよく起こりますが、CSS の page-break-before や page-break-after を使えば、ページ分割（改ページ）位置を指定してあげることができます。

page-break-before

直前で改ページさせるには page-break-before を使います。

<style>
.page-break-before	{
	page-break-before:always
}
</style>

…

<div class="page-break-before">
<p>この文章の直前で改ページさせる</p>
</div>

page-break-before の値

auto	制御なし（初期値）
always	要素の直前で改ページ
avoid	要素の直前での改ページの禁止
left	要素の直前で改ページ。改ページ後の次ページが左側に来る
right	要素の直前で改ページ。改ページ後の次ページが右側に来る

page-break-after

直後で改ページさせるには page-break-after を使います。

<style>
.page-break-after	{
	page-break-after:always
}
</style>

…

<div class="page-break-after">
<p>この文章の直後で改ページさせる</p>
</div>

page-break-after の値

auto	制御なし（初期値）
always	要素の直後で改ページ
avoid	要素の直後での改ページの禁止
left	要素の直後で改ページ。改ページ後の次ページが左側に来る
right	要素の直後で改ページ。改ページ後の次ページが右側に来る

スポンサード