HTML→Markdown変換

HTMLの本文構造をMarkdownの記号に置き換える

HTMLをMarkdownへ変換すると、タグで表していた見出しや強調などを、テキストと記号で読める形にできます。たとえば <h2>手順</h2> は ## 手順、<strong>重要</strong> は **重要** のように出力されます。Markdownは見た目の装飾ではなく、文章の構造を簡潔に記す形式です。基本記法は CommonMarkのMarkdownリファレンスでも確認できます。

変換後も本文の言語は入力どおりです。日本語を英語へ翻訳したり、文章を要約したりする機能ではありません。短く、見出し・段落・リンクなどの意味が分かりやすいHTML断片をMarkdownの下書きに移す用途に向いています。

タグの見た目ではなく意味を残す

HTMLには文字色、余白、配置、フォームなど多様な表現がありますが、Markdownで同じ見た目や操作を表せない場合があります。この変換では主に文章の骨組みを記号へ置き換えます。スタイルやスクリプトの機能、ページのレイアウトを再現するものではありません。Markdownに対応しないタグは取り除かれ、中の文字だけが残ることがあります。

見出しは深さに応じてシャープ記号の数が変わり、リンクは表示文字とURLの組み合わせになります。画像もMarkdownの画像記法に置き換えますが、画像そのものを取得・保存せず、入力された参照先を記録します。出力先によって拡張記法の扱いが異なるため、公開前に利用先で表示を確かめてください。基本構造を整える補助として使い、複雑なページをそのまま再現する変換とは区別しましょう。

貼り付けたHTMLから結果を保存する

1. 変換する範囲を選ぶ

   見出し、段落、リンク、強調、短いリストなど、Markdownに移したい部分をコピーします。ページ全体ではなく本文断片から始めると、ナビゲーションや装飾由来の文字が混ざりにくくなります。

2. 入力欄にHTMLを入れる

   コードを入力欄に貼り付けるか、例を読み込んで形式を確認します。入力を変えると結果が更新されます。HTMLファイルをアップロードしたり、ページURLを指定して取得したりする機能はありません。

3. Markdownの結果を点検する

   見出しの # の数、リンク先、画像の代替テキスト、段落の空行を確認します。特に ol は番号付きのまま残らず、各 li がハイフンの項目になります。番号に意味がある手順では、出力後に番号を補ってください。

4. コピーまたは.md形式で保存する

   コピー操作で結果をクリップボードに移すか、ダウンロード操作で converted.md として保存します。最後に利用先のエディターで、見出し、リンク、コードが意図どおり表示されるか確認します。

短い入力で変換結果を確かめる

<h1>更新メモ</h1>
<p>変更点を<strong>確認</strong>してください。</p>
<ul><li>項目A</li><li>項目B</li></ul>

この例では、見出しは # 更新メモ、太字は **確認** となり、リスト項目は - 項目A、- 項目B になります。元が ol の場合もハイフンです。必要な情報が残っているか、小さな入力で先に照合してから長い本文を処理すると差分を見つけやすくなります。

変換前に知っておきたいこと

変換後に手作業で確認する範囲

出力はMarkdown原稿の下書きとして確認してください。完全なHTML解析や、特定のMarkdown方言への準拠、変換前と同じ見た目を保証するものではありません。

• CSSの色・配置やJavaScriptによる動作はMarkdownに引き継がれません。表、フォーム、複雑な入れ子、複数段のリストなども、構造が失われたり平坦化したりする可能性があります。
• タグの認識は単純な形式を前提としているため、属性の並び方やタグの入れ子、HTMLの書き方によってはリンク・画像・コードの記号が期待どおりにならない場合があります。
• よく使われる一部の文字参照は文字に戻りますが、すべての名前付き・数値文字参照を処理するわけではありません。特殊文字やコード中の記号は結果を照合してください。
• 出力されたリンクや画像URLの有効性、内容の安全性は判定しません。公開・実行・共有の前に内容と参照先を確認してください。