Word や Google ドキュメント、Web ページからコピーした文章をエディタに貼り付けたら、<span style="..."> や class="c3"、<o:p> といったタグだらけになった経験はないでしょうか。文章自体は入っているのに、Markdown のレンダラーには不要な装飾用マークアップに埋もれてしまっている状態です。この記事では、その汚れた HTML を一手間でクリーンな Markdown に変換する方法を紹介します。
まず結論から
汚れた HTML を HTML to Markdown に貼り付けて実行ボタンを押すだけです。span、inline の style 属性、class 名、<font> タグ、Word 由来のマークアップは Markdown に対応する書き方がないため取り除かれ、見出し・リスト・リンク・表といった構造だけが Markdown として残ります。処理はブラウザ内で完結するので、社外秘の資料を貼り付けても外部に送信されることはありません。
HTML クリーナーとの違い
「inline style を除去する」系のツールや HTML クリーナーが返すのは、あくまで clean HTML です。装飾は落ちますが、<p> や <ul> といったタグは残ったままになります。貼り付け先が README、GitHub の Issue、Wiki、あるいは LLM へのプロンプトであれば、欲しいのは Markdown なので、もう一歩足りません。
変換ツールはこの 2 つを同時に行います。装飾ノイズを取り除いたうえで、#・-・[テキスト](url) といった Markdown 構文を出力します。HTML をきれいにしてから変換する、という二度手間が不要です。
なぜ貼り付けた HTML は汚れるのか
汚れ方はコピー元によって変わります。出どころごとに混入するノイズの種類が違います。
Microsoft Word
Word はコピーしたテキストを Office 独自のマークアップで包みます。style 属性内の mso-* プロパティ、段落を示す <o:p> タグ、条件付きコメント（<!--[if gte mso 9]>）、<font face="..."> タグなどです。いずれも読者にとって意味を持たない情報です。
なお、混入するマークアップはコピー経路によって変わります。Word のデスクトップアプリから直接貼り付ける、Outlook を経由する、ブラウザで開いた Word ファイルからコピーする、それぞれで出力されるタグの量や種類が異なり、軽いこともあれば重いこともあります。
Google ドキュメント
Google ドキュメントはセマンティックなタグよりも inline CSS に寄った出力をします。太字が <strong> ではなく <span style="font-weight:700"> になっていたり、自動生成された class 名や、文字のひとかたまりごとを包む空の「ゴースト span」が大量に挿入されたりします。class 名は自動生成のため、特定の名前が必ず付くと当てにはできません。
Web ページのコピー
表示中の Web ページの一部を選択してコピーすると、そのサイトがレイアウトに使っていたものを丸ごと持ち込みます。ラッパーの <div>、ユーティリティ用の class 属性、inline の style、ときには欲しかった本文の隣にあったナビゲーションのリンクやシェアボタン、広告枠まで付いてきます。Markdown に変換すればレイアウト層は捨てられ、読みやすい構造だけが残ります。
同じ Web ページのコピーでも、サイトの作りによって混ざるものが変わります。WordPress のブログ記事は本文の前後に著者情報・カテゴリー・関連記事のリンクが並び、テーマが付けた wp-block- 系の class が本文中の段落にも乗ります。ドキュメンテーションサイトは見出しの横にアンカー用のリンクとコードブロックのコピーボタンが入り、選択範囲に含めるとそのまま文字として残ります。ニュースサイトは本文の途中に関連記事の差し込みとシェアボタンが入るので、段落の切れ目に見出しでも本文でもない短い行が挟まります。どれも変換そのものは通りますが、出力から消す対象が変わります。
ChatGPT やリッチテキストエディタ
チャット UI や WYSIWYG エディタから整形済みの回答をコピーすると、エディタ固有の span や data-* 属性を含んだ HTML になることがあります。それを別のツールに貼ると汚れが引き継がれますが、Markdown に変換すれば中身だけが残ります。
よく聞かれるのは <div style="..."> のようなラッパーがそのまま残るのかという点です。後述の何が削除され、何が残るのかの表のとおり、ラッパーのコンテナは中身のテキストだけを残して消え、inline style と data-* 属性も落ちます。色や枠線や余白は引き継がれず、Markdown になるのは見出し・太字・リンク・リストという構造だけです。見た目まで保ちたいなら、Markdown へ変換せず HTML のまま扱う必要があります。
PDF ビューアからのコピー
PDF ビューアで選択してコピーした文章は、そもそも HTML になりません。span も style も class も付かないプレーンテキストなので、この記事が扱う「装飾ノイズを除去する」処理自体が成立しない唯一のコピー元です。
PDF は文字を座標の集まりとして持つだけで、見出しと本文を区別する情報がなく、段落の途中で改行が入ったり 2 段組が左右混ざって出たりします。特に表は列がずれて出やすく、PDF の表が Markdown 変換で崩れる理由と直し方 で実測しています。貼り付けたテキストを直すより、PDF ファイルを直接 PDF to Markdown に通すほうが確実です。
何が削除され、何が残るのか
代表的な汚れたマークアップと、変換後にどうなるかを表にまとめます。
| 元のマークアップ | 例 | Markdown での結果 |
|---|---|---|
| inline style | <span style="color:#333">text</span> | text（style は削除） |
| class 名 | <p class="c3 c7">text</p> | text（class は削除） |
| Word の Office マークアップ | <o:p></o:p>、mso-* style | 完全に削除 |
| font タグ | <font face="Calibri">text</font> | text |
| ラッパーのコンテナ | <div><span>text</span></div> | text |
| 空 / ゴースト span | <span></span> | 削除 |
| data 属性 | <p data-id="9">text</p> | text |
| 見出し | <h2>Title</h2> | ## Title |
| 太字（意味的 / style 指定） | <strong>x</strong> または <span style="font-weight:700">x</span> | **x** |
| リンク | <a href="/p" class="btn">go</a> | [go](/p) |
| リスト | <ul><li>a</li></ul> | - a |
ここで 2 点おさえておきたいことがあります。
- Markdown は HTML よりも表現できる範囲が狭い言語です。構造としての対応物がある要素（見出し・リスト・リンク・強調・表・画像）は保持され、純粋に装飾目的のものは落とされます。
- 「Markdown に変換する」ことは「HTML がゼロになる」ことを保証しません。Markdown の仕様は inline HTML を許容しているため、変換ツールはうまく対応付けられないタグ（複雑な表や未対応の要素など）を、中身を捨てる代わりに生の HTML 片として残すことがあります。結果は十分にクリーンですが、あらゆる場面で
<span>が必ず消えるという約束ではありません。
FormatArc で汚れた HTML を変換する
HTML to Markdown は、貼り付けた HTML から Markdown を生成します。インストール不要で、何もアップロードされません。
- HTML to Markdown を開きます。
- 左側に汚れた HTML を貼り付けます。Word のゴミやゴースト span ごとそのままで構いません。
- 実行ボタンを押すと、右側にクリーンな Markdown が表示されます。
貼り付け前後の確認例
たとえば <h2>手順</h2><p class="c3"><span style="color:red">設定を確認</span></p><ul><li><a href="/help">ヘルプ</a></li></ul> を入力した場合、期待する出力は ## 手順、設定を確認、- [ヘルプ](/help) です。見出し・本文・リンク先・リストの順序が残り、class と style が消えているかを確認します。コピー元にメニューまで含めた場合は本文と区別できないため、変換後に選択範囲を見直してください。
※ この例は現行ツールで実行し、出力が一致した形で確定しています。
HTML の解析も Markdown の生成もブラウザ内で動くため、Word から貼り付けた社外秘の契約書や CMS の未公開ドラフトも手元に留まります。FormatArc や第三者に送信されることはありません（その仕組みについては オンライン変換は安全か で詳しく解説しています）。
きれいに変換できないとき
いくつかのパターンは、もう一手間が必要です。
Word の表と罫線
Word やスプレッドシートから貼り付けた表は、colspan や rowspan、罫線のスタイルを含むことが多く、これらはパイプ表に対応する書き方がありません。結合セルは平坦化され、表そのものが inline HTML のまま残ることもあります。表だけを変換したい場合は HTML テーブルを Markdown に変換 でエッジケースを扱っています。
ネストしたリストと改行
深くネストしたリスト、リスト項目内の <br>、順序付き・順序なしが混在したネストは、余分な空行が入ったりインデントが平坦化されたりすることがあります。出力を確認し、レンダラーで崩れる場合はインデントを手で直してください。
出力に残った inline HTML
<sub> や複雑な表、<details> ブロックなど一部の HTML が残った場合、それは仕様どおりの挙動です。変換ツールが中身を捨てずに残しているためです。Markdown は GitHub や多くの静的サイトジェネレータで inline HTML をそのままレンダリングするので、残したままでもよいですし、手で削除しても構いません。混在した Markdown がどう表示されるか確認したいときは Markdown to HTML に貼り付けてプレビューできます。
Web コピーで混ざるナビゲーション
1 ページの記事をそのままコピーして、本文の前後にメニューやシェアボタン、関連記事のリンクが混ざった場合は、コピー前に範囲を狭めるか、Markdown 出力から余分なリンクの羅列を削除してください。どのリンクがナビゲーションでどれが本文かを自動で判別する方法はありません。出力の先頭と末尾に短いリンクが続いている箇所がだいたいそれにあたるので、最初の見出しより前と最後の段落より後をまとめて削るのが早道です。
この作業を何十記事も繰り返すことになるなら、1 ページずつのコピー貼り付けとは別の手順があります。WordPress 記事を Markdown に移行する方法 でエクスポートから一括変換までを扱っています。
よくある質問
なぜ span や style 属性は削除されるのですか
Markdown には inline CSS や class 名、ラッパーの span を表す構文がないため、変換ツールはそれらを落として構造的な内容だけを残します。これが目的です。エディタ固有のノイズを抱えた HTML ではなく、どのレンダラーでも読める移植性の高い Markdown が得られます。
Microsoft Word の mso- マークアップも除去されますか
はい。mso-* の style プロパティ、<o:p> タグ、<font> タグ、条件付きコメントは Markdown に対応物がないため除去されます。Word が出力するマークアップはコピー方法によって変わりますが、いずれも Markdown としては残りません。
class 名やスタイルを保持できますか
いいえ。Markdown では表現できないため、意図的に取り除かれます。スタイルが必要な場合は元の HTML を保存しておき、構造は Markdown に変換したうえで、表示時に Markdown to HTML で CSS を当て直してください。
社外秘の資料を貼り付けても安全ですか
安全です。変換は JavaScript でブラウザ内のみで動き、貼り付けた HTML が FormatArc や第三者のサーバーに送信されることはありません。ブラウザ完結型ツールの確認方法は オンライン変換は安全か で解説しています。
変換後の Markdown に HTML が残っているのはなぜですか
Markdown は inline HTML を許容するため、変換ツールは対応付けられない構造（複雑な表や未対応のタグ）を、中身を削除する代わりに生の HTML 片として残します。残したままでも、手で削除しても問題ありません。
まとめ
Word・Google ドキュメント・ChatGPT・Web ページから来た汚れた HTML は、HTML to Markdown に一度貼り付けるだけでクリーンな Markdown になります。span・inline style・class・Office マークアップは落ち、構造は残ります。HTML から Markdown への変換全般（CLI での方法も含む）については HTML を Markdown に変換するガイド を、LLM にクリーンな内容を渡したい場合は LLM のための Markdown と HTML 比較 を参照してください。