ブラウザの印刷プレビュー時にHTMLページをA4用紙サイズに設定する方法

2020/9/25 2023/11/2 HTML/CSS/JavaScript/TypeScript, Tips

この記事は公開から4年以上経過しています。

ブラウザの印刷プレビュー時にHTMLのレイアウトをA4用紙サイズに指定する方法についての備忘録です。

対応

@media printにてbodyタグのサイズにA4用紙サイズを設定します。

本記事はモダンブラウザとレガシーブラウザ(IE11)の両方に対応する必要があるシステムで検討していた内容となりますので、モダンブラウザ限定の場合は@pageのsize: A4を利用してください。

サンプルソースコード

一目で分かり易いようにCSSファイルを使わず敢えてstyleタグやインラインで記述しています。

<!DOCTYPE html>
<html lang="en"
    style="background-color: gray;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set HTML page size in A4 paper size in browser print preview</title>
    <style>
        /* ここで用紙サイズを指定する(A4=210mmx297mm) */
        @media print {
            body {
                margin: 0;
                width: 210mm;
                height: 297mm;
            }
        }

    </style>
</head>

<body>
    <div style="width:100%; height:100%; border: 1px solid black; background-color: white;">
        <span>TEST</span>
    </div>
</body>

</html>

結果

以下の通り、ブラウザの印刷プレビュー時にはページのコンテンツがA4サイズでレイアウトされるようになりました。

通常表示のとき：

印刷プレビューのとき：

以上です。