ブラウザでは読みやすい集計画面でも、そのまま印刷すると操作ボタンが紙に出たり、表が途中で切れたりすることがあります。画面用のCSSを全部変える前に、@media printで印刷時だけの表示を指定できます。
ここでは、架空の月次集計をA4のPDFへ出す小さなHTMLを使います。印刷の見た目を整えることと、集計内容を照合することは別です。印刷できたからといって、数字の照合まで終わったとは扱いません。
印刷時に操作部品を隠す
集計の再実行ボタンや検索欄は、印刷した資料では操作できません。必要な期間や条件は本文に残し、操作用の部分だけを非表示にします。表示条件まで隠してしまうと、何の範囲を印刷したか分からなくなります。
<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>練習用の月次集計</title>
<style>
body { font-family: sans-serif; margin: 24px; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #555; padding: 8px; text-align: left; }
@media print {
.controls { display: none; }
body { margin: 0; color: #000; background: #fff; font-size: 11pt; }
tr { break-inside: avoid; }
thead { display: table-header-group; }
}
@page { size: A4; margin: 15mm; }
</style>
<h1>練習用の月次集計</h1>
<p>対象: 26年10月。確定した明細のみ。単位: 件。</p>
<div class="controls"><button type="button">画面用の再集計</button></div>
<table>
<thead><tr><th scope="col">部門</th><th scope="col">件数</th></tr></thead>
<tbody><tr><th scope="row">北</th><td>12</td></tr>
<tr><th scope="row">南</th><td>8</td></tr></tbody>
</table>
</html>
ブラウザでこのファイルを開き、印刷プレビューを表示します。画面では見える「画面用の再集計」が印刷では消え、対象期間と単位、表の数字が残るかを確かめます。PDFへ保存する場合も、保存先を選ぶ前にプレビューを確認してください。
ページの寸法と改ページ
@pageは用紙の寸法や余白を指定します。この例の15ミリメートルは練習用の設定です。プリンターの印刷できる範囲や、ブラウザ側の拡大縮小、ヘッダー・フッター設定とも関係するため、CSSだけで全環境の仕上がりが同じになるとは限りません。
break-inside: avoidは行の途中で分かれないよう求める指定です。行そのものが1ページを超える長さなら、分割を完全に避けられる保証にはなりません。長い備考を同じ行へ詰める場合は、表を分けるなど構成から見直します。
表全体へ分割を避ける指定を付けると、大きな表が次のページへ押し出され、余白が増える場合があります。どの単位を一緒に見たいかを考え、表全体なのか、1行なのかを分けて指定します。複数ページにわたる表では、列の見出しが続きのページでも分かるかも確認してください。
色を外しても意味を残す
赤い数字だけで未確定、緑の数字だけで確認済みを表していると、白黒印刷で区別がつきにくくなります。「未確定」「確認済み」という文字や列を残し、背景色が印刷されなくても判断できる形にします。
横幅が広すぎる場合は、単純に文字を小さくする前に、不要な列、長い説明、用紙の向きを確認します。縮小した結果、金額の桁やIDが読めなくなっていないかを、保存したPDFでも確かめてください。
この例ではローカルのブラウザからPDFを作り、画面用ボタンが出ず、表と対象条件が残る範囲を確認します。実プリンターや複数ページの長い帳票まで検証した結果ではありません。実務では1ページの正常例に加え、長文、空の表、多い行数も印刷し、最後の行まで欠けていないかを確認します。
関連する記事
月次レポートを自動化する設計｜CSV集計からPDF化までの流れ
GASでスプレッドシートからPDFを作る方法｜帳票出力の基本
