HTMLエンティティ エンコード / デコード

HTMLエンティティとは、HTMLで予約されている文字や入力しにくい文字を表す短いコードのことです。アンパサンドで始まりセミコロンで終わります。たとえば&amp;はアンパサンド（&）、&lt;は小なり記号（<）、&copy;は著作権記号（©）を表します。エンティティを使うことで、文字がマークアップとして解釈されることなくそのまま表示され、ページの文字エンコードに含まれていない記号でも正しくレンダリングされることが保証されます。HTMLを手書きするときやWebアプリケーションでユーザー入力をサニタイズするときに頻繁に使用します。

左ペインにテキストを貼り付け、モードを「エンコード」のままにします。エスケープする文字の範囲を選択します。予約済み文字のみ（< > & " '）、予約済み文字と非ASCII文字すべて、またはすべての文字、そして出力形式として名前付き・10進数・16進数のいずれかを選択します。たとえば名前付きオプションで「お魚 & フライドポテト <3」は「お魚 &amp; フライドポテト &lt;3」になります。結果は右側に即時表示されます。「コピー」をクリックしてHTMLに直接貼り付けてください。すべてブラウザ内で処理されます。ファイルのアップロード不要、アカウント不要、エンコードできるテキスト量に制限もありません。

モードを「デコード」に切り替え、エンコードされたHTMLを左ペインに貼り付けると、読めるテキストが右側に即時表示されます。名前付き・10進数・16進数のエンティティに対応しているため、&lt;div&gt; トム &amp; ジェリー &#169; は <div> トム & ジェリー © にデコードされます。「スワップ」ボタンでペインを入れ替えれば、結果を再エンコードすることもできます。同一文字列内に異なる種類のエンティティが混在していても正しくデコードされます。名前付き・10進数・16進数が混在していても、それぞれが正確にデコードされます。FreeFormatter.comのエンティティデコーダーは変換のたびにフォーム送信とページ再読み込みが必要ですが、このツールは入力しながらリアルタイムで更新されます。

これらは最もよく使われる4つのHTMLエンティティです。&amp;はアンパサンド（&）、&lt;は小なり記号（<）、&gt;は大なり記号（>）、&nbsp;はノーブレークスペースを表します。ノーブレークスペースとは、ブラウザが行を折り返したり複数のスペースを1つに折りたたんだりしないようにするスペースのことです。たとえば「10&nbsp;kg」のように数値と単位の間に使うと、2行に分かれることがなくなります。他のエンティティより先に&を&amp;にエスケープすることが重要です。そうしないと&amp;自体が新しいエンティティの開始として誤って解釈され、二重エンコードの問題が発生します。

これらは同じ文字を3つの異なる方法で記述したものです。名前付きエンティティは覚えやすいキーワードを使います（&amp;）。10進数の数値エンティティはUnicodeコードポイントを10進数で表します（&#38;）。16進数エンティティはベース16を使います（&#x26;）。3つともアンパサンドを出力します。名前付きエンティティは最も読みやすいですが、名前が定義されているのは約2,000文字のみです。そのため、絵文字を含むその他の文字には数値エンティティが使われます。😀は&#128512;と表します。迷った場合は可読性の観点から名前付きエンティティが最適です。HTML5標準ではHTML4から大幅に名前付きエンティティリストが拡張され、2,200以上の名前付き文字参照をカバーしています。

ページコンテンツで特別な意味を持つ3つの文字は常にエスケープが必要です。&（&amp;）、<（&lt;）、>（&gt;）です。属性値の内部では"（&quot;）と'（&#39;）もエスケープする必要があります。&を先にエスケープすることが重要です。そうしないと&amp;自体がエンティティの開始として誤解されて二重エスケープが発生します。エンコードモードの「予約済み」オプションはこれら5文字のみを処理し、残りのテキストはそのままにします。エンコード不要な文字を過剰エンコードしたくないフォーム入力やテンプレート出力のサニタイズに最適です。

よく使われる矢印のエンティティは&larr;（←）、&rarr;（→）、&uarr;（↑）、&darr;（↓）、&harr;（↔）です。二重線バージョンは&lArr;、&rArr;、&hArr;（⇐ ⇒ ⇔）です。その他の記号については下の検索可能な一覧を使ってください。「arrow」「heart」「euro」などと入力すると、名前付き・10進数・16進数のコードが表示され、クリックしてコピーできます。この一覧には句読点、数学記号、ギリシャ文字、通貨記号、数百の特殊文字がすべて収録されており、HTML5の名前付き文字参照標準に対応しています。W3Schoolsが約255エンティティのみを掲載しているのに対し、このツールは2,200以上を収録しています。

ブラウザの定番テクニックは、DOMに自動でデコードさせる方法です。切り離したtextareaを作成し、そのinnerHTMLにエンティティ文字列をセットしてvalueを読み取ります。例: const el = document.createElement('textarea'); el.innerHTML = '&lt;b&gt; &amp; &#169;'; とすると、el.valueは'<b> & ©'を返します。純粋なJavaScriptにはdecodeHTMLEntities()という組み込み関数はないため、このDOMアプローチか、マッチしたエンティティトークンをtextareaに渡すことで不正なマークアップが漏れ出ないようにした小さなヘルパー関数が標準的なパターンです。このツールもまさにその方法を採用しており、信頼できないマークアップを使用してもXSSリスクなく安全に利用できます。

これは二重エンコードによるものです。テキストが一度エスケープされ（&が&amp;になり）、さらにもう一度エスケープされた（&amp;の&が&amp;amp;になった）状態です。通常はフレームワークがすでにエスケープ済みの出力を自動エスケープすることで発生します。PHPのCMSや一部のテンプレートエンジンでよく見られます。Twig、Smarty、旧バージョンのWordPressフックはすべてデフォルトですべての出力をエスケープします。ここのデコード機能に値を貼り付けて一度デコードすることで二重エンコードを確認し、テンプレートが値を安全とマークするか、出力時に一度だけエスケープするように修正してください。

©には&copy;、®には&reg;、™には&trade;、em ダッシュ（—）には&mdash;を使います。en ダッシュには&ndash;（–）、省略記号には&hellip;（…）を使います。UTF-8のページではシンボルを直接貼り付けることもできますが、名前付きエンティティは明確で文字エンコードが変わっても失われません。今日ではほぼすべてのページがUTF-8なので©を直接貼り付けても問題ありません。名前付きエンティティは、Outlook・Gmail・Apple Mailなどのメールクライアントでエンコードの前提が異なるHTMLメールにとって最も安全な選択肢です。

&nbsp;（数値表記&#160;または&#xA0;）です。ノーブレークスペースは2つの単語、または値と単位を同じ行に保ち、ブラウザが繰り返しスペースを折りたたまないようにします。たとえば「田中&nbsp;様」や「5&nbsp;km」のように使います。ただしレイアウト目的での使いすぎは避けてください。間隔にはCSSのmarginやpaddingを使うべきです。よくある誤りとして、テキストのインデントや列の作成に複数の&nbsp;エンティティを使うことがあります。これは悪い実践であり、ページのリサイズ時やスクリーンリーダーでの表示時に問題が生じます。スクリーンリーダーは各エンティティを「ノーブレークスペース」と読み上げます。

はい。名前付きエンティティは大文字・小文字を区別します。&amp;は機能しますが&Amp;や&AMP;は機能しない場合があります。また&Sigma;（Σ）と&sigma;（σ）はまったく異なる文字です。16進数エンティティでは、xの部分のみ大文字・小文字を区別しません。&#xA9;と&#xa9;はどちらも©を出力します。迷った場合は記憶に頼って入力するのではなく、このリファレンス一覧から正確なコードをコピーしてください。名前付きエンティティの大文字・小文字を間違えると、記号の代わりにそのままコードが表示されます。これは手書きのHTMLテンプレートでよくあるバグの原因です。

FreeFormatter.comとW3Schoolsはどちらも静的なHTMLエンティティリファレンス表を提供していますが、コードを調べることしかできず、自分のテキストをエンコードやデコードすることはできません。FreeFormatterのエンティティエンコーダーが最も近い代替ですが、変換のたびにフォーム送信とページ再読み込みが必要で、HTML4の名前付きエンティティのみに対応しています。W3Schoolsは約255の名前付きエンティティを表示しています。このツールはHTML5の完全な名前付き文字参照セット（2,200件以上）をカバーし、検索可能なリファレンスとライブエンコーダー・デコーダーをすべて1か所に統合しており、入力しながらリアルタイムで更新されます。

はい、エンコーダー・デコーダー・エンティティ一覧のすべてが、AndroidのChromeやiPhoneのSafariを含むモバイルブラウザで完全に動作します。レイアウトは小さな画面に対応しており、2つのペインが縦に並びます。モバイルでの使い方のヒント：ワンタップコピーがすぐに反応しない場合は、エンティティ一覧のセルを長押しすることでブラウザのコピーオプションが表示されます。アプリのダウンロードは不要です。このツールはあらゆる現代のモバイルブラウザで標準的なWebページとして動作します。登録不要、アカウント不要、どのデバイスでも使用制限はありません。最初にページを読み込んだ後はオフラインでも動作します。