・CSS2仕様、IE4〜のみ一部対応
page-break-after ・・・指定したHTML要素の直後で改ページ
page-break-before ・・・指定したHTML要素の直前で改ページ
page-break-inside・・・現在どのプラウザも対応していない。
(設定値)
auto ・・・規定値(プラウザの判断にまかす)
always ・・・改ページする
avoid ・・・改ページしない。現在未対応
left ・・・左右の指定を無視して改ページされる
right ・・・左右の指定を無視して改ページされる
・CSS2仕様、IE5.0〜(Winのみ)、NN6〜 に対応
(書式)
<style TYPE="text/css">
<!--
@media screen{
ここに画面表示用のスタイルを記述
}
@media print{
ここに印刷用のスタイルを記述
}
-->
</style>
このページでは、上の区切り線の直前に改ページを設定している。
また画面表示用と印刷用のスタイルも設定してます(詳細は下のHTML Sourceを参照)
このボタンで印刷できます。
HTML Source......................................................................>>>
<style TYPE="text/css">
<!--
@media screen{
h5{color:blue;border:solid thin gray}
p{margin-left:10;color:navy}
.test{color:green;border:solid thin gray}
}
@media print{
h5{color:red;border:double green}
p{font:bold 14pt}
.test{color:blue;border:double thin red}
}
-->
</style>
</head>
<body>
<h4 class="header">印刷用のスタイル</h4>
<h5>■改ページ位置を指定</h5>
<p>・CSS2仕様、IE4〜のみ一部対応</p>
<p class="test">
page-break-after ・・・指定したHTML要素の直後で改ページ<br>
page-break-before ・・・指定したHTML要素の直前で改ページ<br>
page-break-inside・・・現在どのプラウザも対応していない。</p>
<p> (設定値)<br>
auto ・・・規定値(プラウザの判断にまかす)<br>
always ・・・改ページする<br>
avoid ・・・改ページしない。現在未対応<br>
left ・・・左右の指定を無視して改ページされる<br>
right ・・・左右の指定を無視して改ページされる</p>
<h5>■印刷用の@media規則</h5>
<p>・CSS2仕様、IE5.0〜(Winのみ)、NN6〜 に対応</p>
<p class="test">(書式)
・・・(省略)
<hr style="page-break-after:always">
end(03/7/11)