[CSS]CSS で印刷時のページ分割(改ページ)を行う方法
スポンサード
スポンサード
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 | 要素の直後で改ページ。改ページ後の次ページが右側に来る |
スポンサード
コメント