Markdown を HTML・PDF に変換する使い方・手順ガイド

Markdown Document Converter の全機能ガイド。ファイル読み込み・表示モード・レイアウト設定・HTML ダウンロード・PDF 保存の手順をスクリーンショット付きで解説。FAQ付き。

この記事について

Markdown Document Converter の画面構成と、Markdown を HTML や PDF に変換するまでの操作を、ステップごとに解説します。初めて使う方や「どのボタンが何をするか」を確認したい方向けのガイドです。

1. ツールの全体像

画面上部には ツール / お知らせ / 使い方・ブログ などのナビがあります。メインの作業エリアでは、次のような流れで使います。

  • ファイルを読み込む（アップロード or 編集タブで直接入力）
  • プレビューで表示を確認する
  • 必要ならレイアウト設定で見た目を調整する
  • HTML をダウンロードまたはPDF で保存する

すべての処理はブラウザ内で完結するため、ファイルがサーバーに送信されることはありません。

ツールの初期画面。変換元・変換先の選択と、ファイルをドロップするエリア

図: ファイル未読み込み時の画面。ここに .md をドロップするか「ファイルを選択」で読み込みます。

2. ファイルの読み込み

方法 A：ドラッグ＆ドロップ

プレビュータブを表示した状態で、.md ファイルを画面の中央エリアにドラッグ＆ドロップすると、そのファイルの内容が読み込まれます。プレビューが空のときは「ここに .md をドロップ または ボタンでファイルを選択」と表示されているエリアがドロップ先です。

方法 B：ボタンでファイルを選択

**「ファイルを選択」**ボタンをクリックし、開いたダイアログから .md ファイルを選びます。プレビュー・編集・分割のどの表示モードでも、画面上部のツールバーにこのボタンがあります。

方法 C：編集タブで直接入力

編集タブを開き、テキストエリアに Markdown を直接入力または貼り付けできます。新規でドキュメントを書き始めるときに便利です。

注意：すでに内容がある状態で別の .md をドロップまたは選択すると、「編集中の内容が置き換わります。よろしいですか？」と確認が出ます。対応は最大 10MB までです。

3. 表示モード（編集・プレビュー・分割）

メインエリアの上にある 編集 / プレビュー / 分割 のボタンで、表示の切り替えができます。

モード説明
編集Markdown のソースだけを表示。書きやすく、ツールバーで見出し・リストなどの書式を挿入できます。
プレビュー変換後の見た目だけを表示。印刷や PDF に近い形で確認できます。
分割左に編集、右にプレビューを並べて表示。編集しながらすぐに結果を確認したいときに便利です。

編集タブでは、画像のペースト（Ctrl+V / Cmd+V）やドロップにも対応しています。クリップボードやデスクトップの画像をそのまま貼り付けると、Markdown の画像記法に変換されます。

4. レイアウト設定

**「レイアウト設定」**ボタン（定規・レイアウトのアイコン）をクリックすると、プレビューと PDF の見た目を調整するパネルが開きます。

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

詳細設定では、印刷・余白（上・下・左・右）や 印刷・ページの切れ目（h1/h2 の前で改ページ、表やコードブロックの途中で改ページしない、など）を指定できます。PDF で配布する仕様書や設計書を作るときに役立ちます。プレビュー上で改ページ線をドラッグして位置を調整する手順は、プレビューで改ページをドラッグ＆ドロップで調整する を参照してください。

レイアウト設定パネル

図: レイアウト設定でフォントサイズ・行間・余白などを調整できます。

5. HTML のダウンロード

内容を入力または読み込んだあと、画面下部の 「HTML をダウンロード」 をクリックすると、現在のプレビューと同じ見た目の 1 つの HTML ファイルがダウンロードされます。

  • スタイルは HTML 内に埋め込まれるため、その 1 ファイルだけでもレイアウトを再現できます。
  • 画像を Base64 で埋め込むため、画像付きの Markdown でも 1 ファイルで配布しやすい形式です。

ダウンロード後は「Downloaded」のようなメッセージが表示されます。

6. PDF で保存

「PDF で保存」 をクリックすると、ブラウザの印刷ダイアログが開きます。そこで「送信先」や「保存先」から 「PDF に保存」（Chrome の場合）を選び、保存先を指定すると PDF が作成されます。

  • レイアウト設定（余白・改ページなど）は、この印刷プレビューにも反映されます。
  • PDF の見た目を安定させたい場合は、Google Chrome での利用を推奨しています。

画面上部のヒントにも「印刷ダイアログで『PDFに保存』を選ぶとレイアウトを保てます」と出ます。

7. その他の操作

  • リセット … 編集中の内容とファイル名をクリアし、初期状態に戻します。画面上部のツールバーと、画面下部のダウンロードバーの両方にあります。
  • MD→HTML / MD→PDF … トップでは「MD→HTML」「MD→PDF」のリンクで同じツールの別ラベルに切り替わります。どちらも同じ画面で、HTML ダウンロードと PDF 保存の両方を使えます。
  • リロードしても大丈夫 … 編集中の Markdown、レイアウト設定などはセッション中はブラウザに保持されています。ページを再読み込みしても内容や設定は維持されるため、作業の途中でリロードしても問題ありません。

PDF 変換を試す場合は、次のボタンからツールへ移動できます。

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

8. よくある質問・注意

  • ファイルはサーバーに送信されますか？
    いいえ。読み込み・変換・プレビュー・HTML/PDF の生成はすべてブラウザ内で行われ、サーバーには送信されません。
  • 対応しているファイル形式は？
    .md（Markdown） のテキストファイルです。最大 10MB まで。
  • 画像は使えますか？
    はい。編集タブで画像をペーストまたはドロップすると、Markdown の画像として挿入されます。HTML ダウンロード時は画像は Base64 で HTML に埋め込まれます。
  • リロードするとデータは消えますか？
    いいえ。セッション中は編集中の内容やレイアウト設定などがブラウザに保持されているため、ページを再読み込みしても消えません。作業の途中でリロードしても問題ありません。

不明点や要望は、お問い合わせページから送れます。