ぱんだふるツール のマスコットぱんだふるツールやりたいことが、すぐできる。

HTMLエスケープ

使い方

  1. 1エスケープ/アンエスケープを選ぶ
  2. 2テキストを貼り付け
  3. 3結果をコピー

HTMLで特別な意味を持つ文字を、実体参照(< など)に変換します。コードをそのまま表示したいとき、入力値を安全に扱いたいときに使えます。

エスケープされる文字

文字実体参照意味
<&lt;タグの開始
>&gt;タグの終了
&&amp;実体参照の開始
"&quot;属性値の囲み
'&#39;属性値の囲み(シングル)

なぜエスケープが必要か

ブラウザは < を見つけるとタグの開始と解釈します。ソースコードの説明で「<div>」と書きたいのにタグとして解釈されてしまうのは、このためです。

また、ユーザーの入力をそのままHTMLに埋め込むと、悪意あるスクリプトが実行されるおそれがあります(クロスサイトスクリプティング/XSS)。入力値の表示時にエスケープすることが、基本的な対策の一つです。

実装時の注意

  • エスケープは「表示する直前」に行うのが原則です
  • &amp; を先に処理しないと、二重エスケープになります(本ツールは順序を考慮しています)
  • 多くのテンプレートエンジンは自動でエスケープします。手動での二重処理に注意してください
  • 属性値の中では、引用符のエスケープが特に重要です

よくある質問

Q 実体参照とは何ですか?

&lt; のように、特別な意味を持つ文字を別の書き方で表す方法です。ブラウザは表示時に元の文字に戻します。

Q デコードもできますか?

できます。実体参照を元の文字に戻す方向にも対応しています。

Q 二重エスケープとは?

&amp;lt; のように、エスケープ済みの文字列を再度エスケープしてしまう状態です。画面に &lt; がそのまま表示されます。

Q XSS対策にはこれだけで十分ですか?

表示時のエスケープは基本の一つですが、埋め込む場所(HTML本文・属性・JavaScript内)ごとに適切な処理が必要です。

このツールを共有・埋め込み

ブログやサイトに自由に貼り付けてOKです(無料)。

Xでシェア

埋め込みコード(iframe)

<iframe src="https://pandaful-tools.com/embed/html-escape" width="100%" height="640" loading="lazy" style="border:1px solid #e5e7eb;border-radius:16px" title="HTMLエスケープ|ぱんだふるツール"></iframe>
最終更新: 2026-07-23

Web・ネットの関連ツール