HTMLエンティティ エンコード・デコード
このツールでできること
HTMLの特殊文字（&・<・>・"・'）を HTMLエンティティにエンコード／デコードするツールです。ブログや技術記事で HTML タグを文字列として表示したいとき、ソースコードを埋め込みたいとき、XSS 対策の確認などに使えます。
特徴
- エンコード / デコードを切替 — 一つのツールで双方向の変換。
- 必要最低限モード —
&・<・>・"・'の5文字のみ変換。 - 全文字モード — ASCII 以外の全文字を数値参照（
&#xxxx;）で変換。 - 名前参照・数値参照の両対応 — デコード時は名前参照（
&）・数値参照（&）・16進数参照（&）すべて解釈。
使い方
- 「エンコード」または「デコード」を選びます。
- 入力エリアにテキストを入力すると自動で変換されます。
- 出力の「コピー」ボタンでクリップボードに取得できます。
主な HTMLエンティティ
&→&<→<>→>"→"'→'（HTML5 では'も有効）©→©®→®- 半角スペース →
こんなときに使えます
- 技術ブログ・記事の執筆 — HTML タグをコード例として記事本文に埋め込むとき。
- Qiita・Zenn への投稿 — Markdown 内で HTML タグを文字として表示したい箇所。
- XSS対策の確認・学習 — エスケープされるべき文字が正しく変換されているかの確認。
- CMS の本文編集 — WordPress などで HTML 構造を崩したくない箇所。
- メール HTML の作成 — 本文に
<>を含むコンテンツをメール配信。 - ログ・デバッグ出力 — HTML が壊れた状態のコードを安全に画面表示。
- i18n・多言語対応 — 特殊文字を含む翻訳テキストの HTML 埋め込み。
エンコードの種類
HTML エンティティには 名前参照（&・© のように名前で書く）、10進数の数値参照（&・©）、16進数の数値参照（&・©）の3種類があります。本ツールのエンコードは名前参照・数値参照の両方を出力します（必要最低限モードは名前参照、全文字モードは10進数）。デコードは3種類すべてを正しく解釈します。
XSS と HTML エスケープ
XSS（クロスサイト・スクリプティング）は、ユーザー入力を HTML に埋め込む際に適切なエスケープを行わないことが原因で発生します。本ツールのエンコード機能は、学習・確認のために手動で HTML エンティティ化したいときに便利です。ただし、実際の Web アプリケーションでは、テンプレートエンジン（React JSX・Vue テンプレート・Handlebars など）や textContent（DOM API）の使用により自動エスケープするのが安全です。
よくある質問
- 全文字エンコードはいつ使う？
- 日本語をすべて数値参照に変換したいときに使います。文字コードの取り違いや壊れ文字対策として使われますが、現代のUTF-8ベースの環境では通常不要です。
- XSS対策に使えますか？
- 実装では用途に応じてテンプレートエンジンや専用ライブラリのエスケープ機能を使ってください。本ツールは確認・学習用です。
- 名前参照と数値参照の違いは？
- 名前参照は
&のように名前で書く形式、数値参照は&（10進）や&（16進）のようにコードポイントで書く形式です。どちらもブラウザで正しく解釈されます。数値参照はすべての Unicode 文字に使えますが、名前参照は定義された一部の文字のみ対応します。 - ' と ' はどちらを使うべき？
- HTML5 では両方とも有効ですが、HTML4 では
'が定義されていなかったため、古いブラウザ互換性を考慮するなら'が安全です。本ツールもエンコード出力には'を使用しています。 - 絵文字はどう扱われますか？
- 絵文字はサロゲートペアで表現される文字が多いですが、本ツールは正しくコードポイント単位で扱うため、全文字モードで
😀のような形式で出力できます。 - URL エンコードとは違いますか？
- はい、別物です。URL エンコード（
%20など）は URL 内の特殊文字を扱う仕組みで、HTML エンティティとは用途が異なります。URL エンコードが必要な場合は「URLエンコード・デコード」ツールをご利用ください。 - JSON エスケープとの違いは？
- JSON は
\n\"のようなバックスラッシュベースのエスケープで、HTML エンティティとは全く異なる仕組みです。JSON 内に HTML タグを埋め込む場合は、JSON エスケープを使います。
