• HOME
  • HTML/CSS
  • 印刷時の改ページ部分を指定する方法

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

管理人:sofu

ページを印刷すると意図しない箇所で途切れてしまう時ってありませんか?
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のサンプル

blog comments powered by Disqus

PageTop