Markdown→HTML変換

Markdownの文章を、ブログやサイトに使うHTMLに変換できます。

変換結果がここに表示されます

使い方

使い方

  1. 左の入力欄に、ChatGPTやClaudeの回答などのMarkdownを貼り付けます。
  2. 右側に変換結果がプレビュー表示されます。「HTMLソース」タブに切り替えるとHTMLのコードを確認できます。
  3. 用途に応じて「HTMLソースをコピー」「リッチテキストとしてコピー」「.htmlをダウンロード」のいずれかを使います。

ChatGPTの文章をブログに貼る手順

  1. ChatGPTやClaudeの回答をコピーして、このツールの入力欄に貼り付けます。
  2. ブログやCMSの本文にすでに記事タイトル（H1）がある場合は、「見出しレベル」で「1段階下げる」を選び、見出しの階層が二重にならないようにします。
  3. 「HTMLソースをコピー」でHTMLコードをコピーし、CMSのHTML編集モード（WordPressなら「コードエディター」、はてなブログなら「見たままモード」以外の編集画面など）に貼り付けます。
  4. HTML編集モードがないエディタの場合は、「リッチテキストとしてコピー」を使うと、見出しや太字などの書式を保ったまま通常の編集画面に貼り付けられます。

出力されるHTMLにはclass属性やstyle属性が付かないため、CMS側にすでに設定されているデザイン（見出しの色や表の罫線など）がそのまま適用されます。

こんなときに便利です

  • ChatGPTやClaudeの回答をブログ記事やヘルプページの下書きとして使いたいとき
  • Markdownで書いたドキュメントを、社内Wikiやコーポレートサイトに埋め込みたいとき
  • READMEやリリースノートをHTMLメールやお知らせページに転用したいとき
  • 「#」や「**」などの記号が残ったままCMSに貼り付いてしまい、手作業で直しているとき

対応しているMarkdown記法

  • 見出し（# 〜 ######）
  • 段落・強調（太字 **太字** ・斜体 *斜体* ・打ち消し線 ~~取り消し~~）
  • リンク・画像
  • 箇条書き・番号付きリスト（入れ子にも対応）
  • 引用（>）
  • コードブロック（<pre><code>、フェンス記法 ```）・インラインコード
  • 表（| 区切りのGFMテーブル）
  • 水平線

よくある質問

クラス属性やstyle属性が付いたHTMLも出力できますか？
このツールは意図的にclass属性やstyle属性を付けない、素のセマンティックHTML（h1〜h6・p・ul/ol・table・blockquote・pre/code など）だけを出力します。ブログやCMSにはそれぞれ独自のスタイルが当たっていることが多いため、余計な装飾を持ち込まずCMS側のデザインにそのまま馴染む形にしています。
見出しレベルのシフトはどんなときに使いますか？
ブログやCMSの記事本文では、記事タイトル自体がすでにH1になっていることが多く、本文中にもH1を置くと見出し構造が二重になってしまいます。「1段階下げる」を選ぶと、変換元のH1はH2に、H2はH3に、というように全体を1段ずつ繰り下げて出力するので、そのまま本文に貼り付けられます。
改行の扱いの「そのまま」と「段落のみ」はどう違いますか？
「段落のみ（標準Markdown）」を選ぶと、空行で区切られた範囲だけを1つの段落（p要素）として扱い、段落内の単なる改行は詰めて表示します。「そのまま&lt;br&gt;を挿入」を選ぶと、入力した改行の位置に&lt;br&gt;タグを挿入し、見た目の改行をそのまま反映します。ChatGPTの回答は前者（標準Markdown）の想定で書かれていることが多いです。
表やコードブロックにも対応していますか？
はい。見出し・段落・強調（太字/斜体/打ち消し線）・リンク・画像・箇条書き/番号リスト（入れ子含む）・引用・コードブロック（&lt;pre&gt;&lt;code&gt;）・インラインコード・表（GFM形式の｜区切り）・水平線に対応しています。
入力した文章がサーバーに送信されることはありますか？
ありません。Markdownの解析からHTML生成、コピー、ダウンロードまですべてブラウザ内のJavaScriptで完結します。社外秘の文書や下書き中の記事も安心して変換できます。
シェア B!