Markdown を HTML・PDF に変換するクイックスタートガイド

Markdown を HTML または PDF に変換する最短手順。ファイルの読み込みからプレビュー・レイアウト設定・ダウンロードまでを初心者向けに解説。ブラウザ完結・サーバー送信なし。

この記事でわかること

  • Markdown（.md）を HTML または PDF に変換するまでの最短ステップ
  • ファイルの読み込み方法（ドラッグ＆ドロップ・ボタン・直接入力）
  • プレビューで見た目を確認する方法
  • レイアウト設定の基本（フォント・余白・改ページ）
  • ブラウザ完結でファイルがサーバーに送られない仕組み

初めてこのツールを使う方が、5分以内に HTML または PDF を手に入れるためのガイドです。

このツールでできること

機能内容
HTML 変換.md をスタイル付きの1つの HTML ファイルとして書き出す
PDF 変換ブラウザの印刷機能を使って PDF に保存する
リアルタイムプレビュー編集しながら変換結果をすぐ確認できる
レイアウト調整余白・フォント・行間・改ページ位置を自由に設定
画像埋め込みペースト/ドロップした画像を Base64 で HTML に組み込む
完全ブラウザ動作ファイルをサーバーに送らずに変換できる

4ステップで始める

ステップ1：ファイルを読み込む

次のいずれかの方法で .md ファイルを読み込みます。

  • ドラッグ＆ドロップ：画面中央の「ここにドロップ」エリアに .md ファイルを落とす
  • ファイルを選択：ツールバーの「ファイルを選択」ボタンをクリック
  • 直接入力：「編集」タブを開いて Markdown テキストを貼り付ける

対応形式は .md のテキストファイル（最大 10MB）です。

ステップ2：プレビューで確認する

ファイルを読み込むと、すぐに右側（または「プレビュー」タブ）に変換後の見た目が表示されます。見出し・リスト・表・コードブロックが正しく表示されているか確認してください。

表示モードは3種類あります。

モード用途
編集Markdown ソースだけを表示。書き直しに集中できる
プレビュー変換後の見た目だけを表示。PDF に近いレイアウトで確認できる
分割左に編集、右にプレビューを並べて同時確認

ステップ3：必要ならレイアウト設定を調整する

「レイアウト設定」ボタンをクリックするとパネルが開きます。基本設定には次のものがあります。

  • フォントサイズ：文字の大きさ（デフォルトは14px）
  • 行間：行と行の間隔
  • 最大幅：本文の幅の上限（読みやすさの調整）
  • フォント：ゴシック体または明朝体

PDF 向けには「詳細設定」で余白（上下左右 mm 指定）や改ページルール（h1 の前で改ページ、表の途中で切らないなど）も設定できます。

ステップ4：HTML ダウンロードまたは PDF で保存する

  • HTML ダウンロード：画面下部の「HTML をダウンロード」ボタンをクリック。スタイルと画像が1つの HTML ファイルに埋め込まれます。
  • PDF で保存：「PDF で保存」をクリックするとブラウザの印刷ダイアログが開きます。送信先を「PDF に保存」に設定して保存してください。PDF の品質は Google Chrome が最も安定しています。

プライバシー：ファイルはサーバーに送られません

ファイルの読み込み・変換・プレビュー・ダウンロードはすべてブラウザ内で処理されます。社内文書や機密情報を含む .md ファイルも安心して使えます。

よくある質問（FAQ）

Q. HTML と PDF、どちらで出力すべきですか？

Web やポータルに貼るなら HTML、印刷・配布・提出が目的なら PDF が向いています。どちらも同じ画面から出力できます。

Q. ページを再読み込みしたらデータが消えますか？

いいえ。編集中の Markdown・レイアウト設定はセッション中はブラウザに保持されるため、ページを再読み込みしても消えません。

Q. 画像は使えますか？

はい。「分割」または「編集」表示で、画像をペースト（Ctrl+V / Cmd+V）またはドロップすると Markdown の画像記法に変換されます。HTML ダウンロード時は画像が Base64 で埋め込まれます。対応形式は PNG・JPEG・GIF・WebP、上限は 5MB です。

Q. 対応しているファイルサイズは？

.md ファイルは最大 10MB まで読み込めます。

Q. 改ページはどうやって設定しますか？

Markdown 本文には改ページ記法を書きません。レイアウト設定の「印刷・ページの切れ目」でルールを設定し、プレビューの改ページ線をドラッグして位置を微調整します。詳細は プレビューで改ページをドラッグ＆ドロップで調整する を参照してください。

Q. PDF が画面と見た目が違うのですが？

ブラウザの印刷ダイアログの「余白」設定を「デフォルト」にし、ズームを 100% にして再試行してください。詳細は Markdown PDF・印刷で崩れる原因と対策 を参照してください。

Markdown を PDF に変換する（ツールを開く）

関連記事