HTMLエスケープ変換

ブログやマニュアルにHTMLのコードをそのまま見せたいときに、< や & を文字参照に変えます。逆に &lt; や &#x1F600; を元の文字に戻すこともできます。

エスケープする5文字

文字文字参照理由
&&amp;文字参照の始まりの記号なので最初に変換
<&lt;タグの始まりと読まれる
>&gt;タグの終わりと読まれる
"&quot;属性値 "…" の終わりと読まれる
'&#39;属性値 '…' の終わりと読まれる

' は &apos; でも書けますが、古いHTML4では定義されていないため、互換性の高い &#39; を使っています。アンエスケープは1回分だけ戻します(&amp;lt; は &lt; になります)。名前付きの文字参照は &nbsp; &copy; &yen; など、よく使うものに対応しています(末尾の ; が必要です)。入力はブラウザの中だけで変換し、送信や保存はしません。

HTMLエスケープ変換でできること

ブログや資料にHTMLのコードをそのまま表示したいときに、& < > " ' を文字参照に変換します。逆に &lt; や &#x1F600; などを元の文字に戻すこともできます。

使い方

  1. 上の切り替えで「エスケープ」か「アンエスケープ」を選びます。
  2. 「変換前」に文字やHTMLを貼り付けます。結果はすぐ「変換後」に出ます。
  3. 必要に応じて「日本語など英数字以外も &#x…; にする」「改行の前に <br> を入れる」(アンエスケープでは「<br> を改行に戻す」)にチェックを入れます。
  4. 結果の下に、どの文字を何か所置き換えたかが表示されます。「結果をコピー」でコピーし、「結果を変換前に移す」で逆向きの変換を続けて試せます。

計算の仕組みと注意点

よくある質問

HTMLのタグをブログにそのまま表示するにはどうすればいいですか?

< と > を &lt; と &gt; に、& を &amp; に変えて書きます。「エスケープ」でコードを貼り付ければ、5種類の記号をまとめて変換できます。

&amp;lt; のように二重にエスケープされてしまったのを直せますか?

「アンエスケープ」で1回戻すと &lt; になり、まだ文字参照が残っていると注意が出ます。「結果を変換前に移す」を押すと、もう一度戻せます。

&nbsp; や &#x1F600; は何の文字ですか?

&nbsp; は改行されない空白、&#x1F600; は16進数の番号で表した絵文字(U+1F600)です。「アンエスケープ」に貼り付けると元の文字に戻り、置き換えた件数も表示されます。

日本語を &#x…; の形にする必要はありますか?

UTF-8で保存したページなら、ふつうは日本語をそのまま書けます。文字コードが指定できない場所に貼るときなどに、「日本語など英数字以外も &#x…; にする」を使います。