CreaTools LogoCreaTools
Tech Notes
HTML Entities

HTML特殊文字エスケープツールの使い方｜<・>・& を安全に表示

2026-02-04

まず、ここに貼ってください

「< を表示したいのにタグとして解釈される」「サーバから返ってきた &lt; を本来の < に戻したい」「日本語が &#12354; の連続で来た」。考える前に HTML特殊文字エスケープツール に貼ってください。

エスケープ・アンエスケープ両方向に対応。名前付き（&amp;）・10進数値参照（&#38;）・16進数値参照（&#x26;）の全形式をデコードできます。

即断テーブル

困っていること操作
HTMLにそのまま埋めたい「エスケープ」モード
エスケープ済みを元に戻す「アンエスケープ」モード
日本語を非ASCIIエスケープ対象を「非ASCII全て」に
16進数値参照で書きたい形式を「16進数」に
入出力を入れ替えたい「入れ替え」ボタン

このツールで解決できる4つの問題

1. 「< をHTMLに書きたいのにタグになる」

<p>If x < 5 then ...</p>

これは < の後に 5 が来ていてタグとして解釈不能、ブラウザによっては表示が崩れます。

→ 「エスケープ」モード → 入力に貼り付け

<p>If x &lt; 5 then ...</p>

ブラウザは &lt; を「<」として描画しますが、HTMLとしてはタグでないため安全です。

2. 「APIが &amp;quot; を返してくる」

{"message": "He said &amp;quot;hello&amp;quot;"}

これは2重エスケープ（HTMLエスケープが2回かかった状態）。

→ 「アンエスケープ」モード → 1回貼り付けて変換 → さらにアンエスケープ

1回目で He said &quot;hello&quot;、2回目で He said "hello" に戻ります。

3. 「日本語を全部数値参照にしたい」

レガシーシステムや古いメールクライアントが日本語を扱えない場合に使う技。

→ 「エスケープ」モード → 対象「非ASCII全て」 → 形式「10進数」

こんにちは → &#12371;&#12435;&#12395;&#12385;&#12399;

ASCII文字はそのまま、日本語のみ数値エンティティ化されます。

4. 「&#x1F600; のような絵文字エンティティを文字に戻したい」

→ 「アンエスケープ」モード → 入力に貼り付け

サロゲートペア対応の String.fromCodePoint を内部で使うため、&#x1F600; → 😀 に戻ります。

エスケープモードのオプション

対象（エスケープ範囲）

選択肢エスケープ対象使う場面
最小限< > & " ' のみ通常のHTML埋め込み
非ASCII全て + 最小限上記＋ 0x80以上の文字古いシステム連携
全文字ASCII含む全文字を数値参照極端なケース、難読化

99%は「最小限」で足ります。日本語をそのまま <p>こんにちは</p> と書いても、UTF-8として正しく送信できれば問題なく表示されます。

形式

選択肢出力例
名前付き優先名前があれば &name;、なければ数値参照&amp;、&#12354;
10進数すべて10進数値参照&#38;、&#12354;
16進数すべて16進数値参照&#x26;、&#x3042;

「名前付き優先」が最も読みやすく、サイズも小さくなります。

アンエスケープの対応範囲

形式例対応
名前付き&amp;、&copy;、&hellip;◎
10進数値参照&#38;、&#12354;◎
16進数値参照&#x26;、&#x3042;◎
数値参照（範囲外）&#0;、&#999999999;元の文字列のまま保持
不正な参照&abc;元の文字列のまま保持（エラーにしない）

「サロゲート領域」（U+D800〜U+DFFF）は単独では不正なため、本ツールでは元の文字列を保持します（壊れた状態で出力しない）。

ボタンと操作

サンプル

ボタンを押すとモードに応じたサンプルが入力されます。

  • エスケープ用: <div class="container">こんにちは & "World" 'Hello'</div>
  • アンエスケープ用: 上記のエスケープ済み文字列

入れ替え

「出力を次の入力にして、モードも反転」する便利機能。エスケープ→アンエスケープを連続で確認できます。

なぜ &apos; ではなく &#39; を使うのか

シングルクォート ' のエスケープに、本ツールは &#39;（10進数値参照）を使用します。

理由:

  • &apos; は HTML4 では標準ではない
  • 古いブラウザやXMLパーサーで未対応のことがある
  • &#39; は全ブラウザで安全に動作

XHTML / XMLでは &apos; も標準ですが、HTMLでは数値参照が推奨されます。

エスケープ漏れによるXSSリスク

ユーザ入力をそのままHTMLに埋めると XSS（Cross-Site Scripting） の温床になります:

<!-- ユーザが入力した name = "<script>alert(1)</script>" -->
<p>こんにちは、<script>alert(1)</script>さん</p>

これを防ぐには、動的に埋め込む全てのテキストでHTMLエスケープが必須です。Reactなどモダンフレームワークは自動でエスケープしますが、dangerouslySetInnerHTML や v-html を使う場合は自分で対応が必要。

本ツールは事前準備や検証用に使え、本番のサニタイズはサーバ側で行うのが基本です。

関連記事

記事読むタイミング
HTML特殊文字とXSS対策の関係XSSの仕組みを理解したい
名前付き・10進・16進、どう使い分けるか形式選びで迷ったとき
Unicode文字とエンティティ参照絵文字や記号の扱いに困ったとき