HTMLをMarkdownに変換する｜対応要素・崩れやすいケース・手作業との使い分け

Webページの中身はHTMLで書かれていますが、ブログ記事やドキュメント、READMEなどではMarkdownのほうが扱いやすい場面が多くあります。既存のWebコンテンツを別のCMSに移したい、HTMLのお知らせ文をそのまま記事として再利用したい——そんなときに役立つのが「HTMLからMarkdownへの変換」です。本記事では、変換する理由から対応できる要素、崩れやすいケース、手作業との使い分けまでを順に解説します。

なぜHTMLをMarkdownに変換するのか

HTMLはタグで構造を細かく指定できる反面、記述が冗長になりがちで、人が直接読み書きするには向きません。一方のMarkdownは、記号を少し添えるだけで見出しやリスト、強調などを表現でき、プレーンテキストとしても読みやすい軽量マークアップ言語です。GitHub、各種ブログサービス、ドキュメントツールの多くがMarkdownを標準でサポートしているため、コンテンツの「持ち運びやすさ」が大きく向上します。

HTMLをMarkdownに変換したくなる代表的な場面は、次のとおりです。

• CMS移行：古いサイトやWordPressのHTMLを、Markdownベースの静的サイトジェネレーターやヘッドレスCMSへ移すとき。
• 記事化・再利用：HTMLメールやお知らせページの本文を、ブログ記事やナレッジベースの下書きとして使い回すとき。
• バージョン管理：差分が見やすいMarkdownでGit管理し、複数人で原稿をレビューしたいとき。
• AI・LLMへの入力：余分なタグを削ぎ落として、本文だけを生成AIに読み込ませたいとき。

実際にどんな結果になるかは、HTMLをMarkdownに変換で手元のHTMLを貼り付けて試すのが分かりやすいでしょう。タグだらけの文字列が、すっきりしたMarkdownへ整理される様子を体感できます。

変換できる主な要素：見出し・リンク・リスト・表・コード・画像

HTMLとMarkdownには対応関係のはっきりした要素が多く、基本的な文書構造はそのまま変換できます。代表的な対応を表にまとめます。

とくに見出し・リンク・リスト・強調・コードは対応がきれいで、変換後もほぼ意図どおりに仕上がります。表（table）はGitHub Flavored Markdownなどの拡張記法でパイプ「|」を使って表現でき、シンプルな表であれば問題なく変換できます。画像も代替テキスト（alt属性）とURLが保持されるため、そのまま再利用しやすい要素です。

変換後のMarkdownを実際に書き直したりプレビューしながら整えたい場合は、Markdownエディタに貼り付けて、表示を確認しながら微調整するのがおすすめです。

変換できない・崩れやすいケース

多くの要素はきれいに変換できますが、Markdownが表現できる範囲はHTMLより狭いため、どうしても崩れたり情報が落ちたりするケースがあります。あらかじめ知っておくと、変換後のチェックがぐっと楽になります。

• 複雑な表：セルの結合（colspan / rowspan）や、セル内に箇条書き・改行を含む表は、Markdownの表記法では表現しきれず崩れがちです。
• 装飾・レイアウト：色・フォントサイズ・中央寄せなどのスタイルはMarkdownに対応する記法がなく、基本的に失われます。divやspanによる細かなレイアウトも同様です。
• ネストが深い構造：リストの中に表、表の中にリストといった入れ子は、変換ツールによって結果がばらつきやすい部分です。
• インラインHTMLの残存：Markdownで表せない要素は、変換結果にHTMLタグがそのまま残ることがあります（多くのMarkdownはHTML混在を許容するため）。
• フォームやスクリプト：input・button・script・iframeなどはMarkdownに概念が存在せず、削除されるか素のHTMLとして残ります。

つまり、「文章＋基本的な構造」は得意、「見た目の作り込みや特殊なレイアウト」は苦手と覚えておくとよいでしょう。装飾が多いページほど、変換後に手直しが必要になります。

自動変換と手作業の使い分け

HTMLからMarkdownへの変換は、自動変換で大枠を作り、手作業で仕上げるのが現実的で効率の良い進め方です。すべてを手で書き直すのは時間がかかりすぎますし、逆に自動変換だけで完璧を期待すると、崩れたまま公開してしまう危険があります。

具体的には、まずHTMLをMarkdownに変換でベースとなるMarkdownを生成し、残ったインラインHTMLや崩れた表を確認します。そのうえで、細かな調整やプレビューでの見え方の確認はMarkdownエディタで行う、という二段構えにすると、品質とスピードを両立できます。表が複雑すぎる場合は、無理にMarkdownの表へ落とし込まず、あえてHTMLの表タグを残す判断も有効です。

変換の進め方と確認ポイント

最後に、HTMLをMarkdownへ変換する際の基本的な流れと、見落としやすい確認ポイントを整理します。

• 1. 変換する：対象のHTMLを用意し、変換ツールに貼り付けてMarkdownを生成します。本文だけでなく、不要なヘッダー・フッターやナビゲーションが混ざっていないかも確認します。
• 2. リンクと画像を確認：相対パスのリンクや画像URLが、移行先でも正しく開けるかをチェックします。必要に応じて絶対URLへ書き換えます。
• 3. 表とコードを点検：表のセル結合が崩れていないか、コードブロックの言語指定や記号がずれていないかを見ます。
• 4. プレビューで最終確認：実際の表示で見出しレベルやリストのネストが意図どおりかを確かめ、残ったHTMLタグを整えます。

HTMLをMarkdownに変換すれば、コンテンツは軽く、移植しやすく、差分の追いやすい形になります。まずはHTMLをMarkdownに変換で手元のHTMLを試し、結果をMarkdownエディタで確認しながら整えてみてください。仕組みと得意・不得意を押さえておけば、変換作業はぐっと安心して進められます。

なお本記事は一般的な情報の提供を目的としたものです。Markdownの記法は環境（GitHub、各種CMS、エディタ）によって対応範囲が異なる場合があります。実際の移行にあたっては、利用するサービスの最新の公式ドキュメントを確認したうえで判断してください。