page-break-***: ***;
- ブラウザ
- 特性
- page-break-before
- page-break-after
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; }
使用例
■h2要素の直前で改ページさせる例
<!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>
表示例
- サイト内検索
