page-break-after：印刷の改ページ箇所を指定する
| 適用対象 | ブロックレベル要素 |
| 継承 | しない |
このプロパティは非推奨または廃止になりました。新しく作るウェブサイトへの使用は避けて下さい。また、既存のソースコードの中に含まれている場合は更新をお勧めします。詳しくは現行の標準仕様に従って下さい。
page-break-afterプロパティは、印刷時に要素の直後での改ページをコントロールする使用します。このプロパティが指定された要素の直後で強制的に改ページさせたり、その位置での改ページを禁止したりします。
Internet Explorerのバージョン7までは、[auto], [always]以外の値に対応していないようです。
page-break-afterに与えられる値
- page-break-after: auto;
- 特にその位置での改ページを指定しません。
- page-break-after: always;
- 指定された要素が生成するボックスの直後で、常に強制的に改行します。
- page-break-after: avoid;
- 指定された要素が生成するボックスの直後での改行を禁止します。
- page-break-after: left;
- 指定された要素が生成するボックスの直後で、常に強制的に改行します。次のページが左手側のページとして整形出来るように、必要に応じて改頁します。
- page-break-after: right;
- 指定された要素が生成するボックスの直後で、常に強制的に改行します。次のページが右手側のページとして整形出来るように、必要に応じて改頁します。
page-break-afterの使用サンプル
CSS
.sample01 {
page-break-before: always;
page-break-after: avoid;
margin-bottom: 10px;
}
.sample02 {
page-break-before: avoid;
page-break-after: always;
}
XHTML
<p class="sample01">
CSSは、HTMLをブラウザで見る際に、要素の表示方法を指定出来るものです。HTMLには文章構造と意味付けに専念してもらい、CSSが表示方法を担当する事で、非常に合理的になりました。<br />
同じ情報ソースに対して、PC用のスタイルシート、モバイル用のスタイルシート、プリントアウト用のスタイルシートと、別々のスタイルを指定する事で、各端末に最適化された表現が可能となりました。CSSの解釈や各端末の実装が統一されれば、あらゆる場面で情報ソースの共有と有効活用が出来るようになるでしょう。</p>
<p class="sample02">
例えば、料理のレシピのデータベースに、インターネット接続されたテレビからアクセスして今夜のおかずを考えたり、買い物中に携帯からアクセスして食材を確認したり、プリントアウトして献立表を作ったり出来るようになります。アクセス先が同じで、各端末に合わせて表示を切り替えてくれたなら、利用者はとても便利になると思いますよね。</p>
表示確認
CSSは、HTMLをブラウザで見る際に、要素の表示方法を指定出来るものです。HTMLには文章構造と意味付けに専念してもらい、CSSが表示方法を担当する事で、非常に合理的になりました。
同じ情報ソースに対して、PC用のスタイルシート、モバイル用のスタイルシート、プリントアウト用のスタイルシートと、別々のスタイルを指定する事で、各端末に最適化された表現が可能となりました。CSSの解釈や各端末の実装が統一されれば、あらゆる場面で情報ソースの共有と有効活用が出来るようになるでしょう。
例えば、料理のレシピのデータベースに、インターネット接続されたテレビからアクセスして今夜のおかずを考えたり、買い物中に携帯からアクセスして食材を確認したり、プリントアウトして献立表を作ったり出来るようになります。アクセス先が同じで、各端末に合わせて表示を切り替えてくれたなら、利用者はとても便利になると思いますよね。
page-break-afterに関連するCSSプロパティ
| 非推奨または廃止されたプロパティ | |
|---|---|
| background-break | インライン要素の背景画像の繰り返し方法を指定する |
| baseline-shift | 優先するベースラインを指定し直す |
| bookmark-label | ブックマークのラベル（名前）を指定する |
| bookmark-level | ブックマークのレベル（度合い）を指定する |
| bookmark-target | ブックマークのターゲット（対象）を指定する |
| border-break | ボックスが分割された場合のボーダーの表示方法を指定する |
| box-align | 親要素内に含まれる子要素を揃える水平位置の基準を指定する |
| box-direction | 親ボックス内に配置する子要素の表示方向を指定する |
| ime-mode | テキスト入力時のIMEの状態を指定する |
| marker-offset | リストマーカーとの間隔を指定する |
| page-break-after | 印刷時の改ページ位置を、特定の要素直後に指定する |
| page-break-before | 印刷時の改ページ位置を、特定の要素直前に指定する |
| scrollbar-base-color | スクロールバーのベースになる色を指定する |
| scrollbar-arrow-color | スクロールバーの矢印にあたる色を指定する |
| scrollbar-face-color | スクロールバーの表面にあたる色を指定する |
| scrollbar-3dlight-color | スクロールバーの左端と上端にあたる色を指定する |
| scrollbar-highlight-color | スクロールバーのハイライトにあたる色を指定する |
| scrollbar-shadow-color | スクロールバーの影にあたる色を指定する |
| scrollbar-darkshadow-color | スクロールバーの右端と下端にあたる色を指定する |
| text-autospace | アルファベット等との間隔を指定 |
| zoom | 要素の表示倍率（拡大・縮小）を指定する |