・ 更新: PDFレイアウト・改ページ

執筆・検証: MD Converter編集部

Markdown PDF の余白を調整する方法｜@page・印刷ダイアログ・mm 指定

Markdown PDF の余白が思い通りにならない原因と対処法。@page と body の padding が競合するケース、ブラウザ印刷ダイアログとの関係、左綴じ向け非対称余白の設定方法まで整理します。

この記事でわかること

  • Markdown PDF で余白が決まる仕組み（CSS の層と印刷ダイアログの関係）
  • @page と body の padding がどう使い分けられるか
  • ブラウザの印刷ダイアログの余白設定と CSS が競合するケース
  • **左綴じ（綴じ方向）**を意識した非対称余白の考え方
  • ヘッダー・フッター・ページ番号が余白に与える影響
  • mm と pt・px の変換誤差と確認方法

PDF の「余白」は、用紙の端から本文までの距離を指します。Markdown そのものに余白の記法はないため、HTML に変換したあと、CSS の印刷用スタイルとブラウザの印刷ダイアログの両方で、見た目が決まります。余白が「期待と違う」ときは、CSS の @page と body の padding、ブラウザ側の「余白」オプションがかち合っていないかを最初に疑うとよいです。

余白が決まるレイヤー

典型的には、@page { margin: … } でページ全体の余白を指定し、必要に応じて body { padding: … } で本文ブロックの内側を整えます。ツールによっては「レイアウト設定」に 上下左右の mm 指定があり、それが内部でこれらの CSS にマッピングされます。印刷プレビューでは、用紙サイズ（A4 等）と向き（縦・横）も合わせて確認してください。用紙が変わると、同じ余白指定でも実効的な本文幅が変わります。

ブラウザの印刷ダイアログとの関係

「余白：最小」「余白：なし」など、ブラウザ独自のオプションが CSS の margin と加算・上書きされることがあります。プレビューではきれいでも PDF 保存時だけズレる場合は、印刷ダイアログの余白設定を一度「デフォルト」に戻して試す価値があります。複数ブラウザで比較すると、エンジン差も把握しやすいです。

左綴じ・右綴じを意識する場合

紙で配布し、左綴じで読む資料では、のど側（綴じ側）の余白を多めに取る、といった非対称の余白が必要になることがあります。レイアウト設定で左右を個別に指定できる場合は、そこに反映します。画面上は対称でも、印刷では片側だけ広い方が読みやすい、という判断もあります。

表紙・目次を使う場合

表紙や目次ページを付けると、本文の開始位置が視覚的に変わります。余白は「全ページ共通」か「表紙のみ別」かで運用が変わるため、表紙付きで PDF を出すときは、本文の1ページ目の余白感も必ず確認してください。

ヘッダー・フッター・ページ番号

印刷ダイアログや PDF エンジンによっては、日付・URL・ページ番号が余白内に自動で入り、本文領域が狭く見えることがあります。これは @page の margin とは別レイヤーなので、「数値は足りているのに窮屈」というときは、ヘッダー／フッターの有無もチェックしてください。提出規程で「余白○mm」と書かれている場合、番号やヘッダーを含めた領域まで含むのか、本文ブロックだけなのか、先方の意図を確認するとトラブルを防げます。

解像度と拡大表示

画面上で拡大して読んでいると、**同じ PDF でも「余白が大きく感じる」**ことがあります。印刷物としての最終確認は、100% 表示か、実寸に近いプレビューで行うのがおすすめです。モニターの OS スケーリング設定とブラウザのズームが重なると、見かけの比率が変わります。

mm と pt・px の関係

印刷の余白は mm で指定されることが多く、ツールの入力欄も mm になっていることがあります。一方、CSS では pt や px が混在しがちで、変換時にわずかな丸め誤差が出ると、体感では「1〜2mm ズレた」ように見えることがあります。提出規程が厳しい場合は、最終 PDF を実際に印刷して定規で測る検証が確実です。社内テンプレートでは、余白の数値を README に固定して共有すると、担当者が変わってもブレにくくなります。

CSSで上下左右の余白を指定する

印刷CSSでは@pageを使って余白を指定します。ブラウザの印刷ダイアログで別の余白を重ねないようにしてください。

@page {
  size: A4;
  margin: 20mm 18mm 22mm 18mm;
}

値は上、右、下、左の順です。表紙と本文で余白を変える場合は、利用するPDFエンジンが名前付きページに対応しているか確認します。

よくある質問（FAQ）

Q. PDF の余白を 20mm に設定したのに、もっと広く見えます

ブラウザの印刷ダイアログの「余白」設定が「デフォルト」以外になっている可能性があります。印刷ダイアログを開き、余白を「デフォルト」または「なし」に設定したうえでレイアウト設定の値が正しく反映されているか確認してください。

Q. 左右の余白だけ変えることはできますか？

はい。@pageの4値指定で上下左右を個別に設定できます。左綴じの資料では左側を右側より広めにします。見開きの左右ページを分ける指定は、PDFエンジンの対応状況を確認してください。

Q. 余白を「なし」に近く設定すると、端の文字が切れます

プリンタには印刷できない「非印刷領域」があります。余白ゼロに近い設定では文字が切れる場合があるため、最低でも 5〜10mm の余白を確保することをおすすめします。

Q. ヘッダーとフッター（URL・日付・ページ番号）を消すにはどうすればいいですか？

ブラウザの印刷ダイアログで「ヘッダーとフッター」または「Header and footers」のチェックを外してください。Chrome の場合は詳細設定で個別に制御できます。

Q. A4 と Letter で余白が違って見えます

用紙サイズが変わると同じ mm 指定でも相対的な見え方が変わります。提出先の用紙サイズを確認し、レイアウト設定で一致させてください。

まとめ

余白は CSS と印刷ダイアログの組み合わせで決まります。数値を変えたら必ず印刷プレビューで確認し、提出先の用紙指定に合わせて再調整しましょう。複数ページにまたがる資料では、奇数ページ・偶数ページで余白感が違うと感じたら、綴じ方向とヘッダー表示の有無もあわせて疑ってください。

余白設定をPDFプレビューで確認する

関連記事