印刷用のスタイル

■改ページ位置を指定

・CSS2仕様、IE4〜のみ一部対応

page-break-after ・・・指定したHTML要素の直後で改ページ
page-break-before ・・・指定したHTML要素の直前で改ページ
page-break-inside・・・現在どのプラウザも対応していない。

(設定値)
auto ・・・規定値(プラウザの判断にまかす)
always ・・・改ページする
avoid ・・・改ページしない。現在未対応
left ・・・左右の指定を無視して改ページされる
right ・・・左右の指定を無視して改ページされる

■印刷用の@media規則

・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)