HTMLからMarkdownへの変換ツール
HTMLを貼り付けると、構造を保ったMarkdownが得られます。見出し、太字と斜体、リンク、画像、リスト、引用、コードブロック、シンプルなテーブルです。スクリプト、スタイル、レイアウトのラッパーは取り除かれ、結果がどれだけ短くなったかも表示されます。無料で、登録は不要です。HTMLはブラウザで解析され、アップロードされることはありません。
HTMLからMarkdownへの変換ツールの使い方
- 1. HTMLを貼り付けます。 断片でもページ全体でも使えます。変換されるのは本文だけです。
- 2. 「Markdownに変換」を押します。 下にMarkdownが表示され、3つのカウンター（HTML文字数、Markdown文字数、サイズの削減率）も表示されます。
- 3. 結果を確認します。 元のHTMLと照らし合わせて読みます。特にテーブルとネストしたリストは注意してください（下の限界を参照）。
- 4. コピーします。 Markdownをコピー で、テキストをクリップボードにコピーします。READMEや静的サイトジェネレーター、メモアプリにそのまま貼り付けられます。
各HTML要素の変換先
ツールは、ブラウザ自身のHTMLパーサーでHTMLを解析し、ツリーをたどります。そのため、不完全なマークアップも、ブラウザがそれを修復するのと同じように修復されます。各要素は次のようにMarkdownに対応づけられます：
| HTML | Markdown |
|---|---|
h1〜h6 | #〜###### と見出しのテキスト |
p | 空行で区切られた段落 |
br、hr | 改行。--- |
strong、b | **太字** |
em、i | *斜体* |
code | 1つのバッククォートで囲まれたテキスト |
pre | 言語ラベルのない、3つのバッククォートのフェンスコードブロック |
a | [テキスト](アドレス) |
img |  |
ul、ol | - の箇条書き、または 1. 2. 3. と1から振り直した番号。下位のリストは階層ごとに2つの空白でインデントされます |
blockquote | 各行の先頭に > |
table | パイプテーブル。最初の行がヘッダーになります |
div、span、section、その他すべて | 解除されます。タグは消え、中身は残ります |
script、style、head、meta、link、title、noscript、template、iframe | 中身ごと削除されます |
具体例
HTML
<h1>Citation Basics</h1><p>Use <strong>APA</strong> or <em>MLA</em>; see the <a href="https://apastyle.apa.org">APA site</a>.</p><ul><li>Author</li><li>Year<ul><li>Month</li></ul></li></ul><table><tr><th>Style</th><th>Year</th></tr><tr><td>APA</td><td>7th</td></tr></table>
Markdown
# Citation Basics という見出し。Use **APA** or *MLA*; see the [APA site](https://apastyle.apa.org). という段落。リスト - Author、- Year、インデントされた - Month。そのあと、--- の区切り行と1行（APAと7th）を持つ2列のパイプテーブル。
カウンター
HTMLは273文字、Markdownは159文字、42%の削減。
Markdownは、HTMLにできることのすべてを表現できるわけではありません。それがMarkdownの目的です。出力は文書の構造であり、見た目は含みません。
確認すべき限界
- テーブルは平坦になります。 各セルは、プレーンテキストに置き換えられます。そのため、セル内のリンクや強調は失われ、パイプはエスケープされ、結合されたセルは理解されません。パイプテーブルはGitHub Flavored Markdownの拡張であり、コアのCommonMarkには含まれないため、送り先が対応しているか確認してください。
- 一部のインラインタグは削除されます。 下線、取り消し線、上付き文字、下付き文字には、ここでのMarkdownの対応する記法がないため、テキストは書式なしで残ります。
- 特殊文字はエスケープされません。 テキストにある文字どおりのアスタリスクやアンダースコアはそのまま残るため、Markdownのレンダラーが強調として解釈する可能性があります。
- ネストした番号付きリスト は階層ごとに2つの空白でインデントされます。ほとんどのレンダラーはこれを受け入れますが、一部では
1.の下に3つ必要な場合があります。 - リンクと画像は元のアドレスを保ちます。 そのため、相対パスは相対のままです。
どのツールが必要ですか？
HTMLからMarkdownへ移るときに構造を保つにはこのページを使います。テキストだけが必要なら、HTMLタグ除去ツールはプレーンテキストを出力します。逆方向では、Markdown to HTML ConverterがMarkdownを描画し、MarkdownからテキストへはMarkdownをプレーンテキストに戻します。変換の前にHTMLを整えるには、HTML Formatterを使ってください。
よくある質問
- どのHTML要素がMarkdownに変換されますか？
- 見出し、段落、改行、水平線、太字、斜体、インラインコード、コードブロック、リンク、画像、順序付きと順序なしのリスト、引用、そしてシンプルなテーブルです。正確な対応は上の表にあります。
- ネストしたリストにも対応していますか？
- はい。下位のリストは階層ごとに2つの空白でインデントされ、番号付きリストは1から振り直されます。HTMLで
start="5"のように別の番号から始まるリストも、1から振り直されます。 - 変換ツールが認識しないタグはどうなりますか？
- 解除されます。タグは削除され、そのテキストは残ります。divやspanは跡形もなく消えますが、scriptやstyleなどの要素は中身ごと削除されます。
- HTMLのテーブルも変換できますか？
- シンプルなものは変換できます。パイプテーブルになり、最初の行がヘッダーになります。結合されたセル、ネストしたテーブル、セル内のリンクや書式は保持されません。
- ウェブページ全体でも使えますか？
- 使えます。ただし、ナビゲーションメニューやフッターを含め、本文のすべてを通常のテキストとリンクとして変換します。記事の場合は、記事のHTMLだけを貼り付けてください。
- なぜMarkdownは、元のページよりも簡素に見えるのですか？
- Markdownが記録するのは、見出し、強調、リンク、リストといった構造であり、色、フォント、レイアウトではありません。CSS、フォーム、埋め込みウィジェットは、設計上取り除かれます。
- 私のHTMLはサーバーにアップロードされますか？
- いいえ。変換は、ブラウザ組み込みのDOMParserを使ってブラウザ内で行われます。DOMParserは貼り付けたHTMLのスクリプトを実行しません。貼り付けた内容が端末の外に出ることはありません。