HTMLエスケープのガイド｜記号をそのまま表示できない理由と変換表
記事の中にプログラムのコード例や不等号を書いたら、その部分だけ表示されなくなった。「A & B」と書いたつもりが記号が変わって見える。こうした崩れの原因は、HTMLでは一部の記号が「表示する文字」ではなく「命令の一部」として扱われることにあります。このガイドでは、エスケープ（別の書き方に置き換えること）が必要な理由、変換表、間違えやすい場面を具体例で解説します。
なぜ記号をそのまま書けないのか
HTMLは、<p> のようなタグで文章の構造を表す仕組みです。ブラウザは「<」から「>」までをタグとして読み取るため、本文に「3 < 5」という不等号をそのまま書くと、ブラウザは「< 5 …」をタグの始まりと誤解し、正しく閉じられるまでの文章を表示しなかったり、意図しない解釈をしたりします。
そこで、文字として表示したい記号は、ブラウザに「これは命令ではなく文字です」と伝える別の書き方に置き換えます。この置き換えをエスケープと呼び、代表的なものは次の5つです。
基本の変換表（5文字）
| 元の文字 | エスケープ後の書き方 | 読み方・用途 |
|---|---|---|
< | < | 小なり記号。タグと誤解されるのを防ぐ |
> | > | 大なり記号。対で変換するのが基本 |
& | & | アンパサンド自身。エスケープ表現の開始記号なので最初に変換する |
" | " | ダブルクォート。属性値の中で特に重要 |
' | ' | シングルクォート。属性値やスクリプト周辺で使う |
たとえば「3 < 5 かつ 6 > 2」と表示したい場合は、HTMLには 3 < 5 かつ 6 > 2 と書きます。ブラウザはこれを解釈して、画面上には元の不等号として表示します。
属性値の中では引用符が主役になる
エスケープが必要なのは本文だけではありません。リンク先やタイトルなどの属性値は引用符で囲んで書くため、その中身に同じ引用符が入ると、そこで値が終わったと誤解されます。
悪い例: <a title="彼は"了解"と言った">リンク</a> 良い例: <a title="彼は"了解"と言った">リンク</a>
また、URLの中の & も注意点です。パラメータを区切る & は、HTMLの中に書くときは & と書くのが正しい約束事です。ブラウザの多くはそのままでも解釈してくれますが、検証ツールではエラーとして指摘されますし、パラメータ名と重なると誤解釈の原因にもなります。
二重エスケープ――やりすぎも失敗になる
エスケープ済みの文章を、もう一度エスケープしてしまう失敗もよくあります。< を再び変換すると &lt; になり、画面には「<」ではなく「<」という文字列そのものが表示されてしまいます。
これは、CMSや投稿フォームが自動でエスケープしてくれる場面で、自分でも変換してしまったときに起こります。対策は「その入力欄が自動変換するかどうか」を先に知ることです。プレーンテキストとして入力する欄は自動変換される前提でそのまま書き、HTMLを直接書く欄では自分で変換する、と場面ごとに決めておくと混ざりません。変換する順番にも注意が必要で、& を最初に変換しないと、変換済みの表現まで再変換されてしまいます。
エスケープを解除（アンエスケープ）するときの注意
受け取ったデータに < のような表現が含まれている場合、もとの文字に戻す処理がアンエスケープです。ここで気をつけたいのは、戻した文字列をそのままHTMLとして表示すると、タグとして実行されてしまう点です。特に他人が入力した文章を扱う場合、エスケープされていないタグやスクリプトが混ざっていると、意図しない動作やセキュリティ上の問題（クロスサイトスクリプティングと呼ばれる攻撃）につながります。表示する直前のエスケープは、見た目のためだけでなく安全のための処理でもある、と覚えておいてください。
また、エスケープは文字コードの変換とは別物です。文字化けしている文章をエスケープしても文字化けは直りません。「記号が崩れる問題」と「文字そのものが読めない問題」は原因が違うので、切り分けて対処してください。
よくある質問
Q. スペースや日本語もエスケープが必要ですか？
A. 通常の日本語や半角スペースにエスケープは不要です。対象は主に上表の5文字です。ただし、連続スペースをそのまま表示したい場合は別の書き方（ ）が使われることがあります。
Q. Markdownで書くときも必要ですか？
A. Markdownは多くの場合、変換時に一定のエスケープを自動で行います。ただし生のHTMLを混ぜて書いた部分や、コードブロックの外に書いた不等号は崩れることがあるため、表示結果をプレビューで確認する習慣が安全です。コードを示したい場合はコードブロックやインラインコードで囲むのが基本です。
Q. 数値文字参照（< など）との違いは何ですか？
A. < は文字番号で表す書き方で、< と同じ「<」を表します。結果は同じですが、読みやすさの点では名前付きの表現がよく使われます。どちらかに統一しておくと、後から読む人が混乱しません。
まとめ
HTMLエスケープは、「ブラウザへの命令」と「表示したい文字」を区別するための約束事です。基本は5文字の変換、属性値では引用符、URLでは & に注意し、自動変換の有無を確認して二重エスケープを避けること。そして表示直前のエスケープは安全対策でもあります。記号まわりの表示崩れに遭遇したら、まずこの5文字が関係していないかを確認してください。