Markdown記法⇄HTML オンライン変換ツール | 双方向変換サイト
Markdown記法をHTMLに変換できるオンライン変換サイト。テーブル、リスト記法をサポート。HTML→Markdown逆変換も可能。
使い方
このツールは、Markdown と HTML を相互に変換できるオンラインコンバーターです。左側のテキストエリアに Markdown を入力して「変換 »」を押すと右側に HTML が出力され、逆に「« 変換」を押せば HTML から Markdown への逆変換も行えます。変換結果は自動でクリップボードにコピーされます。インストール不要・ブラウザ内で完結し、入力内容がサーバーに送信されることはありません。
✨ このツールの特徴（他の変換ツールとの違い）
一般的な Markdown→HTML 変換ツールの多くは「片方向の変換」や「英語前提の記法」を想定しています。このツールは、日本語の実務（ブログ・WordPress・技術記事）で崩れないことを重視して設計されており、次の点が主な違いです。
| 観点 | 一般的な変換ツール | このツール |
|---|---|---|
| 変換の方向 | Markdown → HTML の片方向が多い | Markdown ⇔ HTML の双方向。HTML から Markdown への逆変換にも対応 |
| 日本語の太字・斜体 | **強調** が日本語に直接隣接すると、Zenn・Qiita 等で太字にならないことがある | マーカーの前後に半角スペースを自動挿入し、日本語に隣接しても太字・斜体が正しく表示される |
| テーブルの変換 | HTML→Markdown 時に <table> が生 HTML のまま残ることがある | Markdown テーブル（パイプ記法）と相互変換。セルの横結合・縦結合にも対応 |
| コード・記号の保護 | コード内の [ ] や < > がそのまま変換され、意図せず崩れることがある | コードブロック内やショートコード（[amazon] 等）を保護し、往復しても壊れない |
| WordPress との相性 | プレーンな HTML を出力（クラス付与は手作業） | テーマのクラスを自動付与（a→link など）。カスタム HTML に貼るだけで装飾を再現 |
| AI文章の整形 | 変換のみ | 変換と同時に、AI が書いた文章の不自然な繰り返しや表現を自動で調整 |
まとめると、「双方向でロスなく往復でき、日本語・WordPress・技術記事でそのまま使える」点が、他の Markdown⇔HTML 変換ツールとの主な違いです。
💡 基本の使い方
- 左側のテキストエリアに Markdown を貼り付ける
- 必要に応じてオプションを設定する（通常は初期設定のままで OK）
- 「変換 »」をクリック → 右側に HTML が出力され、自動でコピーされる
- 逆に HTML を Markdown に戻したいときは、右側に HTML を貼り付けて「« 変換」をクリック
⚙️ よく使うオプション
| オプション | 説明・使いどころ |
|---|---|
| Markdown → HTML に変換 | 見出し（#）・リスト（-/*）・リンク・テーブル・コードブロックを自動で HTML に変換します。基本は ON のまま使用。日本語に隣接した **太字**・*斜体* も正しく変換されます。 |
| AI文章を自然な表現に修正 | AI が出力した文章に多い「〜です。〜です。」の繰り返しや不自然な接続詞を整えます。ブログ記事の下書きを AI で生成したときに使うと効果的。 |
| <p> 内の改行を <br /> に変換 | 段落内の改行をそのまま <br /> に変換します。WordPress のブロックエディタに貼り付けたときに改行が消えてしまう場合はこれを ON に。 |
| | を → <table> タグに変換 ＋ セルの結合 | パイプ（|）で区切った Markdown テーブルを HTML に変換します。|>|・|<| で横結合、|^| で縦結合も可能。逆変換では <table> をパイプ記法に戻します。 |
| <img /> を <picture> で囲む | Markdown 記法の画像（）を変換したとき、img タグを自動で picture 要素で囲みます。レスポンシブ対応のテーマで使う場合に。 |
| タグへの class 自動付与 （a / b / s / h2〜h6 など） | 変換後のタグにテーマのクラス名を自動追加します。たとえば a タグに link、b タグに fw-600 を付与するなど、テーマに合わせて設定を変更できます。 |
| <ul><ol> の list-style-type を変換 | セレクトボックスでリストのスタイルを指定できます。テーマ独自の bullet・check・diamond などから選択可能。 |
🎯 活用例
| シーン | 使い方 |
|---|---|
| WordPress 投稿 | Markdown で書いた記事を HTML に変換し、ブロックエディタの「カスタム HTML」に貼り付けるだけで投稿可能。クラス自動付与で装飾もそのまま再現。 |
| AI生成文章の整形 | ChatGPT / Claude などの Markdown 出力を HTML に変換しながら、同時に AI 文章修正オプションで自然な日本語に整える。 |
| Zenn / Qiita 記事の下書き | HTML の記事を「« 変換」で Markdown に戻すと、日本語に隣接した太字・斜体もマーカー前後にスペースが入り、Zenn・Qiita でそのまま正しく表示されます。 |
| GitHub README → Web ページ | README の Markdown をそのまま貼り付けて HTML に変換。コードブロック・テーブルもそのまま変換されます。 |
| HTML → Markdown 逆変換 | 既存の HTML を Markdown 形式に戻したいときは「« 変換」を使用。テーブルやコードも Markdown 記法に復元されます。 |
📋 拡張オプションについて
オプション設定の「拡張オプション」には、特殊記号の変換・改行の詳細制御・文字列の一括置換など、より細かい変換オプションが収納されています。
通常の用途では基本オプションだけで十分ですが、衝突確認や特殊なフォーマット変換が必要なときに活用できます。
