【一番簡単】MarkdownをPDFに変換する方法！VS Code拡張機能で綺麗に出力する設定＆改ページ技

Markdown（マークダウン）で作成した業務マニュアル、技術仕様書、議事録、提案資料、日報などをチームメンバーやクライアントに共有する際、 「相手がMarkdownプレビュー環境を持っていないのでPDFで送りたい」「印刷や社内提出用に綺麗なレイアウトでPDF化したい」 という場面は非常に多くあります。

しかし、いざMarkdownをPDFへ変換しようとすると、 「日本語フォントがギザギザの明朝体や不自然な中華フォント風になってダサい」「意図しない位置で表や見出しが分断されて読みにくい」「ヘッダーにファイルパスや日時の文字が勝手に印字されて恥ずかしい」「余白が狭すぎて窮屈」 といった実務上のレイアウト崩れに直面し、頭を抱えてしまう方が少なくありません。

結論からお伝えすると、Markdownを最も手軽に、かつプロ品質の洗練されたデザインでPDF化するなら 「VS Code（Visual Studio Code）」と拡張機能「Markdown PDF」の組み合わせが圧倒的におすすめ です。エディタ上で右クリックするだけのワンクリックで高速出力できるだけでなく、わずか数行のCSSを追加するだけでフォント、余白、見出しデザイン、改ページ位置まで思い通りにコントロールできます。

本記事では、初心者の方でも今日からすぐにコピペで使えるCSSコードスニペットや設定例を交えながら、Markdownから綺麗なPDFを作成する全手順を徹底解説します。

【結論】MarkdownをPDF化するなら「VS Code」が圧倒的におすすめ！

MarkdownからPDFへ変換する3つのアプローチ（VS Code拡張 / オンライン変換 / Pandoc）

Markdown形式で書かれたテキストをPDFファイルへと書き出す手法には、大きく分けて以下の 3つのアプローチ が存在します。それぞれの特徴と仕組みを理解しておくことで、ドキュメントの性質に応じた最適な選択が可能になります。

1. アプローチ①：VS Code拡張機能（Markdown PDFなど）
   日常的なコーディングやテキスト作成で使われているエディタ「VS Code」の拡張機能を利用し、内蔵されたヘッドレスブラウザ（Chromium）を通じてHTMLレンダリング結果をPDFへ出力する方式です。Web制作で使われる標準的なCSSを使ってデザインを100%自由に装飾できるため、現在最も人気が高く実用的な手法となっています。
2. アプローチ②：ブラウザ上の無料オンライン変換サービス
   Webサイト上にMarkdownテキストを直接貼り付けるかファイルをアップロードし、サーバー側でPDF化してダウンロードする方式です。ソフトウェアのインストールが不要という利点がある反面、社外秘データや個人情報を預けるセキュリティリスクや、細かいデザイン・改ページの調整が効かないという致命的な弱点があります。
3. アプローチ③：CLI組版ツール（Pandoc + LaTeX）
   ターミナル上でコマンドを実行し、学術論文などで標準的に使われる組版システム「LaTeX」を経由してPDFをコンパイルする方式です。複雑な数式や参考文献の自動引用、目次の自動採番など組版品質は世界最高峰ですが、数ギガバイトに及ぶTeX環境の構築や専門的なコマンドの習得が必要であり、一般的なビジネス資料作成にはややオーバースペックです。

ツール別比較表（手軽さ・デザインカスタマイズ性・セキュリティ・オフライン動作）

主要なアプローチの性能や特徴を、実務で重要視される評価軸に基づいて詳細に比較しました。

この比較表からも分かるように、 実務における利便性、セキュリティの安全性、デザインの調整しやすさ、コストのすべてにおいて「VS Code + Markdown PDF」が群を抜いて優秀 です。機密性の高い企画書や社内マニュアルを外部に漏らす心配がなく、普段コーディングや執筆に使っているエディタから離れることなく一瞬で納品クオリティのPDFが完成します。

【1分で完了】VS Code拡張機能「Markdown PDF」の使い方

ここからは、VS Codeで拡張機能「Markdown PDF」を使って、手元のMarkdownファイルをPDFへ変換する具体的な手順を解説します。初期インストールから最初のPDF出力まで、 作業時間はわずか1分ほど です。

ステップ1: 拡張機能「Markdown PDF」をインストール

まずはVS Codeに拡張機能を追加します。操作はすべてエディタの画面内で完結します。

ステップ2: 右クリックから「Markdown PDF: Export (pdf)」を実行

拡張機能のインストールが完了したら、PDF化したいMarkdownファイル（拡張子が .md のファイル）をVS Codeで開きます。出力操作は以下の通り直感的です。

マウスを持たずにキーボードだけで操作したい場合は、 コマンドパレット から実行することも可能です。

• Windows / Linux： Ctrl + Shift + P を押下
• Mac： Cmd + Shift + P を押下
• 入力フォームに pdf と入力し、候補に出る Markdown PDF: Export (pdf) を選んで Enter を押す

これだけで、エディタで書いたMarkdownがその場で綺麗なPDFファイルとして書き出されます。

出力先フォルダと知っておくと便利なショートカットキー

生成されたPDFファイルは、初期設定では 変換元のMarkdownファイルと同じフォルダ に、同じファイル名（拡張子が .pdf に変わった状態）で保存されます。たとえば spec-document.md を変換した場合は、同一階層に spec-document.pdf が自動生成されます。

日常的に仕様書や記事のPDF出力を繰り返す場合、毎回右クリックメニューを探すのは手間がかかります。そこで、作業効率を何倍にも引き上げる 2つの実務向けテクニック を設定しておきましょう。

① ファイル保存（Ctrl + S）時に全自動でPDFを再生成する

VS Codeの設定ファイル（settings.json）を開き、以下の設定を1行追加します。

{
  "markdown-pdf.convertOnSave": true
}

この設定を有効にすると、Markdownファイルを編集して Ctrl + S （Macは Cmd + S ）で保存するたびに、裏側で自動的にPDFが再生成されるようになります。文章の更新漏れを防ぎ、常に最新のPDFが手元にある状態を維持できます。

② 専用のショートカットキー（例: Ctrl + Alt + P）を割り当てる

ワンタッチでPDF出力を呼び出せるように、独自のキーバインドを割り当ててみましょう。

1. VS Codeのメニューバーから「ファイル」→「ユーザー設定」→「キーボード ショートカット」（または Ctrl + K → Ctrl + S）を開きます。
2. 検索バーに markdown-pdf.export と入力します。
3. 「Markdown PDF: Export (pdf)」の項目をダブルクリックし、割り当てたいキー（例: Ctrl + Alt + P ）を押して Enter を押します。

これで、エディタ内で Ctrl + Alt + P を押すだけで、右クリック不要の1秒エクスポートが可能になります。

PDFをプロっぽく綺麗に仕上げるCSSカスタマイズ設定

初期状態の「Markdown PDF」で出力されたPDFを開いてみると、 「なんだかフォントが不揃いで垢抜けない」「ページの余白が狭くて圧迫感がある」「ヘッダーにfile:///から始まる絶対パスが印字されていて社外に提出できない」 と感じた方がほとんどではないでしょうか。

ここでは、手元のPDFを一瞬でビジネス文書や技術ホワイトペーパーのような 「プロ品質の洗練されたデザイン」へと生まれ変わらせるCSSカスタマイズ設定 を徹底解説します。

日本語フォントをメイリオ / 游ゴシックに変更するCSSコード

ドキュメントの印象を最も大きく左右するのは 「フォント（書体）」 です。「Markdown PDF」は海外製拡張機能のため、フォントを指定しない場合は欧文フォントが優先され、日本語部分が角張った明朝体や不自然な中華フォントにフォールバックしてしまいます。

ビジネス文書として読みやすく信頼感のあるフォントにするため、Windowsでは「メイリオ（Meiryo）」や「游ゴシック（Yu Gothic）」、Macでは「ヒラギノ角ゴ（Hiragino Sans）」、環境に依存しない「Noto Sans JP」をフォールバック付きで指定したカスタムCSSを作成しましょう。

以下のCSSコードをそのままコピーし、作業フォルダ内（またはドキュメントフォルダ等）に pdf-style.css という名前で保存してください。

/* ==========================================================================
   Markdown PDF プロフェッショナル印刷用カスタムCSS
   ========================================================================== */

/* 全体の基本設定：読みやすさを極めたフォントと行間 */
body {
  font-family:
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    "Noto Sans JP",
    sans-serif;
  font-size: 10.5pt;
  line-height: 1.85;
  color: #1e293b; /* 真っ黒ではなく濃紺グレーで目の疲れを軽減 */
  letter-spacing: 0.03em;
}

/* タイトル・見出し（H1） */
h1 {
  font-size: 22pt;
  font-weight: 700;
  color: #0f172a;
  border-bottom: 3px solid #0284c7;
  padding-bottom: 8px;
  margin-top: 24px;
  margin-bottom: 20px;
  page-break-after: avoid;
  break-after: avoid;
}

/* 中見出し（H2） */
h2 {
  font-size: 16pt;
  font-weight: 700;
  color: #0f172a;
  border-left: 6px solid #0284c7;
  padding-left: 12px;
  margin-top: 32px;
  margin-bottom: 14px;
  page-break-after: avoid;
  break-after: avoid;
}

/* 小見出し（H3） */
h3 {
  font-size: 12.5pt;
  font-weight: 600;
  color: #334155;
  border-bottom: 1px dashed #cbd5e1;
  padding-bottom: 4px;
  margin-top: 24px;
  margin-bottom: 10px;
  page-break-after: avoid;
  break-after: avoid;
}

/* 段落・文章 */
p {
  margin-top: 0;
  margin-bottom: 1.3em;
  text-align: justify; /* 両端揃えで左右の端を綺麗に整列 */
}

/* 箇条書き・リスト */
ul, ol {
  margin-top: 0;
  margin-bottom: 1.3em;
  padding-left: 24px;
}

li {
  margin-bottom: 0.45em;
}

/* テーブル（表）：実務で映えるストライプ＆罫線 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  margin-bottom: 26px;
  font-size: 9.5pt;
  page-break-inside: avoid;
  break-inside: avoid; /* 表の途中でのページ分割を禁止 */
}

th, td {
  border: 1px solid #cbd5e1;
  padding: 9px 12px;
  text-align: left;
}

th {
  background-color: #f1f5f9;
  color: #0f172a;
  font-weight: 700;
}

tr:nth-child(even) td {
  background-color: #f8fafc; /* 偶数行を薄いグレーにして視認性アップ */
}

/* 引用ブロック：モダンなインフォメーション枠 */
blockquote {
  margin: 18px 0;
  padding: 12px 18px;
  border-left: 4px solid #0284c7;
  background-color: #f0f9ff;
  color: #0369a1;
  font-size: 9.5pt;
  border-radius: 0 6px 6px 0;
}

/* コードブロック：ダークトーンのシンタックスハイライト風 */
pre {
  background-color: #1e293b;
  color: #f8fafc;
  padding: 14px 16px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  font-size: 9pt;
  line-height: 1.55;
  page-break-inside: avoid;
  break-inside: avoid; /* コードブロック途中の改ページ禁止 */
}

code {
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  background-color: #f1f5f9;
  color: #0f172a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}

/* 画像：ページはみ出し防止 */
img {
  max-width: 100%;
  height: auto;
  page-break-inside: avoid;
  break-inside: avoid;
}

作成した pdf-style.css をMarkdown PDFに反映させるには、VS Codeの settings.json にスタイルシートのパスを追記します。

{
  "markdown-pdf.styles": [
    "pdf-style.css"
  ]
}

※開いているワークスペース（フォルダ）の直下に pdf-style.css を置いた場合は上記のようにファイル名だけで動作します。PC内のどのフォルダでMarkdownを開いても同じCSSを適用したい場合は、"C:/Users/ユーザー名/Documents/pdf-style.css" や "/Users/ユーザー名/Documents/pdf-style.css" のように絶対パスで指定してください。

不要なヘッダー・フッター（ファイルパスや日付）を非表示にする設定

「Markdown PDF」のデフォルト動作では、各ページの最上部にローカルファイルパス（file:///C:/Users/...）、最下部にPDFを出力した日付時刻が印字されます。これらは個人的なメモなら問題ありませんが、顧客提出資料や社内回覧用の文書では非常に格好が悪く、PC内のフォルダ構造というプライバシー情報が相手に見えてしまいます。

ヘッダーとフッターをすっきりと消去したい場合は、VS Codeの settings.json で markdown-pdf.displayHeaderFooter を false に変更します。

{
  /* ヘッダー・フッターを完全に非表示にする場合 */
  "markdown-pdf.displayHeaderFooter": false
}

一方、 「上部に社名やドキュメント名を表示し、下部に『1 / 10 ページ』のようなページ番号を印字したい」 という場合は、true にした上でカスタムテンプレート（HTML/CSS）を定義します。

{
  "markdown-pdf.displayHeaderFooter": true,
  "markdown-pdf.headerTemplate": "
社外秘 - システム設計仕様書
",
  "markdown-pdf.footerTemplate": "
 /  ページ
"
}

※Puppeteerの仕様により、class="pageNumber" と class="totalPages" を付けたspan要素には、現在のページ番号と総ページ数が自動的に代入されます。

余白（マージン）と行間を読みやすく調整する設定

用紙サイズと余白（マージン）の最適化も、文書のプロっぽさを大きく引き上げる重要ポイントです。日本のビジネスシーンで標準となる A4用紙縦向き（portrait） に合わせ、以下のように設定を追加しましょう。

{
  "markdown-pdf.format": "A4",
  "markdown-pdf.orientation": "portrait",
  "markdown-pdf.margin": {
    "top": "22mm",
    "bottom": "22mm",
    "left": "18mm",
    "right": "18mm"
  }
}

上下に 22mm 、左右に 18mm の余白を取ることで、印刷して2穴ファイルやフラットファイルに綴じた場合でも文字が穴あけ部分に隠れず、画面閲覧時にもゆったりとした清潔感のあるレイアウトを実現できます。

【必見】PDF出力時に意図した位置で「改ページ」を入れる方法

MarkdownをPDFへ変換する際、最も多くの人が直面するのが 「次の章へ切り替わるタイミングで新しいページに送りたいのに、前のページの末尾に見出しだけがポツンと残ってしまう」「表やコードブロックが中途半端に途切れて読みにくい」 という改ページ問題です。

Markdownの標準構文には改ページ専用の記法が存在しません。しかし、 ①手動でHTMLタグを1行挟むテクニック と ②CSSで見出しや表の改ページを全自動化するテクニック を身につけることで、誰でも100%思い通りの美しいページネーションを実現できます。

コピペで使える改ページタグ（<div style=”page-break-before: always;”></div>）

文書内の「ここで強制的に次のページへ送りたい」という箇所に、以下のHTMLタグを貼り付けます。

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

また、W3Cの最新CSS標準仕様（CSS Paged Media Module Level 3）に準拠した以下の記述でも全く同様に改ページが実行されます。

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

【実践的なMarkdown記述例】

# プロジェクト要件定義書
本ドキュメントは、新機能開発における基本仕様をまとめたものです。

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

## 1. 全体スケジュールと納期
ここから綺麗に2ページ目の先頭として印刷・出力されます。

このようにタグを挟むだけで、表紙（タイトル・概要）だけを1ページ目に収め、本格的な本文を2ページ目以降からスタートさせるといった実務文書が簡単に作成できます。

H2見出しの直前で自動改ページさせるCSSテクニック

数十ページに及ぶような大規模マニュアルや仕様書を作成する場合、章が変わるたびに手作業で改ページタグを挿入していくのは非常に骨が折れます。そこで、 「各大見出し（H2）の直前で常に自動改ページする」 というCSSルールを適用しましょう。

先ほど作成した pdf-style.css に、以下のスタイル定義を追加してください。

/* ==========================================================================
   自動改ページ＆レイアウト崩れ防止ルール
   ========================================================================== */

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

/* ただし、ドキュメントの最初に出てくるH2は改ページさせない（1ページ目白紙化の防止） */
h2:first-of-type {
  break-before: avoid;
  page-break-before: avoid;
}

/* 表（テーブル）、コードブロック、引用枠、画像が途中で分断されるのを完全防止 */
table, pre, blockquote, img {
  break-inside: avoid;
  page-break-inside: avoid;
}

この設定を加えておくと、Markdownを普通に執筆して ## 第2章 と書くだけで、VS Codeが自動的に「ここは新章だから次のページの先頭に配置しよう」と判断してPDFを出力してくれます。

特に table, pre { break-inside: avoid; } の指定は極めて重要です。この1行があるだけで、 「表の下半分だけが次ページにはみ出る」「プログラムコードの途中でページが跨がって読めなくなる」という不快なレイアウト崩れを完全に防ぐ ことができます。

本格的な学術論文・書籍レイアウトを作りたいなら「Pandoc + LaTeX」

一般的なビジネス文書やマニュアルであれば、前述したVS Codeと「Markdown PDF」の組み合わせで120点満点の仕上がりになります。しかし、 「大学や学会に提出する学術論文」「数式（LaTeX構文）を美しく組版した技術書」「参考文献リスト（BibTeX）の自動相互参照」「見開き印刷用の左右対称マージン」 といった最高峰の組版精度が求められる場合には、 Pandoc（パンドック）とLaTeX（ラテック）の組み合わせ が世界標準の選択肢となります。

Pandocを使うべきケースとメリット・デメリット

Pandocは「万能文書コンバーター」と呼ばれるコマンドラインツールで、Markdownを内部的な抽象構文木（AST）に変換し、LaTeX組版エンジンを呼び出して寸分の狂いもないPDFを生成します。

基本的な変換コマンド例

Pandocで日本語を含むMarkdownをPDF化する際は、Unicodeとモダンフォントに完全対応したPDFエンジン xelatex または lualatex を指定するのが定石です。

# 基本的な日本語PDF変換
pandoc input.md -o output.pdf \
  --pdf-engine=xelatex \
  -V CJKmainfont="Noto Sans CJK JP" \
  -V geometry:margin=20mm

さらに、Markdownファイルの先頭に YAMLフロントマター（メタデータ定義ブロック） を記述しておくことで、コマンドの引数を省略してタイトルや著者情報を美しくレイアウトさせることができます。

---
title: "次世代分散コンピューティングに関する研究報告書"
author: "情報科学研究所 山田 太郎"
date: "9月"
toc: true
toc-depth: 2
numbersections: true
geometry: "margin=20mm"
mainfont: "Noto Serif CJK JP"
---

# 1. 序論
本稿では、分散システムにおける可用性と一貫性のトレードオフについて論じる...

このように、論文執筆や書籍制作を行うエンジニア・研究者にとっては、Pandocは極めて堅牢で強力な武器になります。

インストール不要！ブラウザで使える無料オンライン変換ツール2選

「出張先の共有パソコンでVS Codeをインストールする権限がない」「今すぐ手元の短いMarkdownメモを1枚だけPDF化して印刷したい」という緊急時には、Webブラウザ上で完結する無料オンライン変換ツールが役立ちます。

1. Dillinger（ディリンジャー：https://dillinger.io/）
   画面左側がMarkdownエディタ、右側がリアルタイムHTMLプレビューとなっている老舗のWebエディタです。画面上部の「Export」メニューから「PDF」をクリックするだけで、プレビュー表示通りのPDFが即座に生成されてダウンロードできます。HTML5ベースで軽快に動作します。
2. StackEdit（スタックエディット：https://stackedit.io/）
   Google DriveやGitHub、Dropboxと同期連携できる多機能なオンラインMarkdownエディタです。サイドメニューの「Export to disk」から「Print to PDF」を選択することで、ブラウザ標準の印刷ダイアログを通じてPDFとして保存できます。

よくあるトラブルと解決策（日本語が文字化けする、画像が表示されない）

「Markdown PDF」を使用する中で、多くのユーザーがつまずきやすい代表的なトラブルと、その具体的な解決策をまとめました。

① 日本語が文字化け・豆腐（□）になる時のフォント指定確認

出力したPDFを開いた際、日本語の文字が「□□□」のように四角い枠（いわゆる豆腐文字）になってしまったり、文字化けして読めない現象です。

② ローカル画像が表示されない時の相対パス設定

Markdown本文内に ![アーキテクチャ図](./images/architecture.png) のように画像リンクを挿入しているのに、PDF上で画像が表示されず空白や×印になってしまうトラブルです。

③ 「Error: Chromium revision is not downloaded」と表示される場合

企業の社内LAN（プロキシ環境）や強固なウイルス対策ソフトの制限によって、Markdown PDFが内蔵Chromiumのダウンロードに失敗した際に出現するエラーです。

{
  /* Windowsの場合（Google Chromeを指定） */
  "markdown-pdf.executablePath": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"

  /* Macの場合（Google Chromeを指定） */
  // "markdown-pdf.executablePath": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
}

④ 表の背景色やCSS装飾がPDFに反映されない場合

CSSでテーブルの見出し行（th）に背景色を付けたりコードブロックを黒背景に設定しているのに、PDF出力すると背景が白抜けしてしまう現象です。

これはブラウザの「印刷時のインク節約機能」が働いていることが原因です。先ほどご紹介したCSSファイルの冒頭、または body セレクタに以下のプロパティを追加してください。

/* 背景色・グラフィックを強制的に印刷出力する指定 */
* {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

この記述を追加することで、CSSで指定した鮮やかな背景色やテーブルのストライプ装飾が100%そのままPDFに反映されるようになります。

まとめ

Markdown文書を綺麗なPDFへと変換する方法について、VS Code拡張機能「Markdown PDF」の基本操作からCSSによるプロ級カスタマイズ、意図通りの改ページ制御、トラブルシューティングまで詳しく解説しました。

一度お好みのCSSスタイルシートと設定を作ってしまえば、以降は Markdownで文章を書いて保存するだけで、誰でもいつでもプロフェッショナルな配布用PDFを瞬時に作成 できるようになります。

ぜひ本記事のCSSスニペットや設定コードをコピペして、日々の業務資料作成やドキュメント作成の生産性を飛躍的に向上させてみてください！