Markdown PDF・印刷で崩れる原因と対策まとめ

Markdown PDF でよくある崩れ（余白・改ページ・背景色・フォント・表はみ出し）の原因と対策を解説。画面と印刷のCSS差、ブラウザ別の違い、切り分けチェックリスト付き。

Markdown で書いた資料を PDF にしたあと、またはブラウザから印刷したあと、「画面では問題なかったのに、表がはみ出す」「見出しの真ん中でページが切れる」「フォントが別のものに変わっている」「背景色が出ない」といったトラブルは、業務ドキュメントではよく聞かれます。原因は大きく分けて、変換パイプライン（HTML/CSS）の解釈、用紙・余白・印刷エンジン、コンテンツそのものの幅と長さの三層に整理できます。ここでは代表的なパターンと、実務で効きやすい対策の方向性をまとめます。

崩れのタイプ別：何が起きているか

まず見出しや表の途中でページが切れる問題は、Markdown 自体に「ページ」という概念がないため、ツールが自動で改ページを決めている結果です。見出しの直前に改ページを入れたい、表は1枚に収めたい、といった要望は CSS の改ページプロパティや、本サイトのようにプレビュー上で改ページ位置を調整するといった手段で吸収します。何も指定しないと、ブラウザや PDF エンジンの既定アルゴリズムに任されるため、意図とずれやすいです。

次にフォントや余白が想定と違うケースは、@page の margin、本文の padding、ブラウザの印刷ダイアログの「余白」設定が二重にかかっているパターンが典型です。画面プレビュー用のスタイルと、印刷用メディアクエリ @media print の指定が一致していないと、見た目がガラッと変わります。

コードブロックや表が横にはみ出す場合は、長い URL・長い識別子・タブ文字などが折り返されず一行が極端に長くなっていることが多いです。PDF は紙幅が有限なので、ソース側で改行位置を調整するか、ツール側の折り返し・フォントサイズ・最大幅の指定が効くかを確認します。

画像が大きすぎる／小さすぎる場合は、max-width: 100% などの CSS が効いているか、画像の実ピクセルが極端に大きいかを確認します。Retina 用の高解像度画像をそのまま貼ると、意図せず印刷で巨大化することもあります。

プレビューはきれいなのに、印刷・PDF だけ崩れる

「画面上のプレビューは問題ないのに、印刷したら／PDF にしたらレイアウトが変わる」は、画面用 CSS と印刷用 CSS の差が主な理由です。多くのサイトは @media screen と @media print で別のルールを持ちます。画面では幅いっぱいに広がるレイアウトでも、印刷では幅を制限した本文カラムになる、逆に背景色や罫線が消える（ブラウザの「背景のグラフィックを印刷」がオフなど）、といった差が出ます。開発者ツールで印刷用スタイルをエミュレートできる場合もありますが、最終的には実際の印刷プレビューで確認するのが確実です。

よくある原因（チェックリスト）

  1. 余白が二重 — ブラウザの「余白なし」「最小」と、CSS の @page や body の margin / padding が加算・上書きされている。
  2. 改ページ — 見出しの直後や表・コードブロックの途中でページが切れる。
  3. 背景色・罫線 — 既定では背景が印刷されない設定のブラウザが多く、「背景のグラフィック」をオンにしないと色が出ない。
  4. フォント — 画面用に指定したフォントが印刷時に別ファミリに置き換わり、行送りや改行位置が変わる。
  5. ズームと用紙 — ブラウザのズームが 100% でない、用紙サイズが A4 ではない、などでスケールがずれる。

Chromium 系、Firefox、Safari で印刷エンジンが異なるため、同じ HTML でも改ページ位置やフォントの扱いがわずかに変わることがあります。社内でテンプレートを配布するときは、推奨ブラウザと PDF 保存手順を README に書いておくと問い合わせが減ります。

対策を組み合わせる

第一に、改ページをルール化することです。大見出しの前では必ず改ページ、表とコードブロックは途中で切らない、といったポリシーをレイアウト設定に反映し、個別の調整はプレビューで行う、という二段構えが再現性が高いです。第二に、余白・フォント・行間をレイアウト画面で明示し、印刷プレビューで確認する。第三に、プレビューと同じ経路で PDF 化する（例：ブラウザの「PDF に保存」）と、CSS の当たり方がプレビューに近づきやすいです。ツール側に レイアウト設定がある場合は、余白・フォント・行間を先に揃え、PDF に保存してから配布すると、閲覧者のブラウザ差の影響を減らせることが多いです。紙で提出する資料なら、実機印刷で最終確認するのが安全です。

このサイトのツールでできること

Markdown を PDF に では、レイアウト設定に加え、プレビュー上で改ページをドラッグしたり、表やコードの分割を避けるオプションを選べます。まずは既定のレイアウトで PDF を一度出し、問題のあるページだけ余白や改ページを触ると効率的です。崩れの多くは「指定が足りない」ことに起因するため、まずはレイアウトと改ページを一通り触ってから、細部の Markdown を直す流れが効率的です。社外提出の PDF で体裁が厳しい場合は、表紙・目次の有無やフォント指定も合わせて確認し、最後に実機の印刷プレビューで一度通し読みするのがおすすめです。

トラブル時の切り分け順

まず 印刷プレビューを 100% 表示にし、用紙と向きを確定します。次に 余白オプションを「既定」に戻して再現するか見ます。「プレビューと PDF のどちらが正しい基準か」を決め、差が出る箇所が改ページ・余白・横はみ出しのどれに当たるかをメモします。まだ崩れるなら 開発者ツールで @media print のルールを確認し、画面用の flex/grid が印刷で無効化されていないかを見ます。表やコードが切れる主因なら、改ページ用の CSS やツールの改ページ設定に切り替えます。同じ原稿を別ブラウザで PDF 化して差があるか見ると、エンジン依存の問題かどうかが分かります。それでも解消しないときは、該当ブロック（表・コード・画像）を最小構成にしたサンプルに切り出して試すと、原因箇所が特定しやすくなります。最後に PDF を別 PC で開き、閲覧者視点で通し読みすると配布後のクレームを減らせます。

よくある質問（FAQ）

Q. Chrome と Firefox で PDF の見た目が違います

Chrome と Firefox は異なる印刷エンジンを使用しています。改ページ位置・フォントレンダリング・背景色の扱いが微妙に異なります。社内テンプレートを配布する場合は使用ブラウザを統一し、Google Chrome を推奨するのが最も安定します。

Q. シンタックスハイライトの背景色が PDF に出ません

印刷ダイアログで「背景のグラフィック」（Background graphics）をオンにしてください。Chrome では詳細設定でこのオプションを切り替えられます。

Q. PDF 保存後に文字が小さくなりました

ブラウザのズームが 100% 以外になっていないか確認してください。また印刷ダイアログの「縮小して合わせる」などのオプションが有効になっている場合はオフにしてください。

Q. 特定のページだけ崩れます

そのページ付近に特別に長い行・大きな画像・複数列の表がないか確認してください。また改ページの位置が問題の場合は、プレビューで改ページをドラッグして調整 する方法を試してください。

まとめ

PDF や印刷での崩れは、ページ制御・余白・横方向の幅、および画面と印刷の CSS の差に原因を寄せて考えると対処しやすくなります。Markdown の書き方だけでなく、出力パイプライン側の設定をセットで見直しましょう。繰り返し同じ不具合が出る場合は、テンプレート化できるレイアウトプリセットをチームで1つ用意しておくと、全員の出力品質が揃いやすくなります。

関連記事