全角文字⇄半角文字変換ツール
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 に貼るだけで装飾を再現 |
まとめると、「双方向でロスなく往復でき、日本語・WordPress・技術記事でそのまま使える」点が、他の Markdown⇔HTML 変換ツールとの主な違いです。
💡 基本の使い方
- 左側のテキストエリアに Markdown を貼り付ける
- 必要に応じてオプションを設定する(通常は初期設定のままで OK)
- 「変換 »」をクリック → 右側に HTML が出力され、自動でコピーされる
- 逆に HTML を Markdown に戻したいときは、右側に HTML を貼り付けて「« 変換」をクリック
⚙️ よく使うオプション
| オプション | 説明・使いどころ |
|---|---|
| Markdown → HTML に変換 | 見出し(#)・リスト(-/*)・リンク・テーブル・コードブロックを自動で HTML に変換します。基本は ON のまま使用。日本語に隣接した **太字**・*斜体* も正しく変換されます。 |
| <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」に貼り付けるだけで投稿可能。クラス自動付与で装飾もそのまま再現。 |
| Zenn / Qiita 記事の下書き | HTML の記事を「« 変換」で Markdown に戻すと、日本語に隣接した太字・斜体もマーカー前後にスペースが入り、Zenn・Qiita でそのまま正しく表示されます。画像の幅や回り込み(float)を保ちたいときは、「<img>タグはそのまま残す」をONにすると ![]() に変換せず、width・height・style を保持したまま出力できます(Markdownの ![]() ではサイズ指定ができないため)。 |
| GitHub README → Web ページ | README の Markdown をそのまま貼り付けて HTML に変換。コードブロック・テーブルもそのまま変換されます。 |
| HTML → Markdown 逆変換 | 既存の HTML を Markdown 形式に戻したいときは「« 変換」を使用。テーブルやコードも Markdown 記法に復元されます。 |
| 実体参照をデコードして HTML を取り出す | <table>… のように実体参照でエスケープされたHTML断片を、元の <table>… に戻します。「実体参照をデコード」をONに(<・10進 ・16進 
 に対応)。「HTMLを → Markdown記法 にデコード」も同時にONの場合は、Markdown化を先に行ってから実体参照をデコードします。実体参照の用途は「実体参照 → HTML」を取り出すことが多いため、この順序でHTML構造が保たれます。 |
📋 拡張オプションについて
オプション設定の「拡張オプション」には、特殊記号の変換・改行の詳細制御・文字列の一括置換など、より細かい変換オプションが収納されています。
通常の用途では基本オプションだけで十分ですが、衝突確認や特殊なフォーマット変換が必要なときに活用できます。
全角⇔半角(数字・英字)の変換もここにあります。「単独半角数字/英字を全角に」は、前後に半角文字が隣接しない1文字だけを全角化します(例:令和6年4月2日→令和6年4月2日)。iPhone 15・H2O・v2 のように半角英数字が連続する語はそのまま残るので、型番や版数の誤変換を防げます。日付・囲み数字・リストの頭文字などで字幅を揃えたいときに便利です。コードブロック内やURLは変換対象外です。
コードブロック内をインデント整形するは、{}・[]・HTMLタグ・PHPの代替構文(if : ?> … <?php endif; など)の開閉を見て、コードブロックの中身をタブで字下げし直します。VS Code等でMarkdownを整形するとコードブロック内のインデントが潰れてしまう問題の復旧に便利です。パーサーを使わず構造だけで字下げするため、PHP・HTML・CSS・JSが混在していても崩れません(インデントが意味を持つ python・yaml のブロックは対象外)。