page-break-before 【印刷時の改ページ指定】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns7]

page-break-beforeプロパティは、印刷の改ページ箇所を指定する際に使用します。このプロパティが指定された要素の直前で強制的に改ページさせたり、その位置での改ページを禁止したりします。

auto
特にその位置での改ページを指定しません。

always
指定された要素が生成するボックスの直前で、常に強制的に改行します。

avoid
指定された要素が生成するボックスの直前での改行を禁止します。

left
指定された要素が生成するボックスの直前で、常に強制的に改行します。次のページが左手側のページとして整形出来るように、必要に応じて改頁します。

right
指定された要素が生成するボックスの直前で、常に強制的に改行します。次のページが右手側のページとして整形出来るように、必要に応じて改頁します。

page-break-beforeの使用例

CSSファイル

.sample001 {
 page-break-before: always;
 page-break-after: avoid;
}
.sample002 {
 page-break-before: avoid;
 page-break-after: always;
}

HTMLソース

<p class="sample001">
CSSは、HTMLをブラウザで見る際に、要素の表示方法を指定出来るものです。HTMLには文章構造と意味付けに専念してもらい、CSSが表示方法を担当する事で、非常に合理的になりました。<br />
同じ情報ソースに対して、PC用のスタイルシート、モバイル用のスタイルシート、プリントアウト用のスタイルシートと、別々のスタイルを指定する事で、各端末に最適化された表現が可能となりました。CSSの解釈や各端末の実装が統一されれば、あらゆる場面で情報ソースの共有と有効活用が出来るようになるでしょう。
</p>
<p class="sample002">
例えば、料理のレシピのデータベースに、インターネット接続されたテレビからアクセスして今夜のおかずを考えたり、買い物中に携帯からアクセスして食材を確認したり、プリントアウトして献立表を作ったり出来るようになります。アクセス先が同じで、各端末に合わせて表示を切り替えてくれたなら、利用者はとても便利になると思いますよね。
</p>

表示すると

CSSは、HTMLをブラウザで見る際に、要素の表示方法を指定出来るものです。HTMLには文章構造と意味付けに専念してもらい、CSSが表示方法を担当する事で、非常に合理的になりました。
同じ情報ソースに対して、PC用のスタイルシート、モバイル用のスタイルシート、プリントアウト用のスタイルシートと、別々のスタイルを指定する事で、各端末に最適化された表現が可能となりました。CSSの解釈や各端末の実装が統一されれば、あらゆる場面で情報ソースの共有と有効活用が出来るようになるでしょう。

例えば、料理のレシピのデータベースに、インターネット接続されたテレビからアクセスして今夜のおかずを考えたり、買い物中に携帯からアクセスして食材を確認したり、プリントアウトして献立表を作ったり出来るようになります。アクセス先が同じで、各端末に合わせて表示を切り替えてくれたなら、利用者はとても便利になると思いますよね。

印刷関連項目

page-break-before 印刷の改ページ箇所を指定する 
page-break-after 印刷の改ページ箇所を指定する 

戻る

TOP