HTMLエンティティを検索・変換して文字化けを防ぐ方法

このガイドが役立つ場面

HTMLエンティティ一覧、特殊文字の文字参照、&や<の意味、10進・16進参照への変換、HTMLエスケープと逆変換を調べたい利用者向けです。

• HTML本文へコード例や比較記号を表示する
• CMSやメールから取得した&などの参照を読み解く
• コピーライト、通貨、矢印、数学記号の文字参照を調べる
• テンプレート出力の二重エスケープを切り分ける

HTMLエンティティが必要になる場面

• 本文に<、>、&などHTML構文と衝突する文字を表示するとき
• 属性値へ引用符や記号を安全に記述するとき
• メールやCMSからコピーした文字参照を元の文字へ戻すとき
• 文字、名前付き参照、Unicodeコードポイントの対応を調べるとき

検索・変換・確認の手順

1. 一覧で文字、エンティティ名、Unicode、カテゴリを検索します。
2. 対象行を開き、実体文字、名前付き参照、10進・16進参照を比較します。
3. 複数文字を扱う場合は変換欄へ入力し、対象範囲と出力形式を選びます。
4. 変換または逆変換を実行し、意図しない二重変換がないか確認します。
5. 結果をコピーし、実際のHTML文脈で表示とアクセシビリティを確認します。

エスケープとセキュリティの注意

HTML本文、属性値、URL、JavaScript、CSSでは必要なエスケープ方法が異なります。HTMLエンティティへの変換だけで、すべての文脈に対するXSS対策になるわけではありません。

外部入力を表示するときは、文字列連結やinnerHTMLではなくtextContentなど安全なAPIを優先し、利用するフレームワークの標準エスケープを無効化しないでください。

具体例：コード例の<と&をHTML本文へ表示する

HTML本文にタグの例をそのまま書くと、ブラウザがマークアップとして解釈します。表示したい<、>、&を文字参照へ変換する必要があります。

ただしコード全体を繰り返し変換すると&amp;lt;のような二重エスケープになるため、変換前の状態を確認します。

1. 表示したいコード例を変換欄へ貼り付けます。
2. HTML構文と衝突する文字を対象にして名前付き参照へ変換します。
3. 結果をHTMLのcode要素内へ配置します。
4. ブラウザ表示とページソースを確認し、二重変換がないことを確かめます。

コードブロックへ外部入力を表示する場合も、信頼できないHTMLをそのままinnerHTMLへ渡さないでください。

よくある質問

&amp;と&#38;と&#x26;は同じ文字ですか？

はい。いずれもアンパサンドを表します。読みやすさでは名前付き参照、機械生成では数値参照が使われることがあります。

すべての日本語を文字参照へ変換する必要がありますか？

通常は不要です。UTF-8を指定し、HTML構文と衝突する文字や利用先で必要な文字だけを変換してください。