HTMLエンティティ変換の使い方｜特殊文字のエスケープとデコードをブラウザ内で完結
公開日：2026年7月22日 更新日：2026年8月30日 運営：シルギア（Analyzegear, Inc.） 対象ツール：HTMLエンティティ変換
HTMLの文書は、タグと本文が同じテキストの中に混在しています。だからこそ「ここからがタグ」「ここが属性の区切り」をブラウザに伝えるための特別な文字がいくつか決められています。その特別な文字を、タグではなくただの文字として見せたいときに使うのが、HTMLエンティティ（実体参照）への変換、いわゆるエスケープです。このツールは、エスケープとその逆のデコード（復元）を、すべてブラウザ内だけで完結して行えます。
HTMLエンティティとは何か
HTMLエンティティは、記号などの文字を「& で始まり ; で終わる短い符号」に置き換えた表記です。よく使う基本の文字は次のように対応します。
- < … <（小なり。タグの開始記号）
- > … >（大なり。タグの終了記号）
- & … &（アンパサンド。エンティティ自身の開始記号）
- " … "（二重引用符。属性値の囲みに使う）
- ' … アポストロフィ（本ツールは名前付きの ' ではなく、より互換性の高い数値参照 ' を出力します）
いずれも「記号を、意味を持たない文字として安全に扱う」ための書き換えです。
なぜエスケープが必要なのか
理由は大きく二つあります。ひとつは表示崩れを防ぐことです。たとえば本文に太字タグそのものを文字として載せたいのに、<b> とそのまま書くと、ブラウザはそれをタグと解釈し、以降を太字にしてしまいます。文字として見せたいだけなら、< を < に、> を > に置き換えておく必要があります。
もうひとつはセキュリティ（XSS対策）です。利用者が入力した文字列を、エスケープせずそのままページに埋め込むと、<script> などのタグが本物のスクリプトとして実行されてしまう恐れがあります。表示する前に &・<・>・" をエスケープしておけば、それらは実行されずただの文字として表示され、こうした攻撃を防げます。第三者の入力を扱う場面ほど、この処理は欠かせません。
名前付き参照と数値文字参照
エンティティには二通りの書き方があります。用途に応じて使い分けます。
- 名前付き参照：& や © のように、覚えやすい名前を使う書き方です。読みやすい反面、使える名前はHTMLの仕様で決められたものに限られます。
- 数値文字参照：文字のコードポイント（文字ごとに割り振られた番号）を直接書く方式です。10進なら '、16進なら ' のように書き、どちらもU+0027のアポストロフィ「'」を指します。名前が用意されていない文字でも、番号さえ分かれば必ず表現できます。
10進と16進は書き方が違うだけで結果は同じです。たとえば小なり記号 < はコードポイント60番なので、<・<・< のどれで書いても、デコードすると同じ < に戻ります（60を16進で表すと3Cになります）。
このツールの変換ルールと具体例
エンコードでは、&・<・>・"・' の5文字を置き換えます。ここで大切なのが、& を必ず最初に処理することです。先に < を < に変換してしまうと、その中に生まれた & を後からもう一度エスケープし、&lt; のように二重エスケープする事故が起きます。& を最優先で処理すれば、これを確実に防げます。
実際の入力と結果を見てみましょう。
- 入力：<a href="x">Tom & Jerry</a>
- 結果：<a href="x">Tom & Jerry</a>
このように元のHTMLソースを丸ごと文字として見せられるので、記事でコード例を掲載するときに欠かせません。「非ASCII文字もすべて数値参照にする」オプションを有効にすると、日本語や絵文字も16進の数値参照に変換されます。たとえば「あ」は あ になります。文字コードが不安定な環境へ貼り付けるときの文字化け対策に使えますが、通常のHTML表示ではオフのままで構いません。
デコードの仕組みと安全設計
デコードは、名前付き参照と数値参照（10進・16進の両方）を元の文字へ戻します。© を © に、© や © を同じ © に復元する、といった具合です（169を16進で表すとA9になります）。対応表に無い名前や壊れた記述はそのまま残すので、意図せず内容が消える心配はありません。
安全面の工夫もあります。デコードは、ブラウザのDOM（要素の innerHTML に代入して読み戻す手法）をあえて使わず、対応表と正規表現による文字列置換だけで行っています。innerHTML を経由すると入力中の <script> などが実行される恐れがありますが、機械的に置換するだけなら任意のHTMLが動くことはありません。もちろん入力はすべてブラウザ内で処理され、サーバーへは送信されません。
使い方と押さえておきたい注意点
- 「エンコード（エスケープ）」か「デコード（復元）」を選びます。
- 上のテキスト欄に変換したい文字列を入力・貼り付けします。結果は自動で下の欄に表示されます。
- エンコードで日本語なども数値参照にしたいときは、チェックボックスをオンにします。
- 「結果をコピー」でクリップボードに控えます。
画面下部の早見表では、代表的なエンティティの「名前付き・10進・16進」を並べて確認でき、行をクリックすればその参照をコピーできます。最後に、ここでのエスケープはHTML本文・属性向けの基本処理である点に注意してください。URL・JavaScript・CSSといった別の文脈では、それぞれに応じた別のエスケープが必要です。セキュリティが重要な箇所では、出力先の文脈に合わせた処理を必ず併用してください。