HTML→Markdown変換の使い方｜貼るだけで見出し・表・コードを安全に変換
公開日：2026年9月18日 更新日：2026年9月15日 運営：シルギア（Analyzegear, Inc.） 対象ツール：HTML→Markdown変換
WebページからコピーしたHTMLやCMSが吐き出したHTMLは、そのままではGitHubのREADMEやブログに転記しづらいことがあります。このツールは、貼り付けたHTMLをその場でMarkdown記法のプレーンテキストへ変換します。入力欄にHTMLを入れると同時に、右（スマホでは下）の出力欄へ結果がリアルタイムで表示され、そのままコピーして使えます。ここでは、HTMLとMarkdownの関係、変換の仕組み、対応タグと変換ルール、そして安全性までを実装に沿って説明します。
HTMLとMarkdownはどう違うのか
HTMLはタグで構造を細かく指定する記述言語です。見出しなら h2、段落なら p、強調なら strong というように、開始タグと終了タグで要素を囲みます。表現力は高い一方、記号が多く、人が直接読み書きするには冗長になりがちです。
Markdownは、その構造を最小限の記号で表す軽量な記法です。見出しは行頭の # の数、強調は ** で囲む、箇条書きは行頭の - といった具合に、素のテキストのまま構造が読み取れます。GitHubやブログエディタ、ドキュメントツールの多くがMarkdownを受け付けるので、HTMLから直せると転記が楽になります。ただしMarkdownは軽量ゆえに、HTMLのあらゆる装飾を一対一で再現できるわけではなく、変換結果は意味構造の近似（目安）と捉えるのが実務的です。
このツールが変換する仕組み
変換は外部ライブラリを使わず、ブラウザ標準の機能だけで行っています。まず入力されたHTML文字列を、標準のDOMParserにtext/htmlモードで渡して解析し、DOMツリー（要素の入れ子構造）を組み立てます。次に、そのツリーを先頭から再帰的にたどり、要素の種類ごとに対応するMarkdown記法へ置き換えていきます。
処理は大きくブロック要素とインライン要素に分かれます。段落・見出し・リスト・引用・表などのブロックは空行で区切って積み上げ、太字・斜体・リンク・画像などのインラインは、その行の中で記号に置き換えます。改行のbrは行内の改行として扱い、連続する空白は1つにまとめて整えます。取り出すのは要素名・属性値・テキストだけで、生成物はプレーンテキストのMarkdownソースです。すべての処理はブラウザ内で完結し、オフラインでも動作します。
対応しているタグと変換ルール
主要なタグは次のように変換されます。
- 見出し h1〜h6：階層に応じた # の数（h2なら ##）
- 強調 strong / b：**で囲む／em / i：*で囲む
- 取り消し線 del / s：~~で囲む
- インラインコード code：バッククォートで囲む（中身に ` を含む場合は二重フェンスで隔てる）
- コードブロック pre>code：```のフェンス。class="language-xxx" があれば言語名も付与
- リスト ul / ol：- や 1. に変換し、入れ子は半角スペース2つ分ずつインデント
- 引用 blockquote：各行頭に > を付与／水平線 hr：---
- リンク a：[テキスト](URL)／画像 img：（title属性があれば併記）
- 表 table：最初の行をヘッダーとみなしGFMの | 区切り表に変換。セル内の | は自動でエスケープ
ここで大切なのが未対応タグの扱いです。Markdownに対応する記法が無いタグ、たとえば span や div、section などは、装飾を付けずに中身のテキストだけを残します。divやsectionはコンテナとして中を再帰的にたどるため、独自マークアップが混ざっていても情報が丸ごと消えにくいのが特徴です。一方で、script・style・noscript・head・titleなどは中身ごと無視し、本文には出しません。
変換例で確認する
短い入力で実際の変換を見てみます。次のHTMLを貼り付けたとします。
<h2>見出し</h2><p>これは<strong>太字</strong></p><ul><li>A</li><li>B</li></ul>
出力は次のようになります。ブロックごとに空行で区切られる点に注目してください。
- 1行目：## 見出し（h2なので # が2つ）
- 2行目：これは**太字**（段落の中で strong が ** に変わる）
- 3・4行目：- A と - B（箇条書きが行頭の - になる）
ほかにも、リンクの a要素は [リンク](https://shirugear.com) に、alt="ロゴ" と src="/logo.png" を持つ img要素は  になります。表であれば、ヘッダー行の下に | --- | --- | の区切り線が自動で挿入され、そのままGitHubやMarkdownエディタに貼って表として表示できます。
スクリプトを実行しない安全性
他人が書いたHTMLや、出所のはっきりしないコピー元を扱うときに気になるのが安全性です。このツールは、DOMParserのparseFromStringで生成されるドキュメントが「不活性（inert）」である性質を利用しています。この方法で解析したHTMLは、たとえ script を含んでいてもスクリプトは実行されず、img などの外部リソースも読み込まれません。
加えて、結果は編集不可のテキスト欄に文字として表示するだけで、ユーザー入力をinnerHTMLで再描画する経路は作っていません。そのため貼り付けたHTMLが意図せず動き出す心配はなく、社内文書やメールのHTMLソースなど外に出したくない内容でも安心して処理できます。
使いどころと注意点
このツールが活きるのは、Webページの本文をブログへ転記する、CMSが出力したHTMLをREADMEやWiki向けのMarkdownに直す、メールのHTMLソースから要点をテキスト化する、といった場面です。使い方は、入力欄にHTMLを貼り、右の出力欄のMarkdownを「Markdownをコピー」ボタンで取得して目的のエディタに貼るだけです。出力欄の下には文字数も表示されます。
注意点として、複雑な入れ子・独自属性・Markdownに存在しない装飾などは簡略化され、結合セルの表やCSSで作った見た目は再現されません。変換後は一度ざっと読み返し、見出しの階層やリンク先、コードブロックの言語指定などを必要に応じて手直しすると仕上がりが安定します。逆にMarkdownからHTMLを作りたいときは、姉妹ツールの「Markdownプレビュー」を組み合わせると双方向に扱えます。