| IE6.0 | IE5.5 | IE5.0 | IE4.0 | IE5Mac | Opera | |||
| 印刷時に改ページしよう | ||||||||
| テキストだけのページなら問題ないですが、画像やテーブルなどが含まれたページで、印刷時におかしなところで改ページされてしまうことがあります。これを防ぐCSSです。 | ||||||||
| 解説 | ||
印刷時に改ページを制御できるCSSがありますので、それを使います。なお、このCSSは印刷時にだけ有効で、ブラウザで表示させているときには全く影響ありません。
page-break-after : 形式 //指定した要素の直後で改ページ page-break-before : 形式 //指定した要素の直前で改ページ形式は、auto/always/avoid/left/rightのいずれかを取ることになっていますが、現状のブラウザでは機能しない形式もありますので、改ページさせたいときはalwaysを使用すると覚えておけばよいでしょう。 |
||
| Sample-1 (1.html) | ||
以下のようなページを印刷したとき、１ページ目は普通に印刷され２ページ目は何もないページが印刷されます。
<html>
<head>
<title>印刷時改ページ（後）</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.after { page-break-after : always }
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
この写真の後ろで改ページ<br>
<img src="1.jpg" width="400" height="300" class="after">
</body>
</html>
|
||
| Sample-2 (2.html) | ||
以下のようなページを印刷したとき、１ページ目は何もないページが印刷され、２ページ目は普通に印刷されます。<html>
<head>
<title>印刷時改ページ（前）</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.before { page-break-before: always }
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="1.jpg" width="400" height="300" class="before">
<br>この写真の前で改ページ
</body>
</html>
|
||
| 注意 | ||
| このCSSはInternet ExplorerとOperaで有効なのですが、制限事項が多いのが玉にきずです。Internet Explorer 6なら、どんなタグにでも改ページを与えることができますが、Internet Explorer 4/5やMacintoshでは、改ページが効かないタグもあります。サンプルのように<img>タグなら、Internet Explorer 4/5/6とMacintoshで、きちんと改ページされて印刷されます。一方Operaは、かなり制限があり、このサンプルでも改ページ印刷できませんので、Internet Explorer限定で使った方がよさそうです。 | ||