記事

CSSのpage-break-before/page-break-afterプロパティで少しハマったのでメモ。

page-break-before/page-break-afterとは

page-break-before/page-break-afterはページを印刷したときに、明示的に改ページを指示するCSSプロパティです。
以下に例を示します。

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="page-break">
        <h1>1ページ目の内容です</h1>
        <p>1ページ目1ページ目1ページ目1ページ目1ページ目1ページ目1ページ目1ページ目1ページ目1ページ目</p>
    </div>
    <div class="page-break">
        <h1>2ページ目の内容です</h1>
        <p>2ページ目2ページ目2ページ目2ページ目2ページ目2ページ目2ページ目2ページ目2ページ目2ページ目</p>
    </div>
</body>

</html>
.page-break {
    page-break-after: always;
}

このコードをブラウザで印刷すると以下のようになります。きちんと改ページが反映されています。

page-break

ネガティブマージンを適用する

CSSを以下のように変更します。

.page-break {
    page-break-after: always;
    margin: 0 -50px;
}

このように左右にネガティブマージンを入れると、表示領域をはみ出してしまうわけですがこのときの印刷が以下のようになります。左右をはみ出して印刷したいのが意図ですが、上下にもずれてしまいます。この現象はChromeだけ起きるようで、FirefoxやIEでは発現しません。このような使い方をする場面はほとんどないかと思われますが、page-breakの印刷がずれる場合はチェックしてみてはいかがでしょうか。

page-break-error

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 × five =