HTML エスケープ変換

テキストを HTML の中で安全に表示できるようにエスケープしたり、< & © などの文字参照を元の文字に戻したりできます。よく使う HTML 特殊文字の一覧付きです。

変換する文字
表記方法
よく使う HTML 特殊文字一覧(58 個)
文字文字実体参照数値文字参照説明
& & & アンパサンド
< &lt; &#60; 小なり(不等号)
> &gt; &#62; 大なり(不等号)
" &quot; &#34; ダブルクォーテーション
' &apos; &#39; シングルクォーテーション(HTML5)
(空白) &nbsp; &#160; 改行しないスペース
© &copy; &#169; 著作権記号
® &reg; &#174; 登録商標
™ &trade; &#8482; 商標
° &deg; &#176; 度
± &plusmn; &#177; プラスマイナス
× &times; &#215; 掛け算記号
÷ &divide; &#247; 割り算記号
· &middot; &#183; 中黒(半角)
• &bull; &#8226; 箇条書きの黒丸
… &hellip; &#8230; 三点リーダー
– &ndash; &#8211; エンダッシュ
— &mdash; &#8212; エムダッシュ
‘ &lsquo; &#8216; 左シングル引用符
’ &rsquo; &#8217; 右シングル引用符
“ &ldquo; &#8220; 左ダブル引用符
” &rdquo; &#8221; 右ダブル引用符
« &laquo; &#171; 左ギュメ(山括弧の引用符)
» &raquo; &#187; 右ギュメ(山括弧の引用符)
§ &sect; &#167; 節記号
&para; &#182; 段落記号
€ &euro; &#8364; ユーロ
£ &pound; &#163; ポンド
¥ &yen; &#165; 円記号(半角の ¥)
¢ &cent; &#162; セント
← &larr; &#8592; 左矢印
→ &rarr; &#8594; 右矢印
↑ &uarr; &#8593; 上矢印
↓ &darr; &#8595; 下矢印
↔ &harr; &#8596; 左右矢印
≤ &le; &#8804; 小なりイコール
≥ &ge; &#8805; 大なりイコール
≠ &ne; &#8800; ノットイコール
≈ &asymp; &#8776; ほぼ等しい
∞ &infin; &#8734; 無限大
½ &frac12; &#189; 2 分の 1
¼ &frac14; &#188; 4 分の 1
¾ &frac34; &#190; 4 分の 3
² &sup2; &#178; 上付きの 2(2 乗)
³ &sup3; &#179; 上付きの 3(3 乗)
µ &micro; &#181; マイクロ
α &alpha; &#945; ギリシャ文字 アルファ
β &beta; &#946; ギリシャ文字 ベータ
π &pi; &#960; ギリシャ文字 パイ(円周率)
Ω &Omega; &#937; ギリシャ文字 オメガ(大文字)
é &eacute; &#233; アクセント付きの e
ü &uuml; &#252; ウムラウト付きの u
ñ &ntilde; &#241; チルダ付きの n
‰ &permil; &#8240; パーミル(千分率)
(空白) &ensp; &#8194; エンスペース(半角幅)
(空白) &emsp; &#8195; エムスペース(全角幅)
(空白) &thinsp; &#8201; 細いスペース
(空白) &shy; &#173; ソフトハイフン

HTML エスケープ変換の使い方

  1. 上の切り替えで「エスケープ(エンコード)」か「アンエスケープ(デコード)」を選びます。
  2. エスケープするときは「変換する文字」(特殊文字のみ/ASCII 以外もすべて)と「表記方法」(文字実体参照/10 進数/16 進数)を選びます。
  3. テキストを貼り付けると結果がすぐに表示されます。「結果をコピー」で使い、「結果を逆変換」で元に戻るかも確認できます。

HTML でエスケープが必要な文字

HTML で特別な意味を持つ文字は 5 つです。& は文字参照の始まり、< と > はタグの区切り、" と ' は属性値の区切りを表します。これらを文字としてそのまま表示するには、&amp; &lt; &gt; &quot; &#39; と書きます。たとえばページ上に <b>AT&T</b> というコードを表示したいときは、&lt;b&gt;AT&amp;T&lt;/b&gt; と書きます。

今の Web ページのほとんどは UTF-8 なので、ひらがなや漢字、©、€ などはエスケープせずにそのまま書いてかまいません。「ASCII 以外もすべて」は、文字コードが UTF-8 でない古いシステムや一部のメール配信など、ASCII だけで書く必要がある場合に使います。

文字実体参照と数値文字参照

同じ文字は 3 通りで書けます。名前で表す文字実体参照(&copy;)、10 進数の数値文字参照(&#169;)、16 進数の数値文字参照(&#xA9;)です。文字実体参照は読みやすい反面、名前があるのは約 2,000 文字だけです。数値文字参照ならあらゆる Unicode 文字を表せ、たとえば「あ」は &#12354;(&#x3042;)になります。

&apos; は HTML5 と XML では定義されていますが HTML 4 にはないため、このツールではシングルクォーテーションを互換性の高い &#39; で出力します。デコード時は、表にない文字実体参照も含め、ブラウザが知っている HTML5 の文字実体参照をすべて変換できます。

エスケープ処理と XSS 対策

ユーザーが入力した文字列をエスケープせずにページへ埋め込むと、クロスサイトスクリプティング(XSS)の原因になります。<script>…</script> のような入力がそのまま HTML に出力されると、ブラウザがスクリプトとして実行してしまうためです。IPA の「安全なウェブサイトの作り方」でも、出力時のエスケープが根本的な対策として挙げられています。

ただし HTML エスケープが守れるのは HTML の本文と引用符で囲んだ属性値だけで、JavaScript の文字列や URL、CSS にはそれぞれ別のエスケープが必要です(URL パラメータなら encodeURIComponent など)。実際の開発ではテンプレートエンジンやフレームワークの自動エスケープを使い、このツールは一時的な変換や確認に使うのがおすすめです。

日本語ページでよく使う特殊文字

円記号は、半角の ¥(U+00A5、&yen;)と全角の ¥(U+FFE5)が別の文字です。価格表示で使うなら、どちらかに統一しておくと検索や置換で困りません。また、日本語フォントでは \(バックスラッシュ、U+005C)が円記号の形で表示されることがありますが、これは見た目だけで文字としては別物です。

&nbsp; は改行されない空白で、「10&nbsp;kg」のように数値と単位を同じ行に保ちたいときに使います。全角スペース(U+3000)は通常の文字なので、エスケープせずにそのまま書けます。

よくある質問

&nbsp; と普通のスペースの違いは何ですか?

普通の半角スペースはそこで改行されることがあり、連続すると 1 つにまとめて表示されます。&nbsp;(ノーブレークスペース、U+00A0)は前後の語を同じ行に保ち、連続しても 1 つにまとめられません。

HTML のタグをそのままページに表示するには?

このツールの「エスケープ」モードにコードを貼り付け、結果を <pre><code>…</code></pre> の中に入れてください。エスケープしないと、ブラウザがタグとして解釈してしまい、コードとして表示されません。

日本語の文字もエスケープしたほうがいいですか?

ページの文字コードが UTF-8 なら不要です。ひらがな・カタカナ・漢字はそのまま書くほうが読みやすく、ファイルサイズも小さくなります。ASCII だけで書く必要がある場合にだけ「ASCII 以外もすべて」を選んでください。

デコードしても元に戻らない文字参照があるのはなぜですか?

&foo; のような存在しない名前や、末尾のセミコロンがないものは、誤変換を避けるためそのまま残します。文字実体参照は大文字と小文字を区別するので、&Omega; と &omega; は別の文字です。つづりを確認してください。

© は &copy; と書くべきですか?

UTF-8 のページなら © をそのまま書いてかまいません。ソースを ASCII だけに保ちたい場合や、記号を入力しにくい場合に &copy; を使います。

入力したテキストは送信されますか?

いいえ。変換はすべてブラウザ内で行われます。端末に保存されるのは、選んだオプションの設定だけです。

最終更新: ソースコードを見る