HTMLエスケープと実体参照の変換
【ご注意】このページの計算結果・情報は参考値です。正確性・最新性は保証できません。税務・法務・お金・設計・施工・安全などに関わる判断は、公式の資料と専門家の確認のうえ、ご自身の責任で行ってください。免責事項
HTMLで意味を持つ文字（& < > 引用符）を実体参照に変換し、逆に実体参照を元の文字に戻します。属性値まで含めた強めの変換、タグの除去、変換した箇所の内訳も表示します。
HTMLエスケープと実体参照の変換ツール
なぜエスケープが要るのか
HTML では < がタグの始まり、& が実体参照の始まりという特別な意味を持ちます。本文にそのまま書くと、ブラウザがタグや参照として解釈してしまい、表示が崩れたり、利用者が書いた内容がそのまま動いてしまったりします。そこで意味を持つ文字を、文字そのものを指す別の書き方に置き換えます。これがエスケープで、置き換え後の < のような書き方を実体参照と呼びます。
最低限必要なのは &（&）、<（<）、>（>）の3つです。属性値の中に入れる場合は、引用符で囲みが途切れないよう "（"）と '（'）も変換します。& を最初に変換するのが鉄則で、順序を誤ると < がさらに &lt; になる二重変換が起きます。
エスケープが必要な文字
| 文字 | 実体参照 | 数値参照 | 必要な場面 |
|---|---|---|---|
| & | & | & | 常に（最初に変換する） |
| < | < | < | 常に |
| > | > | > | 常に（推奨） |
| " | " | " | 属性値の中 |
| ' | ' | ' | 属性値の中（数値参照が無難） |
よく使う実体参照
| 文字 | 名前付き | 意味 |
|---|---|---|
| （空白） | | 折り返さない空白 |
| © | © | 著作権表示 |
| ® | ® | 登録商標 |
| … | … | 三点リーダ |
| — | — | ダッシュ |
| × | × | 掛ける記号 |
| ÷ | ÷ | 割る記号 |
| ¥ | ¥ | 円記号 |
エスケープと関連する対策の違い
| やること | 目的 | 注意 |
|---|---|---|
| HTMLエスケープ | 本文・属性値に安全に埋め込む | 出力する直前に行う |
| タグの除去 | 見た目を整える・要約を作る | 安全対策としては不十分 |
| 属性値の引用符で囲む | 値の途切れを防ぐ | エスケープと併用する |
| URLエンコード | URLに埋め込む | HTMLエスケープとは別物 |
| 許可リストによる検査 | 入力段階で不正を弾く | 出力時のエスケープは別途必要 |
※入力した文字列はお使いのブラウザの中だけで処理され、サーバーには送信されません。結果は参考です。業務システムへの適用にあたっては、実装側の仕様をご確認ください。
HTMLエスケープと実体参照の変換の詳しい解説
HTMLエスケープは、文字を「文字として表示させる」ための処置です。HTML では小なり記号がタグの開始、アンパサンドが実体参照の開始を意味するため、本文にそのまま書くとブラウザが命令として読んでしまいます。プログラムのソースコードを紹介する記事で山かっこが消えてしまう、という経験は多くの人にあるはずで、原因はこれです。エスケープすれば、ブラウザは「この文字を表示せよ」と理解します。
変換の順序には決まりがあります。アンパサンドを最初に変換することです。理由は簡単で、小なり記号を < に変換したあとでアンパサンドを & に変換すると、いま作ったばかりの < が &lt; になってしまい、画面には < という文字列がそのまま出てしまいます。これが二重エスケープで、Web でときどき見かける「&」という表示はこの事故の痕跡です。このツールはアンパサンドを先に処理しています。
どこまで変換するかは、埋め込む場所で決まります。本文の中なら3文字で足りますが、属性値の中に入れる場合は引用符も変換しなければなりません。value="..." の中にダブルクォートが入ると、そこで属性が終わったと解釈され、続く文字が新しい属性として読まれてしまいます。この隙間から不正なコードが混入する経路が生まれるため、属性値に入れる値は必ず引用符で囲み、かつ引用符自体をエスケープするのが基本です。
タグの除去はエスケープとは目的が違います。除去は見た目を整えたり要約を作ったりするための処理で、安全対策としては不十分です。正規表現で山かっこの間を消すやり方は、入れ子や壊れたタグ、属性に紛れ込んだ山かっこを正しく扱えず、抜け道が残ります。表示の安全を確保したいならエスケープを使い、除去は「本文だけを取り出したい」という表示上の都合に限って使うのが正しい使い分けです。
もうひとつ重要なのは、エスケープは出力する直前に行うという原則です。入力の時点で変換して保存してしまうと、データベースには実体参照が入った状態で残り、メールやCSVに出したときに < がそのまま見えてしまいます。保存するのは元の文字のまま、HTMLとして出す瞬間に変換する。この順番を守れば、同じデータをHTML・メール・CSVのどこにでも正しく出せます。逆変換の機能は、誤って実体参照のまま保存されてしまったデータを元に戻すときに使えます。
業界・現場での使い方
Webページへの安全な埋め込み
利用者が入力した文字列を本文や属性値に出すとき、出力の直前にエスケープします。
コードやタグを記事で紹介する
山かっこが消えないよう実体参照に直して掲載します。
誤って保存された実体参照の復旧
< のまま保存されたデータを元の文字に戻します。
本文の抜き出し
タグを除いて要約や検索用のテキストを作ります。
よくある間違い・注意点
- アンパサンドを最後に変換する — 二重エスケープになり &lt; と表示されます。必ず最初に変換します。
- 属性値で引用符をエスケープしない — 属性が途中で終わり、不正なコードの入口になります。
- タグの除去を安全対策と考える — 入れ子や壊れたタグで抜けます。表示の安全はエスケープで確保します。
- 入力時にエスケープして保存する — メールやCSVに出したときに実体参照が見えます。出力の直前に変換します。
- URLエンコードと混同する — 用途が別です。URLに埋めるならURLエンコード、HTMLに埋めるならエスケープです。
関連する規格・公的資料
- Unicode コンソーシアム — Unicode の規格と符号位置の定義
- W3C（World Wide Web Consortium） — HTML の文字参照と仕様
- WHATWG HTML Standard — 名前付き文字参照の一覧と解釈の規定
- WHATWG Encoding Standard — ブラウザが扱う文字エンコードの仕様
- IETF（RFC の発行元） — RFC 3629（UTF-8）などの規格
- ITU（国際電気通信連合） — 国際モールス符号の勧告 ITU-R M.1677
- 総務省 電波利用ホームページ — 無線従事者・和文モールスの制度
- 日本産業標準調査会（JISC） — JIS X 0201・JIS X 0208 など文字集合の規格
- 日本規格協会（JSA） — JIS 規格票の発行
- 情報処理推進機構（IPA） — 文字情報基盤と安全な実装の手引き
- MDN Web Docs — parseInt・codePointAt などの仕様解説
- IEEE — 浮動小数点や整数表現の標準
- WHATWG HTML Standard（名前付き文字参照） — 実体参照の一覧と解釈の規定
- IPA 安全なウェブサイトの作り方 — 出力時のエスケープに関する手引き
- W3C HTML の文字参照 — 数値参照と名前付き参照の仕様
※本ツールは公的基準に基づく参考計算です。医療・法務・税務の判断は最新の告示・規格および専門家の判断に従ってください。
よくある質問（FAQ）
どの文字をエスケープすればよいですか？
本文では & < > の3つ、属性値に入れるならダブルクォートとシングルクォートも変換します。
なぜアンパサンドを最初に変換するのですか？
後にすると、先に作った < が &lt; になる二重エスケープが起きるためです。
実体参照を元に戻せますか？
戻せます。向きを切り替えると、名前付きと数値のどちらの参照も文字に戻します。
タグを消せば安全ですか？
不十分です。入れ子や壊れたタグで抜け道が残ります。安全のためにはエスケープを使います。
いつ変換するのが正しいですか？
出力する直前です。入力時に変換して保存すると、メールやCSVで実体参照が見えてしまいます。
&nbsp; は何ですか？
折り返さない空白です。通常の空白と違い、そこで行が折り返されません。
シングルクォートは &apos; と &#39; のどちらがよいですか？
数値参照の ' が無難です。古い環境では ' が解釈されないことがあります。
URLエンコードとの違いは？
目的が別です。HTMLに埋めるのがエスケープ、URLに埋めるのがURLエンコードです。
入力した文字列は送信されますか？
送信されません。すべてブラウザの中だけで処理しています。