page-break-***: ***;
| ブラウザ |
|
|---|---|
| プロパティ |
page-break-before と page-break-after は、印刷時の改ページ部分を制御するプロパティです。
page-break-before… 要素の直前の改ページを制御page-break-after… 要素の直後の改ページを制御
hr {
page-break-after: always;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
page-break-before（直前） |
auto |
制御しない （初期値） |
always |
直前で改ページさせる | |
avoid |
直前の改ページを禁止する | |
page-break-after（直後） |
auto |
制御しない （初期値） |
always |
直後で改ページさせる | |
avoid |
直後の改ページを禁止する |
avoid の指定は、Opera以外では対応していないようです。
指定例
- 見出し（h2要素）の直前で改ページさせる例
-
h2 { page-break-before: always; } - 水平線（hr要素）で区切って改ページさせる例
-
hr { page-break-after: always; }
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
h2 {
page-break-before: always;
}
</style>
</head>
<body>
<h1>印刷時の改ページ</h1>
<p>これは1ページ目です。</p>
<p>（改ページ部分は印刷プレビューで確認できます）</p>
<hr>
<h2>■中見出し</h2>
<h3>小見出し</h3>
<p>これは2ページ目です。</p>
<hr>
<h2>■中見出し</h2>
<h3>小見出し</h3>
<p>これは3ページ目です。</p>
<hr>
</body>
</html>
- 表示例
