DevTools Japan トップへ

lt;/> HTML特殊文字変換

HTMLの特殊文字をエスケープ・アンエスケープ変換

入力(HTML)
出力(エスケープ済み)

よく使うHTML実体参照

HTML特殊文字変換ツールの使い方

HTMLの特殊文字(<, >, &, " 等)をHTMLエンティティ(< > & 等)に変換する無料ツールです。XSS(クロスサイトスクリプティング)対策、HTMLテンプレートへのデータ埋め込み、技術ブログでのコード表示などに使います。

エスケープが必要な理由

ユーザーが入力したテキストをそのままHTMLに埋め込むと、悪意のあるスクリプトが実行されるXSS脆弱性が発生します。特に <script> タグを含む入力は必ずエスケープする必要があります。このツールで変換結果を確認しながら、安全なHTML出力を構築できます。

逆変換(アンエスケープ)にも対応

HTMLエンティティを元の文字に戻すアンエスケープ機能も搭載しています。すべてブラウザ内で処理されます。

HTMLエスケープとは

HTMLエスケープとは、HTMLの構文上で特別な意味を持つ文字を、ブラウザに「文字そのもの」として表示させるためのエンティティ参照(実体参照)へ置き換える処理のことです。たとえば「小なり記号」(<) はタグの開始を表す特別な記号ですが、これをそのまま本文に書くとブラウザはタグの一部だと誤認識してしまいます。そこで < という形に変換しておくことで、ブラウザはタグではなく「小なり」という1文字として正しく描画します。

エスケープが必要な理由は大きく2つあります。1つはこのタグの誤認識防止です。コードスニペットやサンプルHTMLを記事に載せるとき、エスケープしないと意図せずタグとして解釈され、レイアウトが崩れたり内容が消えたりします。もう1つはXSS(クロスサイトスクリプティング)対策です。ユーザーが入力した文字列をそのままページに出力すると、悪意ある <script> が実行される恐れがあります。出力時に特殊文字をエスケープしておけば、入力はスクリプトではなく単なる文字列として扱われ、攻撃を防げます。アンパサンド(&)はエンティティそのものの開始記号なので、最初に変換しないと二重変換が起きる点にも注意が必要です。

HTMLエスケープの変換例

このツールのエスケープは、次の5文字を対応するエンティティ参照へ変換します。実装の出力に完全に一致した対応表です。

元の文字エンティティ参照読み・意味
<&lt;小なり(less than)
>&gt;大なり(greater than)
&&amp;アンパサンド
"&quot;ダブルクオート
'&#39;シングルクオート(数値文字参照)

シングルクオートは名前付きの &apos; ではなく数値文字参照 &#39; に変換します。&apos; は古いHTML4では未定義のため、互換性の高い &#39; を採用しています。アンエスケープ側では、これら5つに加えて &copy; や &nbsp; などブラウザが認識する名前付き参照も元の文字へ戻せます。

よくある質問

HTMLエスケープではどの文字が変換される?
このツールのエスケープでは「小なり」「大なり」「アンパサンド」「ダブルクオート」「シングルクオート」の5文字が変換されます。それぞれ &lt; &gt; &amp; &quot; &#39; というエンティティ参照に置き換わります。
&lt;とは何?
&lt; は「小なり記号」(<)を表すHTMLのエンティティ参照です。lt は less than の略で、ブラウザはこれをタグの開始ではなく文字としての「小なり」として表示します。同様に &gt; は「大なり」を表します。
HTMLエスケープはXSS対策になる?
出力時に特殊文字をエンティティ参照へ変換することは、入力がHTMLタグやスクリプトとして解釈されるのを防ぐ重要なXSS対策の一つです。ただし万能ではなく、属性値やURL、JavaScript文脈など出力先に応じた追加のエスケープも必要です。
エスケープとアンエスケープの両方ができる?
はい。上部のトグルでエスケープ(文字をエンティティ参照へ)とアンエスケープ(エンティティ参照を元の文字へ)を切り替えられます。アンエスケープではブラウザのデコード機能で &copy; などの名前付き参照も元の文字に戻します。
入力したテキストはサーバーに送信される?
いいえ。変換処理はすべてお使いのブラウザ内のJavaScriptで完結し、入力したテキストがサーバーへ送信・保存されることはありません。機密を含むコードでも安心して利用できます。

関連ツール

Base64変換ツール URLエンコード・デコードツール Markdownプレビュー
コピーしました