2009.08.16

印刷時の改ページ部分を指定する方法

改ページのプロパティ値

ページを印刷すると意図しない箇所で途切れてしまう時ってありませんか？
CSS（スタイルシート）を使うと、改ページして欲しい箇所、または改ページして欲しくない箇所を指定することができます。

印刷時の改ページに関するプロパティ

改ページに関するCSS（スタイルシート）は下記のとおりです。

対象セレクタ	ブロックレべル要素

改ページのプロパティ一覧
page-break-before	要素の直前の改ページを指定	auto、always、avoid、left、right
page-break-after	要素の直後の改ページを指定	auto、always、avoid、left、right
page-break-inside	要素内の改ページを指定	auto、avoid

プロパティの値
auto	初期値。その要素の直前（before)、直後（after）、要素内（inside）での改ページを指定しません。
always	その要素の直前（before)、直後（after）で強制的に改ページさせます。
avoid	その要素の直前（before)、直後（after）、要素内（inside）での改ページを禁止します。
left	その要素の直前（before)、直後（after）で改ページを行い次のページが見開きで左側のページになるようにします。
right	その要素の直前（before)、直後（after）で改ページを行い次のページが見開きで右側のページになるようにします。

page-break-beforeのサンプル

page-break-beforeは要素の直前の改ページを指定します。

 
.auto {
	page-break-before: auto;
}
.always {
	page-break-before: always;
}
.avoid {
	page-break-before: avoid;
}
.left {
	page-break-before: left;
}
.right {
	page-break-before: right;
}

→page-break-beforeのサンプル

page-break-afterのサンプル

page-break-afterは要素の直後の改ページを指定します。

 
.auto {
	page-break-after: auto;
}
.always {
	page-break-after: always;
}
.avoid {
	page-break-after: avoid;
}
.left {
	page-break-after: left;
}
.right {
	page-break-after: right;
}

→page-break-afterのサンプル

page-break-insideのサンプル

page-break-insideに対応しているのはIE8やOperaぐらいだと思いますので、使う機会は少ないと思います。

 
.auto {
	page-break-inside: auto;
}
.avoid {
	page-break-inside: avoid;
}

→page-break-insideのサンプル

TRACKBACK URL トラックバック用URL

COMMENT LIST

No.1

ganx

これは参考になりました

印刷時にIE6のみで改ページ直後のコンテンツが切れてしまって困っていました。
こちらの強制的に次ページにしてしまうことで解消できました。ありがとうございました。

2009.08.20 10:24

No.2

webbibo管理人

Re:

お役に立てれて何よりです。
これからも良い情報を載せていきたいと思います。

2009.08.20 12:55

POST YOUR COMMENT