• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

なんてことがよく起こりますが、CSS の page-break-beforepage-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要素の直後で改ページ。改ページ後の次ページが右側に来る



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください