📝 HTML→Markdown変換

HTMLを貼り付けると、Markdown記法に変換します。見出し・太字・斜体・取り消し線・リスト・引用・コード・リンク・画像・テーブルに対応。すべてブラウザ内で処理し、入力内容は送信しません。

HTML入力

Markdown出力

Markdown 0 文字

※ 入力HTMLは DOMParser の text/html 解析で処理します。この方法で作られるドキュメントは不活性で、<script> は実行されず外部リソースも読み込まれません。生成したMarkdownはプレーンテキストとして表示するだけで、入力内容がどこかへ送信されることはありません。

解説

HTML→Markdown変換は、HTMLで書かれた文書やその断片を、Markdown記法のプレーンテキストに変換するツールです。Webページからコピーした本文、CMSが吐き出したHTML、メールのHTMLソースなどを、GitHubのREADMEやブログのMarkdownエディタ、ドキュメントツールで扱いやすい軽量な記法に整えられます。入力すると同時に右側へ結果が表示され、そのままコピーして使えます。処理はすべてお使いのブラウザ内で行われ、入力したHTMLがサーバーへ送られることはありません。

変換は、入力HTMLを標準のDOMParser（text/html）で解析し、できあがったDOMツリーを先頭から再帰的にたどって行います。要素の種類ごとに対応するMarkdown記法へ置き換える自前の実装で、外部ライブラリは一切使っていません。見出しは階層に応じた # の数、strong/bは **、em/iは *、del/sは ~~、インラインのcodeはバッククォート、pre内のコードは ``` のフェンス（class="language-xxx" があれば言語名も付与）に変換します。ul/olのリストはネストのインデントも保ちながら - や 1. に、blockquoteは各行頭の > に、hrは --- に置き換えます。

リンク（a要素）は表示テキストとhref属性から [テキスト](URL) を、画像（img要素）はalt属性とsrc属性から ![代替文字](URL) を生成します（title属性があれば併記）。テーブル（table要素）は、最初の行をヘッダーとみなしてGFM（GitHub Flavored Markdown）の | 区切り表に変換し、セル内の | は自動でエスケープします。段落（p）は空行で区切り、br（改行）は行内の改行として扱います。定義した記法に当てはまらない未対応タグ（span・divなど）は、装飾を付けずに中身のテキストだけを残すため、情報が欠落しにくいのが特徴です。

セキュリティ面では、DOMParserのparseFromStringで生成されるドキュメントが「不活性（inert）」である性質を利用しています。この方法で解析したHTMLは、たとえ <script> を含んでいてもスクリプトは実行されず、<img> などの外部リソースも読み込まれません。ツールが取り出すのはタグ名・属性値・テキストだけで、生成する成果物はプレーンテキスト（Markdownソース）です。結果は編集不可のテキスト欄に表示するだけなので、貼り付けたHTMLが意図せず実行される心配はありません。変換結果は元HTMLの意味構造の近似であり、複雑な入れ子や独自マークアップでは細部が簡略化される場合がある点は目安として理解しておくとよいでしょう。

よくある質問

どんなHTMLをMarkdownに変換できますか？

見出し（h1〜h6）、太字（strong/b）、斜体（em/i）、取り消し線（del/s）、インラインコード（code）、コードブロック（pre>code）、箇条書き・番号リスト（ul/ol/li）、引用（blockquote）、水平線（hr）、リンク（a）、画像（img）、改行（br）、段落（p）、テーブル（table）に対応しています。これら以外のタグは、中身のテキストを残す形で処理します。

貼り付けたHTMLに含まれる<script>は実行されますか？

実行されません。解析にはDOMParserのtext/htmlモードを使っており、この方法で生成されるドキュメントは不活性です。scriptは動かず、画像などの外部リソースも読み込まれません。取り出すのはタグ名・属性・テキストのみで、結果はプレーンテキストとして表示されます。

テーブルはどのように変換されますか？

table要素の最初の行をヘッダーとみなし、GFM（GitHub Flavored Markdown）の | 区切り表に変換します。ヘッダー行の下には自動で区切り線（| --- | --- |）を挿入します。セル内に | が含まれる場合は \| としてエスケープするため、表が崩れません。

リストのネスト（入れ子）は保たれますか？

はい。ul/olの中にさらにul/olがある場合、階層の深さに応じて半角スペース2つ分ずつインデントして出力します。番号リストは 1. 2. …、箇条書きは - で表現します。

対応していないタグ（divやspanなど）はどうなりますか？

Markdownに対応する記法が無いタグは、装飾を付けずに中身のテキストだけを残します。divやsectionなどのブロック要素はコンテナとして中を再帰的にたどり、spanなどのインライン要素はテキストをそのまま引き継ぎます。これにより情報の欠落を最小限に抑えます。

入力したHTMLは外部に送信されますか？

送信されません。変換はすべてお使いのブラウザ内のJavaScriptで完結し、ネットワーク通信は発生しません。社内文書やメールのHTMLなど、外に出したくない内容にも安心して使えます。オフラインでも動作します。

変換結果が元のHTMLと少し違うことがあるのはなぜですか？

Markdownは軽量な記法のため、HTMLのすべての表現を1対1で再現できるわけではありません。複雑な入れ子、独自の属性、Markdownに存在しない装飾などは簡略化されます。変換結果は意味構造の近似（目安）と考え、必要に応じて手直ししてください。

逆にMarkdownからHTMLを作りたいときは？

姉妹ツールの「Markdownプレビュー」をご利用ください。Markdownを入力するとHTMLへ変換してリアルタイム表示し、生成したHTMLソースのコピーやファイル保存もできます。本ツールとあわせて双方向に使えます。