HTMLをきれいにPDF化する方法
印刷に強いHTMLの作り方、ページを制御するCSS、表が途中で切れる・画像が消える・文字が小さすぎるといったよくある問題の防ぎ方をまとめました。
用紙の幅を意識してつくる
A4で余白20 mmなら、使える幅は170 mm、CSSピクセルで約643 pxです。これより広いレイアウトは縮小され、文字が小さくなります。画像には max-width: 100% を指定し、グリッドの幅は%やfrで指定しましょう。
5行でわかる印刷用CSS
- @page { size: A4; margin: 20mm; } で用紙と余白を指定。
- h2 { break-after: avoid; } で見出しと本文を離さない。
- tr, figure { break-inside: avoid; } で表の行や図を分割しない。
- .shou { break-before: page; } で章ごとに改ページ。
- @media print { nav, button { display: none; } } で画面専用の要素を隠す。
フォントと画像
自分のパソコンにしか入っていないフォントは、ほかの環境では表示されません。Webフォントをリンクするか、一般的なフォントを使いましょう。印刷向けの画像は150〜200 ppi以上が目安で、A4の幅いっぱいの写真なら約1,300ピクセル必要です。
出力方法の選び方
請求書、契約書、マニュアルは、文字を検索でき、リンクも残る「PDFとして保存」がおすすめです。ポスターや賞状など、どこで開いても同じ見た目にしたいものは「PDFをダウンロード」を使いましょう。