HTMLエンティティ変換ツール(無料・登録不要)
登録不要 無料 ブラウザ完結
HTMLエンティティのエスケープ・アンエスケープをリアルタイム変換。
名前参照(<)・10進数値(<)・16進数値(<)の3形式、変換範囲の選択、よく使うエンティティ一覧表50種付き。
入力データはサーバーに送信されず、ブラウザ内のみで安全に処理されます。
形式:
範囲:
HTMLエスケープ(名前参照・必要最小限)
HTMLアンエスケープ(名前参照・10進数値・16進数値を自動検出)
📝
技術ブログでHTMLコードを掲載
技術記事にHTMLコードをそのまま貼り付けると、ブラウザがタグとして解釈してレンダリングされてしまいます。エスケープ変換を使うと <div> を文字としてそのまま表示できます。
🔒
XSS対策・ユーザー入力のサニタイズ
ユーザーが入力したテキストをHTMLに出力する前に必ずエスケープが必要です。<script> などのタグを無効化し、クロスサイトスクリプティング(XSS)を防ぎます。
📧
HTMLメール・メールテンプレート作成
HTMLメールでは特殊文字のエスケープが重要です。メールクライアントによってエンコード処理が異なるため、すべての特殊文字をエンティティ化することで表示崩れを防げます。
🔄
CMSやAPIのレスポンス処理
WordPressなどのCMSやREST APIが返すJSONに & < などのエスケープ済みHTMLが含まれることがあります。アンエスケープで元の文字に戻して処理できます。
主な変換例
| 元の文字 | 名前参照 | 10進数値 | 16進数値 | 用途 |
|---|---|---|---|---|
< | < | < | < | タグの開始。必須エスケープ |
> | > | > | > | タグの終了。必須エスケープ |
& | & | & | & | エンティティの開始。必須エスケープ |
" | " | " | " | 属性値の囲み。必須エスケープ |
' | ' | ' | ' | 属性値の囲み。HTML5で追加 |
プライバシー:入力したテキストはすべてブラウザ内で処理されます。サーバーへの送信は一切なく、機密HTMLコード・社内システムテンプレートも安心して変換できます。
Web制作でよく使うHTMLエンティティをカテゴリ別にまとめました。クリックでコピーできます。
必須エスケープ文字(5種)
| 文字 | 名前参照 | 10進数値 | 説明 |
|---|---|---|---|
< | < | < | 小なり記号 / タグ開始 |
> | > | > | 大なり記号 / タグ終了 |
& | & | & | アンパサンド |
" | " | " | ダブルクォーテーション |
' | ' | ' | シングルクォーテーション |
スペース・改行(3種)
| 文字 | 名前参照 | 10進数値 | 説明 |
|---|---|---|---|
| [空白] | |   | ノーブレークスペース(改行しない空白) |
| [細空白] |   |   | 半角スペース(emの半分) |
| [広空白] |   |   | 全角スペース(1em分) |
記号・数学(15種)
| 文字 | 名前参照 | 10進数値 | 説明 |
|---|---|---|---|
| © | © | © | 著作権記号 © |
| ® | ® | ® | 登録商標記号 ® |
| ™ | ™ | ™ | 商標記号 ™ |
| € | € | € | ユーロ記号 € |
| ¥ | ¥ | ¥ | 円記号 ¥ |
| £ | £ | £ | ポンド記号 £ |
| ¢ | ¢ | ¢ | セント記号 ¢ |
| ± | ± | ± | プラスマイナス ± |
| × | × | × | 乗算記号 × |
| ÷ | ÷ | ÷ | 除算記号 ÷ |
| ≠ | ≠ | ≠ | 不等号 ≠ |
| ≤ | ≤ | ≤ | 以下 ≤ |
| ≥ | ≥ | ≥ | 以上 ≥ |
| ∞ | ∞ | ∞ | 無限大 ∞ |
| ° | ° | ° | 度記号 ° |
矢印(8種)
| 文字 | 名前参照 | 10進数値 | 説明 |
|---|---|---|---|
| ← | ← | ← | 左矢印 ← |
| → | → | → | 右矢印 → |
| ↑ | ↑ | ↑ | 上矢印 ↑ |
| ↓ | ↓ | ↓ | 下矢印 ↓ |
| ↔ | ↔ | ↔ | 左右矢印 ↔ |
| ⇐ | ⇐ | ⇐ | 二重左矢印 ⇐ |
| ⇒ | ⇒ | ⇒ | 二重右矢印 ⇒ |
| ⇔ | ⇔ | ⇔ | 二重左右矢印 ⇔ |
引用符・括弧・句読点(10種)
| 文字 | 名前参照 | 10進数値 | 説明 |
|---|---|---|---|
| « | « | « | 二重山括弧(左)« |
| » | » | » | 二重山括弧(右)» |
| ‘ | ‘ | ‘ | 左シングル引用符 ' |
| ’ | ’ | ’ | 右シングル引用符 ' |
| “ | “ | “ | 左ダブル引用符 " |
| ” | ” | ” | 右ダブル引用符 " |
| · | · | · | 中点 · |
| • | • | • | 箇条書き記号 • |
| … | … | … | 省略記号 … |
| — | — | — | emダッシュ — |
ギリシャ文字(9種)
| 文字 | 名前参照 | 10進数値 | 説明 |
|---|---|---|---|
| α | α | α | α(アルファ) |
| β | β | β | β(ベータ) |
| γ | γ | γ | γ(ガンマ) |
| δ | δ | δ | δ(デルタ) |
| π | π | π | π(パイ) |
| σ | σ | σ | σ(シグマ) |
| μ | μ | μ | μ(ミュー) |
| ω | ω | ω | ω(オメガ) |
| Ω | Ω | Ω | Ω(オメガ大文字) |
XSSとは何か
クロスサイトスクリプティング(XSS)は、Webアプリケーションの脆弱性を利用して、悪意のあるスクリプトを他のユーザーのブラウザ上で実行させる攻撃手法です。OWASPのトップ10に毎年ランクインする、最も一般的なWebセキュリティの脅威の一つです。
危険: エスケープなし
// ユーザー入力をそのまま出力(XSS脆弱性あり)
innerHTML = userInput;
// ↑ userInputが "<script>alert('XSS')</script>" の場合
// スクリプトが実行される
安全: エスケープあり
// ユーザー入力をエスケープしてから出力(安全)
function escapeHTML(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
textContent = escapeHTML(userInput);
エスケープが必要な場面
1
HTMLのテキストノードへの出力
ユーザー入力をHTMLの本文として出力する前に
ユーザー入力をHTMLの本文として出力する前に
< > & " ' の5文字をエスケープします
2
HTML属性値への出力
href="" や value="" などの属性値にユーザー入力を使う場合、属性全体をダブルクォートで囲み内容をエスケープ
3
フレームワークの自動エスケープを信頼する
React・Vue・Angular等のフレームワークは
React・Vue・Angular等のフレームワークは
{変数} で自動エスケープします。dangerouslySetInnerHTML や v-html は信頼できるデータにのみ使用してください
重要:HTMLエスケープだけではすべてのXSSを防げません。Content Security Policy(CSP)の設定・HTTPOnlyクッキー・入力バリデーションと合わせて多層防御を実施してください。
参照形式の種類
HTMLエンティティには3つの表記形式があります。どれも同じ文字を表示しますが、用途・可読性・対応範囲が異なります。
名前参照(Named Reference)
< & ©
- 人間が読みやすい(可読性が高い)
- コードレビューでも意味が分かりやすい
- HTMLで定義されている文字のみ使用可能
- HTMLの5種の必須文字・一般的な記号に最適
10進数値参照(Decimal Reference)
< & ©
- すべてのUnicode文字に対応
- 名前参照が存在しない文字も表現できる
- プログラムで生成しやすい(文字コードを10進数化)
- 一部の古いメールクライアントで安定して表示される
16進数値参照(Hexadecimal Reference)
< & ©
- すべてのUnicode文字に対応
- Unicodeコードポイント(U+003Cなど)と直接対応
- 開発者ドキュメント・仕様書との照合が容易
- CSSの content プロパティと同じ形式
推奨:通常のWeb開発では名前参照が最も可読性が高く推奨されます。プログラムで自動生成する場合や、HTMLにない文字を表現する場合は10進数値参照が便利です。16進数値参照はUnicodeコードポイントと直接対応するため、文字仕様の確認作業に向いています。
Q. HTMLエンティティとHTMLエスケープは同じ意味ですか?
A. 似ていますが厳密には異なります。HTMLエンティティは < や © のような特殊文字の表記形式そのものを指します。HTMLエスケープは、テキスト中の特殊文字をHTMLエンティティに変換するプロセスを指します。「エスケープする」とは「特殊文字をエンティティ形式に変換する」ことを意味します。
Q. を複数連続で使うのは良くないですか?
A. の複数連続使用はアクセシビリティ上の問題があります。スクリーンリーダーが「ノーブレークスペース」として読み上げる場合があります。レイアウト目的のスペース挿入には、CSSの
padding・margin・letter-spacing を使うことを推奨します。 は「ここで改行させたくない」という意味論的な目的で使ってください。Q. HTMLエスケープと URLエンコードは何が違いますか?
A. 対象と目的が異なります。HTMLエスケープはHTMLドキュメント内で特殊文字を安全に表示するための変換(< → <)です。URLエンコード(パーセントエンコーディング)はURLに使用できない文字を %XX 形式に変換することです(スペース → %20、日本語 → %E6% など)。用途が異なるため、間違えないようにしてください。