page-break-beforeプロパティ

TOPページに戻る > CSS

スポンサード リンク

page-break-beforeプロパティ

ページを印刷するときの改ページの位置が指定できます
指定したブロック要素の前で改行することができます
値がalways、auto以外の値は対応しているブラウザが少ないです
初期値はautoでブラウザが自動で改ページを決めます

使い方(書式)

セレクタ { page-break-before: 値; }                                    

page-break-beforeプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 ブロック要素
子要素へのスタイルの継承 しない

プロパティの値 説明
auto ブラウザが自動で判断。初期値
always 指定したブロック要素の前で改行する
avoid 要素の前で改行されなくなる
left コンテンツが左ページにくるようにする。対応ブラウザがOperaのみ
right コンテンツが右ページにくるようにする。対応ブラウザがOperaのみ

実際の指定方法

.hoge { page-break-before: auto; }    /* ブラウザが自動で判断 */
.hoge2 { page-break-before: always; } /* ブロック要素の前で改行 */
.hoge3 { page-break-before: avoid; }  /* ブロック要素の前で改行されなくなる */
.hoge4 { page-break-before: left; }   /* コンテンツが左ページにくるようにする */
.hoge5 { page-break-before: right; }  /* コンテンツが右ページにくるようにする */

html部分

<div class="hoge2">
<p>2ページ目。印刷するときブロック要素の前で改行します</p>
</div>
<div class="hoge2">
<p>3ページ目。印刷するときブロック要素の前で改行します</p>
</div>



実際の表示

2ページ目。印刷するときブロック要素の前で改行します

3ページ目。印刷するときブロック要素の前で改行します


(C)2012 ホームページ作成無料