はじめに

iframeを使ったページを印刷するときに、複数ページに分かれて困ったことはありませんか？これをCSSのフレックスボックスで解決できたので共有します。

※この記事はCSSやiframeの知識が初心者を想定して書いてあります。

ブラウザ環境

Chrome バージョン: 131.0.6778.140（Official Build）（64 ビット）を使って検討しました。Edgeではうまく動作しませんでした。

実行結果

次に示すコードを使うと、4つのiframeを縦に2つ、横に2つならべて表示します。印刷したときも同様のレイアウトで1ページに印刷します。

できあがったコード

まずは全体でどのようなコードになったのか示します。

<!DOCTYPE html>
<html>
<head>
    <title>Embed map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { margin: 0; padding: 0; }
        .container {
            display: flex;
            flex-direction: column; /* 縦方向に配置 */
            height: 100vh;
        }
        .row {
            display: flex;
            flex-direction: row; /* 横方向に配置 */
            width: 100%;
            height: 50%; /* 高さを50%に設定 */
        }
        iframe {
            width: 100%;
            height: 50vh; /* 縦並びのiframeの高さを設定 */
            border: none;
        }
        .half-width-iframe {
            width: 50%; /* 横並びにするための幅 */
            height: 100%; /* 高さを100%に設定 */
            page-break-inside: avoid; /* ページ内での分割を避ける */
        }
        @media print {
            .container {
                height: auto;
                display: block; /* 印刷時にブロック要素として扱う */
            }
            .row {
                display: flex;
                flex-direction: row; /* 印刷時にも横方向に配置 */
                height: auto; /* 高さを自動調整 */
                page-break-inside: avoid;
                page-break-after: auto;
            }
            iframe {
                width: 100%; /* 縦並びのiframeの幅を100%に設定 */
                height: auto; /* 印刷時に高さを自動調整 */
                page-break-inside: avoid; /* ページ内での分割を避ける */
            }
            .half-width-iframe {
                width: 50%; /* 横並びのiframeの幅を設定 */
                height: auto; /* 高さを自動調整 */
            }
        }
    </style>
</head>
<body>
    <h3>名前：〇〇〇〇　xxxx年xx月レポート</h3>
    <div class="container">
        <iframe src="./map_tate.html"></iframe>
        <iframe src="./graph_tate.html"></iframe>
        <div class="row">
            <iframe src="./map_yoko.html" class="half-width-iframe"></iframe>
            <iframe src="./graph_yoko.html" class="half-width-iframe"></iframe>
        </div>
    </div>
</body>
</html>

コードの説明

ポイントを説明します。

<!DOCTYPE html>

HTML5以降を使用していることを宣言

<head>セクション

<meta charset="utf-8">

文字エンコーディングをUTF-8に設定

<meta name="viewport" content="width=device-width, initial-scale=1.0">

レスポンシブデザインのためにビューポート設定
content=width=device-width：ページがデバイスの画面幅に合わせて表示
initial-scale=1.0：初期表示は100％表示

<style> セクション

        body { margin: 0; padding: 0; }

body：デフォルトのマージンを削除、ページ全体の余白とパディングを0に設定

        .container {
            display: flex;
            flex-direction: column; /* 縦方向に配置 */
            height: 100vh;
        }

.container：縦方向のフレックスボックスレイアウトを設定し、コンテンツ全体の高さをビューポートの高さに設定

        .row {
            display: flex;
            flex-direction: row; /* 横方向に配置 */
            width: 100%;
            height: 50%; /* 高さを50%に設定 */
        }

.row：横方向のフレックスボックスレイアウトを設定し、行の高さをビューポートの50%に設定

        iframe {
            width: 100%;
            height: 50vh; /* 縦並びのiframeの高さを設定 */
            border: none;
        }

ifram：各iframeの幅を100%に設定、高さを50vh（ビューポート高さの50%）に設定

        .half-width-iframe {
            width: 50%; /* 横並びにするための幅 */
            height: 100%; /* 高さを100%に設定 */
            page-break-inside: avoid; /* ページ内での分割を避ける */
        }

.half-width-iframe：横並び用のiframeの幅を50%に設定、高さを100%に設定、ページ内での分割を避ける

@ media print セクション

印刷時のスタイルを指定します。

            .container {
                height: auto;
                display: block; /* 印刷時にブロック要素として扱う */
            }

.container：高さを自動調整、ブロック要素として表示

            .row {
                display: flex;
                flex-direction: row; /* 印刷時にも横方向に配置 */
                height: auto; /* 高さを自動調整 */
                page-break-inside: avoid;
                page-break-after: auto;
            }

.row：横方向のフレックスボックスを維持、高さを自動調整、ページ内での分割を避ける設定

            iframe {
                width: 100%; /* 縦並びのiframeの幅を100%に設定 */
                height: auto; /* 印刷時に高さを自動調整 */
                page-break-inside: avoid; /* ページ内での分割を避ける */
            }

iframe：幅を100%に設定、高さを自動調整、ページ内での分割を避ける設定

            .half-width-iframe {
                width: 50%; /* 横並びのiframeの幅を設定 */
                height: auto; /* 高さを自動調整 */
            }

.half-width-iframe：幅を50%に設定、高さを自動調整

ページのメインコンテンツ

    <div class="container">
        <iframe src="./map_tate.html"></iframe>
        <iframe src="./graph_tate.html"></iframe>

縦方向のレイアウトコンテナ、縦並びのiframeを表示

        <div class="row">
            <iframe src="./map_yoko.html" class="half-width-iframe"></iframe>
            <iframe src="./graph_yoko.html" class="half-width-iframe">/iframe>

横方向のレイアウトコンテナ、横並びのiframeを表示

まとめ

この構造により、画面上では縦並びと横並びのiframeを実現し、印刷時はすべてが1ページに収まりました。

※Edgeだとうまくいかないので、どなたか教えてください。