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

執筆・検証: MD Converter編集部

Markdown PDFで改ページするCSS｜任意の位置に区切りを入れる方法

MarkdownをPDF化したとき見出しや表が途中で切れる問題を解決。break-before・break-after・break-insideのCSSコード、空白ページの原因、用紙や余白を変えた後の確認手順まで具体例付きで解説します。

Markdown PDFの改ページはCSSで指定できる

Markdown で書いた仕様書や報告書を PDF に変換したとき、こんな経験はないでしょうか。

  • 見出しが前のページの最後の行に残ってしまう
  • 表の途中でページが切れてしまう
  • 重要なセクションが読みにくい位置で分割される

多くの変換環境では改ページの制御が分かりにくく、「なぜかそこで切れてしまう」状態になりがちです。この記事では、そのままコピーできるCSSを中心に、症状ごとの使い分けと失敗しやすい条件を説明します。

任意の位置で改ページする最短コードは次の1行です。Markdown変換環境がHTMLとstyle属性を許可している場合、次の章の直前へ置きます。

<div style="break-before: page"></div>

症状別：どの改ページ指定を使うか

症状・目的使う指定最初に試すこと
次の章を新しいページから始めたいbreak-before: page見出しの直前へ改ページ要素を置く
表紙や章の直後でページを送りたいbreak-after: page終端側の要素だけに指定する
表・コード・画像を途中で切りたくないbreak-inside: avoid1ページに収まる要素へ指定する
見出しだけページ末に残るbreak-after: avoid見出しと直後の段落を離さない

先に用紙サイズ・余白・倍率を決め、そのあとで改ページを調整してください。印刷条件を後から変えると、同じCSSでも区切り位置がずれます。

そもそも Markdown に「ページ」は書けない

Markdown は流れのテキストであり、「ここで改ページ」という標準記法はありません。ページという概念は HTML に変換したあと、CSSの印刷用プロパティで初めて扱えます。<div style="page-break-after: always;">などをMarkdownへ直書きする方法もありますが、原稿の可読性が下がり、レイアウトを変えるたびにソースを触る負担が増えます。

CSSでMarkdown PDFを改ページする方法

Markdown変換ツールがHTMLを許可し、印刷用CSSを指定できる場合は、改ページしたい位置の直前に空の要素を置き、break-before: page を指定します。page は印刷時の改ページを意味します。

<div class="page-break"></div>

## 次の章

@media print {
  .page-break {
    break-before: page;
  }
}

インラインスタイルが許可された環境では、次のように1行で書くこともできます。

<div style="break-before: page"></div>

break-before は現在のCSSプロパティです。古いPDF変換エンジンも考慮する場合は、page-break-before: always を併記することがあります。ただし、同じ箇所に複数の改ページ指定を重ねず、まず利用ツールが対応する書き方を確認してください。

break-before・break-after・break-inside の使い分け

やりたいことCSS使う場所
次の要素を新しいページから始めるbreak-before: page見出しや改ページ用の空要素
この要素の後でページを送るbreak-after: page章末・表紙の末尾
要素の途中で分断しないbreak-inside: avoid表、コードブロック、図のラッパー

見出しを常に新ページから始めるなら、空のdivを何度も書く代わりに、印刷用CSSで見出しを指定できます。最初の見出しまで改ページされると空白ページになりやすいため、h1より**章に使うh2**へ適用するほうが安全な場合があります。

@media print {
  h2 {
    break-before: page;
  }
  table, pre {
    break-inside: avoid;
  }
}

break-inside: avoid は「可能な限り分割しない」という指定です。1ページに収まらない大きな表やコードでは、空白を残して次ページへ送られたり、PDFエンジンによっては分割されたりします。必ず印刷プレビューで確認してください。

見出しだけがページ末に残るのを防ぐ

見出しの直後で改ページされると、見出しだけが前ページに残る「孤立見出し」になります。見出しの後ろと、直後の段落の前を分割しにくくします。

@media print {
  h2, h3 {
    break-after: avoid;
  }

  h2 + p,
  h3 + p {
    break-before: avoid;
  }
}

表・コード・画像を途中で分割しない

短い表やコードブロック、図版は、まとまりごと次ページへ送ると読みやすくなります。表が複数ページになる場合は、表全体ではなく行単位で分割を避けると、大きな空白ができにくくなります。

@media print {
  pre,
  figure,
  blockquote,
  tr {
    break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }
}

最初の見出し前に空白ページを作らない

すべてのh2へbreak-beforeを付けると、本文先頭の見出しまで送られ、空白の1ページ目ができることがあります。同じ親要素の中に見出しが並ぶ構造なら、最初のh2を除外できます。

@media print {
  h2:not(:first-of-type) {
    break-before: page;
  }
}

HTMLのラッパー構造によって:first-of-typeの判定は変わるため、変換後のHTMLと印刷プレビューを確認してください。

「PDF に保存」では HTML/CSS に加え、余白・用紙サイズ・向き・縮小などの印刷設定も改ページ位置に影響します。改ページは CSS だけでなく、印刷ダイアログとセットで決まると捉えるとトラブルが減ります。

用紙・向き・表紙・目次を変えたあとは再確認

ブラウザの印刷ダイアログで A4 / Letter や縦横を変えると、同じ改ページ位置でもページ送りの見え方が変わります。表紙や目次を付けるワークフローでは、本文の改ページと表紙まわりが重ならないよう、プレビューで最初から最後まで通し読みしてください。見出しの「前に改ページ」ルールが表紙直後の本文見出しにも効き、空白ページが出ることがあります。図表を横向きだけ差し込むような特殊レイアウトでは、向きが変わる前後で改ページ位置を再度確認すると安全です。

MarkdownにHTMLを直接書く前の確認事項

HTMLやstyle属性をMarkdownに書いても、すべてのサービスで動くわけではありません。GitHub、CMS、Wiki、変換ツールなどでは、セキュリティ対策でstyle属性やclassが削除されることがあります。また、CSSを読み込めても画面用スタイルだけではPDFに反映されません。

次の順に確認すると切り分けやすくなります。

  1. Markdown変換後のHTMLでdivやclassが保持されているか確認する
  2. @media print内に改ページCSSを置く
  3. 印刷プレビューで用紙サイズ・余白・倍率を固定して確認する
  4. break-beforeとbreak-afterを同じ境界へ重複して指定しない

CSSが画面では効くのにPDFで効かないときは、Markdown CSS が効かない原因と対処法も参照してください。

改ページが効かない・空白ページが出るとき

症状主な原因対処
CSSがまったく効かないHTMLやstyleが削除されている変換後HTMLを確認し、許可されたCSS設定を使う
画面では効くがPDFでは効かない印刷用CSSに入っていない@media print内へ指定する
空白ページが1枚入る同じ境界に前後両方の指定があるbreak-afterかbreak-beforeの片方を外す
大きな表が分割される要素が1ページより高い表全体ではなくtrへbreak-inside: avoidを使う
余白変更後に位置がずれる印刷可能幅と行数が変わった用紙・余白・倍率を確定してから改ページを再調整する

空白だけが残る場合は、原因を絞ったMarkdown PDFの空白ページを消す方法も利用できます。

Markdown原稿を汚さずに改ページを管理する

改ページ用のインラインHTMLは手軽ですが、同じMarkdownをGitHub・CMS・Wikiなどで使い回す場合は、表示先によってタグが消えたり、原稿に印刷専用の記述が増えたりします。繰り返し使うルールは、可能ならMarkdownとは別の印刷用CSSへまとめます。

@media print {
  h2 {
    break-after: avoid;
  }

  table,
  pre,
  figure {
    break-inside: avoid;
  }
}
必要な制御原稿への影響向いている管理方法
すべての章・表へ共通ルールを適用Markdownを変更しない外部の印刷用CSSで要素を指定する
特定の1か所だけ改ページ改ページ用要素が1行入るclass付き要素とCSSを組み合わせる
複数の出力先で同じ原稿を使う出力先ごとにCSSが変わるMarkdownと印刷CSSを別ファイルで管理する

任意の1か所を指定するには、標準Markdownだけでは情報が足りないため、HTML要素・変換時の拡張記法・後処理のいずれかが必要です。一方、「すべてのh2」「すべての表」のような共通ルールなら、原稿を変えずにCSSだけで管理できます。

よくある質問

Q. Markdownだけで改ページできますか？

標準Markdownには改ページの記法がありません。ツールが許可するHTMLを埋め込み、CSSのbreak-beforeやbreak-afterを使うか、ツール固有の改ページ機能を使います。

Q. page-break-before: always と break-before: page はどちらを使う？

新しくCSSを書くならbreak-before: pageを基本にします。古い変換エンジンへの互換性が必要な場合のみ、検証した上でpage-break-before: alwaysも併記します。二重指定で空白ページが出ないか、実際に出力するPDFで確認してください。

Q. 改ページCSSを入れると空白ページが出ます

直前の要素にbreak-after、次の要素にbreak-beforeが同時にあると、改ページが重複することがあります。表紙・目次の自動改ページや、h1・h2への一括ルールも含め、同じ境界の指定を1つにしてください。詳しくはMarkdown PDFの空白ページを消す方法を確認できます。

PDF出力前の確認手順

  1. 用紙サイズ・向き・余白・倍率を先に確定する
  2. 章の開始位置にはbreak-before、章末にはbreak-afterを必要な側だけ指定する
  3. 表やコードには、1ページに収まる場合だけbreak-inside: avoidを使う
  4. 印刷プレビューを先頭から確認し、孤立見出し・大きな空白・空白ページを探す
  5. PDFを書き出したあと、実ファイルを開き直してページ数と区切り位置を再確認する

CSSが正しくても、フォントや余白が変われば1行あたりの文字数が変わり、改ページ位置も動きます。レイアウト条件を固定してから改ページを調整するのが、やり直しを減らすコツです。

CSSを書かずに試す

Markdown Document Converterでは、Markdown原稿へHTMLを追加せず、プレビュー上で改ページ位置を調整できます。

改ページをプレビューで調整する

関連記事