nicetool.dev logo

HTMLエンティティ変換

HTMLに挿入する前にテキストをエスケープし、表示崩れやXSSを防ぎます。

入力
結果

よく使うエンティティ

クリックでコピーします。

HTMLエンティティとは?

HTMLエンティティは予約文字や特殊文字を表すコードで、例えば < は &lt;、& は &amp; と書きます。ユーザー入力をHTMLとして表示する前にエンコードすることで、マークアップを正しく保ち、クロスサイトスクリプティング(XSS)を防げます。

機能

  • • 予約文字のみ、または非ASCII文字すべてをエンコード
  • • 名前付き・10進数・16進数のエンティティ形式
  • • HTML5のすべての名前付き・数値エンティティをデコード
  • • よく使うエンティティのクイックリファレンス

ローカル処理

エンコードとデコードはブラウザ内で行われます。内容がサーバーに送信されることはありません。

100%クライアントサイド。

HTMLエンティティの使い方

  1. 1

    特殊文字を HTML エンティティに変換するなら Encode、&lt; や &#169; などのエンティティを文字に戻すなら Decode を選びます。

  2. 2

    エンコードではモードを選びます。Basic は & < > " ' のみをエスケープし、Named は &eacute; のような名前付きエンティティ、Decimal と Hex は ASCII 以外のすべての文字を数値参照に変換します。

  3. 3

    テキストや HTML を貼り付けると、結果がすぐに更新されます。

  4. 4

    出力をコピーするか、「結果を入力に使う」で処理を続けます。参照表の項目をクリックすると、よく使うエンティティをコピーできます。

活用例

Web ページにコードを表示

ブログやドキュメントで <div class="box"> を文字として表示するには &lt;div class=&quot;box&quot;&gt; にエンコードし、ブラウザにタグと解釈させないようにします。

安全なユーザー投稿

ユーザーが入力したテキストを HTML に挿入する前にエスケープすれば、レイアウト崩れやクロスサイトスクリプティング(XSS)を防げます。Basic モードで重要な5文字をカバーできます。

二重エンコードの修正

ページや RSS に &amp;amp; や &amp;quot; が表示されたら、1〜2回デコードしてどこで過剰にエスケープされたかを突き止めます。

ASCII のみのシステム

一部のメールテンプレートや古い CMS、XML フィードは ASCII しか受け付けません。Decimal や Hex モードなら é や日本語を &#233; のような参照に変換し、どんな文字コードでも崩れません。

よくある質問

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

テキスト内容では & と < が必須です。属性値の中では、値を囲む引用符(" または ')もエスケープします。> もエスケープするのは一般的で無害な習慣です。

名前付きと数値のどちらを使う?+

どちらも同じように表示されます。&copy; のような名前付きは読みやすく、&#169; のような数値参照は名前のない文字を含むすべての Unicode 文字に使えます。

HTML エスケープで XSS は防げますか?+

タグの間や引用符で囲んだ属性内のテキストには正しい対策です。<script>、style、イベントハンドラー、URL 内のテキストには文脈に応じた別のエスケープが必要で、最近のフレームワークはこれを自動で処理します。

アクセント付き文字や日本語にエンティティは必要?+

ページが UTF-8 で配信されていれば不要で、現在はそれが標準です。エンティティが必要なのは ASCII に制限されたシステムだけです。