[CSS]CSSで印刷時のページ分割（改ページ）を行う方法

CSSプロパティ

2012.10.052013.05.23

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>

<style>

.page-break-before {

page-break-before:always

}

</style>

…

<p>この文章の直前で改ページさせる</p>

</div>

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

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

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

…

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

<style>

.page-break-after {

page-break-after:always

}

</style>

…

<p>この文章の直後で改ページさせる</p>

</div>

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