HTML エスケープ変換の使い方
- 上の切り替えで「エスケープ(エンコード)」か「アンエスケープ(デコード)」を選びます。
- エスケープするときは「変換する文字」(特殊文字のみ/ASCII 以外もすべて)と「表記方法」(文字実体参照/10 進数/16 進数)を選びます。
- テキストを貼り付けると結果がすぐに表示されます。「結果をコピー」で使い、「結果を逆変換」で元に戻るかも確認できます。
HTML でエスケープが必要な文字
HTML で特別な意味を持つ文字は 5 つです。& は文字参照の始まり、< と > はタグの区切り、" と ' は属性値の区切りを表します。これらを文字としてそのまま表示するには、& < > " ' と書きます。たとえばページ上に <b>AT&T</b> というコードを表示したいときは、<b>AT&T</b> と書きます。
今の Web ページのほとんどは UTF-8 なので、ひらがなや漢字、©、€ などはエスケープせずにそのまま書いてかまいません。「ASCII 以外もすべて」は、文字コードが UTF-8 でない古いシステムや一部のメール配信など、ASCII だけで書く必要がある場合に使います。
文字実体参照と数値文字参照
同じ文字は 3 通りで書けます。名前で表す文字実体参照(©)、10 進数の数値文字参照(©)、16 進数の数値文字参照(©)です。文字実体参照は読みやすい反面、名前があるのは約 2,000 文字だけです。数値文字参照ならあらゆる Unicode 文字を表せ、たとえば「あ」は あ(あ)になります。
' は HTML5 と XML では定義されていますが HTML 4 にはないため、このツールではシングルクォーテーションを互換性の高い ' で出力します。デコード時は、表にない文字実体参照も含め、ブラウザが知っている HTML5 の文字実体参照をすべて変換できます。
エスケープ処理と XSS 対策
ユーザーが入力した文字列をエスケープせずにページへ埋め込むと、クロスサイトスクリプティング(XSS)の原因になります。<script>…</script> のような入力がそのまま HTML に出力されると、ブラウザがスクリプトとして実行してしまうためです。IPA の「安全なウェブサイトの作り方」でも、出力時のエスケープが根本的な対策として挙げられています。
ただし HTML エスケープが守れるのは HTML の本文と引用符で囲んだ属性値だけで、JavaScript の文字列や URL、CSS にはそれぞれ別のエスケープが必要です(URL パラメータなら encodeURIComponent など)。実際の開発ではテンプレートエンジンやフレームワークの自動エスケープを使い、このツールは一時的な変換や確認に使うのがおすすめです。
日本語ページでよく使う特殊文字
円記号は、半角の ¥(U+00A5、¥)と全角の ¥(U+FFE5)が別の文字です。価格表示で使うなら、どちらかに統一しておくと検索や置換で困りません。また、日本語フォントでは \(バックスラッシュ、U+005C)が円記号の形で表示されることがありますが、これは見た目だけで文字としては別物です。
は改行されない空白で、「10 kg」のように数値と単位を同じ行に保ちたいときに使います。全角スペース(U+3000)は通常の文字なので、エスケープせずにそのまま書けます。
よくある質問
と普通のスペースの違いは何ですか?
普通の半角スペースはそこで改行されることがあり、連続すると 1 つにまとめて表示されます。 (ノーブレークスペース、U+00A0)は前後の語を同じ行に保ち、連続しても 1 つにまとめられません。
HTML のタグをそのままページに表示するには?
このツールの「エスケープ」モードにコードを貼り付け、結果を <pre><code>…</code></pre> の中に入れてください。エスケープしないと、ブラウザがタグとして解釈してしまい、コードとして表示されません。
日本語の文字もエスケープしたほうがいいですか?
ページの文字コードが UTF-8 なら不要です。ひらがな・カタカナ・漢字はそのまま書くほうが読みやすく、ファイルサイズも小さくなります。ASCII だけで書く必要がある場合にだけ「ASCII 以外もすべて」を選んでください。
デコードしても元に戻らない文字参照があるのはなぜですか?
&foo; のような存在しない名前や、末尾のセミコロンがないものは、誤変換を避けるためそのまま残します。文字実体参照は大文字と小文字を区別するので、Ω と ω は別の文字です。つづりを確認してください。
© は © と書くべきですか?
UTF-8 のページなら © をそのまま書いてかまいません。ソースを ASCII だけに保ちたい場合や、記号を入力しにくい場合に © を使います。
入力したテキストは送信されますか?
いいえ。変換はすべてブラウザ内で行われます。端末に保存されるのは、選んだオプションの設定だけです。
最終更新: ソースコードを見る