HTMLを読みやすいMarkdownに変換する方法

HTMLの何がMarkdownになるのか

HTMLの中でも、文書の意味を表す要素にはMarkdownの対応があります。h1〜h6は見出し、strongとemは強調、aはリンク、ulとolはリスト、blockquoteは引用、preとcodeはコードへ変換できます。

一方、レイアウトのためだけに使われるdivやspanは、通常タグを外して中の文字を残します。目的は古いサイトのデザインを再現することではなく、別の場所で再利用できる本文へ戻すことです。

• h1〜h6 → Markdownの見出し
• strong・em → 太字・斜体
• a href → Markdownリンク
• ul・ol・li → 箇条書き・番号付きリスト
• blockquote → 引用
• pre・code → コードブロック・インラインコード
• 単純なtable → Markdown表

<h2>更新情報</h2>
<p><a href="/guide">ガイド</a>を確認してください。</p>
<ul><li>出力を改善</li><li>表を修正</li></ul>

## 更新情報

[ガイド](/guide)を確認してください。

- 出力を改善
- 表を修正

HTMLソースを使って変換する

画面上の文字だけをコピーすると、リンク先、見出しレベル、リスト階層、画像URLなどが失われます。CMSのソース表示やエクスポートから、対象記事のHTMLを用意します。

1. 記事本文を選ぶヘッダー、ナビゲーション、フッターを避け、本文コンテナのHTMLを用意します。
2. Markdownへ変換HTMLを貼り付け、生成された見出し、リンク、表、コードを確認します。
3. 不要な要素を削除関連記事、広告枠、共有ボタン、重複したパンくずなどを取り除きます。
4. 保存前にプレビューMarkdownソースを直し、レンダリングした記事として読み直します。

CMS移行ではURLと画像を見直す

古いサイト内で使えた/aboutのような相対URLは、新しいドメインやリポジトリでは別の場所を指す可能性があります。移行先のURL設計に合わせて、内部リンクを更新します。リンク文字が「こちら」だけなら、移行を機に内容が分かる表現へ直します。

画像も同様です。旧CMSの相対パスや期限付きCDN URLは、移行後に表示できなくなることがあります。元画像の保管場所、利用権、代替テキストを確認し、新しい公開先へ移してからパスを書き換えます。

Markdownで表せないHTML

MarkdownはHTMLよりレイアウト機能が少なく、複数列、タブ、アコーディオン、フォーム、埋め込みウィジェット、複雑な表に共通記法がありません。変換では読める内容を優先し、表現できない操作や配置を簡略化します。

単純な行列の表はMarkdown表にできますが、rowspanやcolspanを含む結合セルは同じ構造にできません。無理にセルを複製するより、安全にしたHTMLを残すか、見出しとリストへ書き直す方が正確です。

変換結果を記事として校正する

構文として正しいMarkdownでも、記事として読みやすいとは限りません。見出しが内容を表しているか、同じナビゲーション名が繰り返されていないか、リンク文字だけで行き先が分かるかを確認します。

最初から最後までレンダリング結果を読み、読者に不要な要素を削る工程が、単なるタグ除去と保守しやすいコンテンツ移行の違いです。

• H1が記事内に1つだけあるか
• 見出しレベルが順序どおりか
• リンク文字が行き先を説明しているか
• 表やコードが公開先で対応しているか
• 画像の代替テキストが内容を説明しているか
• フッターや広告文が混ざっていないか

変換後に使える関連ツール

Markdownへ整理した後は、エディターで本文を修正し、必要な形式へ出力できます。

関連ツール