【コピペで使える】Markdown改ページの書き方完全ガイド｜PDF出力・VS Code・Typora・CSS設定まで徹底解説

Markdown（マークダウン）で作成した技術仕様書、マニュアル、業務レポート、議事録などをPDFとして出力したり紙に印刷したりする際に、「章や見出しの途中で中途半端にページが分断されてしまう」「キリのいい位置で綺麗に次のページへ送りたい（改ページしたい）」「Markdownで改ページを挿入するタグや記法を知りたい」「VS CodeやTyporaでPDF出力時に思い通りのレイアウトにする方法がわからない」と悩んだことはありませんか？

実は、Markdownの標準構文には「改ページ（ページ送り）」を行う記号が存在しません。しかし、Markdown文書内に特定のHTMLタグ（<div style="page-break-before: always;"></div> や CSSの break-before: page;）を一行埋め込むだけで、VS Code（Markdown PDF拡張）やTypora、ブラウザ印刷機能を使って思い通りの位置で改ページを自由自在に制御できます。

本記事では、コピペですぐに使える改ページ用HTML/CSSタグの書き方（早見表付き）をはじめ、VS Code・Typora・Marp・Pandocなどの主要ツール別の改ページ反映＆PDF出力手順、見出しごとの自動改ページや表・コードブロックの途切れ防止などの高度なCSS制御術、さらに「改ページが効かない・白紙が入る」といったよくあるトラブルの対処法まで、実例を交えてわかりやすく完全解説します！

1. 【結論】Markdownで改ページを挿入する基本原則と早見表

Markdown（マークダウン）で文書を作成する際、「印刷時やPDF変換時に意図した位置でページを区切りたい（改ページしたい）」という要望は非常に多くあります。

まず結論から言うと、MarkdownではHTMLタグやCSSプロパティを文書内に直接埋め込むことで、確実に改ページを実行できます。

Markdown標準構文に改ページがない理由

Markdownはもともと、「HTMLへの変換を前提としたプレーンテキスト記法」として設計されました。Webページのようなスクロールを基本とする媒体では「ページ」という物理的な概念が存在しないため、Markdownの標準文法（CommonMark等）には改ページ用の独自記号（例えば \pagebreak のような記法）が用意されていません。

しかし、Markdownは仕様上「素のHTMLタグの直接記述」を完全にサポートしています。そのため、CSSの印刷用プロパティ（Page Breakプロパティ）を持ったHTMLタグを挿入することで、PDF変換エンジンや印刷プレビューに対して改ページを指示できる仕組みになっています。

【早見表】コピペで使える改ページタグ一覧（レガシー vs モダンCSS）

Markdown内で使える改ページタグには、古くから使われているCSS2互換の「page-break系」と、現在のCSS3標準仕様である「break系（CSS Fragmentation Module）」の2系統があります。

手動タグ挿入 vs CSS自動制御の使い分け

改ページを行うアプローチには、「本文中に手動でタグを埋め込む方法」と「CSSファイルで大見出し（H1やH2）の前に自動改ページを設定する方法」の2種類があります。

• 手動タグ挿入がおすすめなケース：
  • 特定の図表や表、まとめの前だけでピンポイントに改ページしたい場合
  • 文書ごとにレイアウトやページ割りを柔軟に微調整したい場合
  • 外部CSSファイルを用意せず、単一の .md ファイルだけで完結させたい場合
• CSS自動制御がおすすめなケース：
  • 数十ページに及ぶ長大なマニュアルや仕様書で、「第1章、第2章（H1見出し）が始まったら必ず新しいページから開始する」という統一ルールを適用したい場合
  • 執筆時にいちいち改ページタグを書く手間を省き、執筆に集中したい場合

2. 【コピペ用】Markdownで改ページを挿入するHTML/CSSコード集

ここでは、Markdownファイル内にそのままコピー＆ペーストして使える代表的な改ページタグの記述パターンを詳しく解説します。

基本形：その位置で改ページする（page-break-before）

最も汎用性が高く、ほとんどすべてのMarkdownエディタやPDF変換ツールで動作するのが page-break-before: always; を指定した <div> タグです。

ここまでの内容が1ページ目に表示されます。

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

# ここから2ページ目（新しいページ）の先頭になります
次の章の本文をここに記述します。

モダンCSS標準形（break-before: page）

近年のCSS仕様（CSS Fragmentation Level 3 / Level 4）では、従来の page-break-before はレガシー扱いとなり、break-before: page; が標準プロパティとして規定されています。

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

さらに互換性を万全にするには、以下のように両方をインラインスタイルに併記するのがベストプラクティスです。

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

「before（前）」と「after（後）」の違いと使い分け

CSSの改ページプロパティには before（要素の前で改ページ）と after（要素の後で改ページ）の2種類があります。

• page-break-before: always;：
  
  タグが置かれた位置の直前で改ページします。空の <div></div> を置く場合は基本的にこれを使えば直感的です。
• page-break-after: always;：
  
  タグが置かれた要素の直後で改ページします。例えば「表紙ブロック」や「目次ブロック」の末尾で改ページしたい場合に便利です。

<!-- 表紙ブロックの例 -->
<div style="text-align: center; padding-top: 150px; page-break-after: always;">
  # システム要件定義書
  **バージョン 1.0**  
  作成日: 2026年8月
</div>

# 第1章 はじめに
表紙の直後で改ページされ、ここから本文が始まります。

クラス指定（class=”page-break”）ですっきり書く方法

長文ドキュメント内で何度もインラインスタイル（style="..."）を書くとMarkdownの可読性が落ちます。CSS設定が可能な環境（VS Code Markdown PDFやTyporaなど）では、あらかじめCSSにクラスを定義しておくのがスマートです。

【CSS定義】（style.css または設定内）

.page-break {
  break-before: page;
  page-break-before: always;
}

【Markdown内の記述】

1ページ目の内容...

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

2ページ目の内容...

画面プレビュー時は非表示にする印刷専用メディアクエリ設定

HTMLタグとして <hr> や境界線を表示しつつ、印刷・PDF時のみ改ページとして機能させたい場合は、メディアクエリ（@media print / @media screen）を活用します。

/* 画面プレビュー時：薄い点線で改ページ位置を表示 */
@media screen {
  .page-break {
    border-top: 2px dashed #94a3b8;
    margin: 30px 0;
    position: relative;
  }
  .page-break::after {
    content: "--- 📄 改ページ位置 ---";
    display: block;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    margin-top: -10px;
    background: #fff;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 印刷・PDF出力時：点線を消して改ページを実行 */
@media print {
  .page-break {
    break-before: page;
    page-break-before: always;
    border: none;
    margin: 0;
    height: 0;
  }
}

このCSSを設定しておくと、エディタの画面上では「どこでページが切れるか」が点線で視覚的にわかり、PDF出力時には美しい改ページとなって出力されます。

3. 【ツール別】主要エディタ・環境での改ページ設定＆PDF出力手順

Markdownを扱う代表的なエディタやツールごとに、改ページを正しく反映させてPDF出力・印刷する具体的手順を解説します。

VS Code「Markdown PDF」拡張機能での改ページ手順と設定

VS CodeでMarkdownをPDF化する際のデファクトスタンダード拡張機能が「Markdown PDF（yzane.markdown-pdf）」です。内部でChromiumを使用して高精度なPDFを出力します。

【見出しごとの自動改ページをVS Code設定に追加する】

プロジェクトルートに custom-pdf.css を作成し、VS Codeの settings.json に以下を指定すると、すべてのH1見出しの手前で自動改ページされます。

{
  "markdown-pdf.styles": [
    "custom-pdf.css"
  ],
  "markdown-pdf.format": "A4",
  "markdown-pdf.margin.top": "20mm",
  "markdown-pdf.margin.bottom": "20mm",
  "markdown-pdf.margin.left": "20mm",
  "markdown-pdf.margin.right": "20mm",
  "markdown-pdf.displayHeaderFooter": true,
  "markdown-pdf.footerTemplate": "<div style=\"font-size: 9px; text-align: center; width: 100%;\"><span class=\"pageNumber\"></span> / <span class=\"totalPages\"></span></div>"
}

VS Code「Markdown Preview Enhanced」での改ページ記法

VS Codeで高度なプレビュー・執筆を行う「Markdown Preview Enhanced（MPE）」では、独自の改ページ記法やスライド分割記法がサポートされています。

• <!-- pagebreak --> または <!-- slide -->：
  
  MPEのプレビュー画面やPuppeteer/PrinceによるPDF出力時に改ページとして処理されます。
• もちろん標準の <div style="page-break-before: always;"></div> も完全動作します。

プレビュー画面上で右クリックし、「Chrome (Puppeteer) → PDF」を選択することで高品質なPDFが出力されます。

Typoraでの改ページタグの動作とPDFエクスポート

リアルタイムWYSIWYGエディタとして人気のTyporaでも、HTMLタグによる改ページが標準でサポートされています。

• 本文中に <div style="page-break-before: always;"></div> または <div style="page-break-after: always;"></div> を挿入します。
• Typoraのメニューバーから 「ファイル」 > 「エクスポート」 > 「PDF」 を選択します。
• エクスポート設定で余白やページサイズ（A4/Letter）、ヘッダー/フッター（ページ番号）を設定可能です。

Marp（Markdownスライド）での区切り記法（—）と改ページ

Markdownからプレゼンテーションスライドを生成するMarp（Marp for VS Code）では、改ページの仕組みが通常のエディタと異なります。

Marpでは水平線 --- がそのまま「新しいスライド（改ページ）」の区切り記号として定義されています。

---
marp: true
theme: default
paginate: true
---

# 1スライド目（表紙）
プレゼンテーションのタイトル

---

# 2スライド目
ここが2枚目のスライド（改ページ先）になります。

---

# 3スライド目
箇条書きなど...

ブラウザ印刷（Chrome / Edge）からのPDF保存と改ページ

特別な拡張機能を使わず、MarkdownをGitHubやNotion、ブラウザプレビュー上で開いて「Ctrl + P（Macは Cmd + P）→ 送信先：PDFに保存」でPDF化する場合の手順です。

1. ブラウザで印刷ダイアログ（Ctrl+P）を開きます。
2. 送信先を「PDFに保存」に設定します。
3. 「詳細設定」を展開し、「背景のグラフィック」にチェックを入れます（コードブロックの背景色や装飾枠を綺麗に出力するため）。
4. 余白を「デフォルト」または「カスタム」で適切に調整して保存します。

Pandoc / VivliostyleでのPDF組版と改ページ制御

• Pandoc (PDF via LaTeX)：
  
  LaTeXエンジン経由でPDF化する場合は、Markdown内に \newpage または \pagebreak と直接記述することで改ページされます。
• Vivliostyle（CSS組版ツール）：
  
  CSS Paged Media標準に完全準拠しているため、break-before: page; や break-before: right;（見開き右ページ開始）が完璧に機能します。

4. 【CSS応用】美しいPDF帳票・レポートを作るレイアウト制御術

Markdownを実務レベルの美しいPDF資料・レポートに仕上げるためには、手動の改ページタグだけでなく、「意図しない途中改ページを防ぐCSSルール」をマスターすることが極めて重要です。

見出し（H1 / H2）の手前で自動改ページするCSS

「各大見出し（H1）は必ず新しいページの先頭から始めたい」という場合、CSSに以下を記述します。

/* H1見出しの直前で自動改ページ */
h1 {
  break-before: page;
  page-break-before: always;
}

/* ただし、ドキュメント先頭（最初のH1）は改ページしない */
h1:first-of-type,
article > h1:first-child {
  break-before: avoid;
  page-break-before: avoid;
}

【超重要】表（テーブル）やコードブロックの途中分断を防ぐ（break-inside: avoid）

PDF出力で最もありがちなレイアウト崩れが、「表の真ん中やコードブロックの途中でページが切り替わり、枠線や行が不自然に2ページにまたがってしまう現象」です。

これを防止するには、要素の内側での改ページを禁止する break-inside: avoid;（および page-break-inside: avoid;）を設定します。

/* テーブル（表）全体の途中分断を防止 */
table {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* 行（tr）単位での分断を防止（長大な表で1行が途中で切れるのを防ぐ） */
tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* コードブロックの途中分断を防止 */
pre, code {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* 引用ブロックやアラートボックスの途中分断を防止 */
blockquote, .alert-box, .callout {
  break-inside: avoid;
  page-break-inside: avoid;
}

見出しだけがページ最下部に残る孤立を防ぐ（break-after: avoid）

ページの最下部に「見出し（H2/H3）」だけがポツンと取り残され、本文が次のページから始まってしまう現象を「孤立見出し（Orphan Heading）」と呼びます。

見出しの直後に改ページが入るのを防ぐには、break-after: avoid; を指定します。

/* 見出し直後での改ページを禁止（見出しと直後の本文を必ず同じページに配置） */
h1, h2, h3, h4, h5, h6 {
  break-after: avoid;
  page-break-after: avoid;
}

画像の途中分断を防ぐCSS

大きな画像がページ境界で半分に切れてしまうのを防ぐルールです。

img {
  break-inside: avoid;
  page-break-inside: avoid;
  max-width: 100%;
  height: auto;
}

用紙サイズ（A4）・余白（Margin）・ページ番号の設定テンプレート

PDF出力・印刷用のスタイルシート（print.css）としてそのまま使える完成版CSSテンプレートです。

/* ===================================================
   Markdown PDF / 印刷用レイアウト制御CSSテンプレート
   =================================================== */

@page {
  size: A4 portrait; /* A4縦向き（横向きは landscape） */
  margin: 20mm 15mm 20mm 15mm; /* 上 右 下 左 */
}

/* 手動改ページ用クラス */
.page-break {
  break-before: page;
  page-break-before: always;
}

/* 見出しの改ページ制御 */
h1 {
  break-before: page;
  page-break-before: always;
  margin-top: 0;
}
h1:first-of-type {
  break-before: avoid;
  page-break-before: avoid;
}
h2, h3, h4 {
  break-after: avoid;
  page-break-after: avoid;
}

/* 分断防止（表・コード・画像・引用） */
table, pre, code, blockquote, img {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* 長い表のヘッダー繰り返し */
thead {
  display: table-header-group;
}
tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

5. 【トラブルシューティング】改ページが効かない・崩れる時の5大原因と解決策

改ページタグを入れたのに改ページされない、あるいは意図しない位置で崩れる場合の主な原因と対処法をまとめました。

原因1：HTMLタグの前後に「空行」がない

【症状】：タグがそのまま文字列として出力されたり、改ページが無視される。

【解決策】：Markdownでは、HTMLブロック要素の前後に空行（空白行）が1行以上必須です。以下のように上下に改行を入れてください。

<!-- ❌ 失敗例（空行がない） -->
前の文章
<div style="page-break-before: always;"></div>
次の文章

<!-- ⭕ 成功例（上下に空行がある） -->
前の文章

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

次の文章

原因2：エディタの画面プレビューで見ている（PDF/印刷時のみ反映される）

【症状】：エディタの右側プレビュー画面で改ページタグを入れても見た目が変わらない。

【解説】：page-break-before や break-before: page; は「印刷メディア（Print Media / ページメディア）」専用のCSS仕様です。Webブラウザやエディタの通常プレビュー（画面メディア / Screen）ではページという概念がないため、改ページは発生しません。

【解決策】：実際にPDF出力（Markdown PDF: Exportなど）を行うか、ブラウザの「印刷プレビュー（Ctrl+P）」を開いて確認してください。

原因3：親要素に flex や overflow:hidden がかかっている

【症状】：PDF出力しても改ページタグが完全に無視される。

【解説】：CSS仕様により、親要素に display: flex;、display: grid;、overflow: hidden;、overflow: auto;、または position: absolute; が指定されている場合、その子要素の break-before や page-break は無効化されます。

【解決策】：改ページを行いたい要素の親ラッパーに overflow: visible; や display: block; を適用してください。

原因4：不要な白紙ページが1枚余分に挿入されてしまう

【症状】：改ページを入れた箇所に中身が何もない真っ白なページが1枚挟まってしまう。

【原因と解決策】：

• 原因A：page-break-after と page-break-before が連続して適用されている。
  
  → どちらか一方の指定に統一してください。
• 原因B：H1の自動改ページ（h1 { break-before: page; }）が効いているのに、手動でも改ページタグを直前に挿入している。
  
  → 手動タグを削除するか、CSS側のルールを見直してください。
• 原因C：前ページの末尾にある余白（margin-bottom）が大きく、1行分だけ次ページにはみ出した直後に改ページが発動している。
  
  → 直前要素の margin-bottom を小さく調整してください。

原因5：レンダリングエンジン（Chromium/WebKit）の仕様差異

【解決策】：一部の古いエンジンではモダンCSSの break-before: page; が解釈できない場合があり、逆に最新のChromiumでは古い page-break-before の一部プロパティが制限される場合があります。両対応の <div style="break-before: page; page-break-before: always;"></div> を使うことで100%解決します。

困った時のデバッグチェックリスト表

6. よくある質問（FAQ）

"Page Break": {
  "prefix": "pagebreak",
  "body": [
    "",
    "<div style=\"break-before: page; page-break-before: always;\"></div>",
    "",
    "$0"
  ],
  "description": "Insert PDF Page Break"
}

7. まとめ＆関連Markdown活用ガイド一覧

Markdown文書からPDFを出力したり印刷を行ったりする際の改ページ制御について解説しました。ポイントをまとめます。

改ページとCSS制御をマスターすれば、Markdownの軽快な執筆体験を維持したまま、市販のビジネス書や高品質な技術仕様書に匹敵する美しいPDFドキュメントを誰でも簡単に作成できます。ぜひ本記事のコードをコピーして活用してみてください！