MarkdownをHTMLに変換する方法まとめ
Markdown（マークダウン）で書いた文書をWebページやブログに載せるには、HTMLへの変換が必要です。このページでは、「1回だけサッと変換したい」から「大量ファイルの一括変換」「アプリへの組み込み」まで、用途別に方法をまとめました。
| 用途 | おすすめの方法 |
|---|---|
| 1回だけ・すぐ変換したい | ブラウザの変換ツール（インストール不要） |
| ブログ記事として貼りたい | スタイル込みHTML出力（CSSとセットでコピー） |
| 大量ファイルの一括変換 | pandoc（コマンドライン） |
| ドキュメントサイトを作りたい | 静的サイトジェネレーター（Hugo・MkDocs等） |
| 自分のアプリに組み込みたい | JSライブラリ（marked・markdown-it） |
変換で何が起きるのか（対応表）
Markdownの各記法は、次のようにHTMLタグへ機械的に変換されます。
| Markdown | 変換後のHTML |
|---|---|
# 見出し | <h1>見出し</h1> |
**太字** | <strong>太字</strong> |
- 項目 | <ul><li>項目</li></ul> |
[表示名](URL) | <a href="URL">表示名</a> |
`コード` | <code>コード</code> |
| 段落（空行区切り） | <p>...</p> |
ここで重要なのは、変換されるのは「構造」だけという点です。フォント・色・余白などの「見た目」はHTMLではなくCSSの担当なので、変換したHTMLを綺麗に表示するにはCSSもセットで必要になります。ブログに貼ったのに素っ気ない見た目になる場合、原因はほぼこれです。
方法1: ブラウザの無料ツールで変換する
もっとも手軽なのは、ブラウザで動く変換ツールです。当サイトのMarkdownビューアーもこの方式で、次の3ステップで完了します。
- Markdownテキストを貼り付ける（または .md ファイルをドロップ）
- プレビューで表示を確認する
- 「HTMLコピー」ボタンで変換結果をコピーする
方法2: ブログ用にスタイル込みで変換する
はてなブログ・WordPressなどに記事として貼る場合は、HTMLだけでなくCSS（見た目）もセットで用意するのがポイントです。手順の考え方はこうです。
- ビューアー上でフォント・見出しの装飾・余白を好みに調整する
- 「CSSコピー」でスタイルを取得し、ブログの「デザインCSS」欄に貼る（初回のみ）
- 記事ごとに「HTMLコピー」で本文を貼り付ける
この方式なら、2記事目以降はHTMLを貼るだけで統一されたデザインになります。見出しの下線や余白の調整方法はビューアーのスタイルカスタマイズパネルで直感的に試せます。
方法3: pandocで一括変換する
コマンドラインが使えるなら、ドキュメント変換の定番ツールpandocが強力です。
# 1ファイル変換
pandoc input.md -o output.html
# スタンドアロンHTML（head等も含む完全なページ）
pandoc input.md -s -o output.html
# フォルダ内の全.mdを一括変換（bash）
for f in *.md; do pandoc "$f" -s -o "${f%.md}.html"; done
- 数十〜数百ファイルの一括変換
- HTML以外（Word・PDF・EPUB等）への変換も同じツールで
- CIに組み込んだ自動変換
方法4: JavaScriptライブラリで組み込む
自分のWebアプリでMarkdownを表示したい場合は、変換ライブラリを組み込みます。定番はmarked（軽量・速い）とmarkdown-it（拡張性が高い）です。
import { marked } from 'marked';
const html = marked.parse('# Hello\n**world**');
// → <h1>Hello</h1><p><strong>world</strong></p>
ユーザー入力を変換して表示する場合は、サニタイズ（DOMPurify等）が必須です。Markdown内にはHTMLやスクリプトを書けるため、無防備に表示するとXSSの原因になります。
方法5: 静的サイトジェネレーターでサイト化する
「.mdファイル群をドキュメントサイトやブログとして公開したい」場合は、1ファイルずつ変換するのではなく、静的サイトジェネレーター（SSG）に任せるのが正解です。
- MkDocs / Docusaurus — 技術ドキュメント向け。検索・ナビゲーション付き
- Hugo / Astro — ブログ・汎用サイト向け。ビルドが高速
- GitHub Pages + Jekyll — GitHubにpushするだけで公開まで自動化
いずれも「Markdownを書けばHTMLとデザインは自動生成」という思想のツールで、変換作業そのものから解放されます。
まずは1本、変換してみませんか？
貼り付けてプレビュー確認、HTMLコピーまで30秒。登録もインストールも不要です。
よくある質問
逆にHTMLをMarkdownに変換できますか？
できます。pandocなら pandoc input.html -o output.md で逆変換が可能です。ただし複雑なHTML（入れ子のdivやCSS依存のレイアウト）は綺麗なMarkdownにならないことが多く、手直しを前提にしてください。
変換したHTMLをメールに貼れますか？
GmailなどのHTMLメールには、変換後の「表示された状態」をコピーして貼るのが実用的です。ビューアーのプレビュー部分を範囲選択してコピーすると、書式付きで貼り付けられます。
WordPressはMarkdownのまま書けませんか？
ブロックエディタは一部のMarkdown入力（# や - など）を自動変換します。完全なMarkdown運用をしたい場合はプラグインを追加するか、HTML変換して貼り付ける方式が確実です。
表やコードブロックも変換されますか？
はい。表は <table>、コードブロックは <pre><code> に変換されます。表の書き方は表のガイド、コードブロックはコードブロックのガイドをご覧ください。
関連ガイド
- Markdown記法一覧【チートシート】
- Markdownとは？初心者向け入門 — MarkdownとHTMLの関係
- VSCodeでMarkdownをプレビューする方法
- Markdownの表（テーブル）の書き方