要約：Word、Google ドキュメント、またはブラウザからコピーしたテキストがきれいなHTMLとして届くことはめったにない——見えないインラインスタイル、空タグ、Microsoft独自のマークアップを持ち込む。これが、ページが問題なさそうに見えながらCMSに保存されるコンテンツを肥大化させ、スタイリングを壊す理由だ。このガイドはAI Hidden Characters、Text Difference、Character Counter、Encoding Converterと組み合わせて使ってください。

公開前にHTMLをクリーンにするとは、この隠されたマークアップを取り除き、段落、見出し、リンクといったシンプルな構造に戻すことを意味する。それが、貼り付けたとおりに正確にレンダリングするCMSに届く前に行う。

マークアップの肥大化が実際どこから来るのか

Microsoft Wordは内部的にフォーマットをHTMLに似たマークアップとして保存し、Wordからブラウザにコピーすると、余計なマークアップも一緒に付いてくる——条件付きコメント、mso-*のインラインスタイル、Wordの外では何も意味しないのにそのまま貼り付けられる名前空間付きタグなどだ。Google ドキュメントやリッチテキストエディタは、視覚的な結果がCMS自体のデフォルトスタイルと同一であっても、テキストのすべての範囲に独自のインラインstyle属性を追加する。

これがコードの乱雑さだけでなく、なぜ本当の問題を引き起こすのか

CMSは与えられたどんなHTMLもレンダリングする——貼り付けたコンテンツにインラインのfont-family: Calibriや固定のfont-sizeが含まれていると、その段落だけサイトの実際のタイポグラフィを上書きしてしまい、見た目が一貫しないページを作り出す。しかも素早い目視チェックではHTMLが問題なさそうに見えるため、診断が難しい。空タグ（<span></span>、入れ子になった<p><p></p></p>）は目に見える形でレンダリングされないが、それでも保存されインデックスされ、コンテンツ長のチェックやDOMを解析するアクセシビリティスキャナーを妨げることがある。

"クリーン"なHTMLが実際に意味するもの

クリーンなHTMLはセマンティックな構造——<p>、<h2>、<strong>、<a>——を保持し、ソース文書の正確な視覚的フォーマットを再現するためだけに存在するものすべてを捨てる。リンクのhrefは重要だが、スパンのインライン色は通常重要ではない。テキストの見た目を決めるべきなのは貼り付け元ではなく、CMS自体のスタイルシートであるべきだからだ。

貼り付けてからクリーンにするワークフロー

  1. ソースがWordや強くスタイル設定されたエディタである場合は、まずプレーンテキストとして中間ステップに貼り付ける——これだけでほとんどの独自マークアップが取り除かれる。
  2. CMSに"プレーンテキストとして貼り付け"や"Wordから貼り付け"のオプションがあれば、生の貼り付けの代わりにそれを使う。
  3. 読者が奇妙なフォーマットを報告した後ではなく、公開前に、結果に空タグやインラインstyle属性がないか確認する。
  4. 意味的に重要なフォーマットだけを再度加える——強調のための太字、リンク、見出し——サイト自体のCSSを複製する視覚的なスタイルではなく。

避けるべきよくある間違い

  • 中間のクリーンアップステップなしに、WordからCMSのリッチテキストエディタに直接貼り付けること。
  • ページが"問題なさそうに見える"ことがHTMLがクリーンであることを意味すると想定すること——マークアップを検査するか長さの上限に達するまで、肥大化は見えない。
  • HTMLソースコード内に根本的なインラインスタイルや空タグを残したまま、目に見えるフォーマットだけを手動で削除すること。
  • これを一回限りの修正として扱い、貼り付けの多いすべての公開ワークフローの中の一ステップとして扱わないこと。

クリーンなHTMLは、今日ページがどう見えるかということではない——後になって一貫しないスタイル、膨れ上がったページの重さ、あるいは静かに文字数上限に達したCMSフィールドとして表面化する、見えないマークアップという技術的負債を残さないということだ。