🦊Foxi Tools
🏷️

HTMLエンティティエンコーダー

HTMLエンティティをエンコード/デコードします

HTMLエンティティエンコーダーは、HTMLで特別な意味を持つ文字(<、>、&、"など)をエンティティコード(&lt;、&gt;、&amp;など)に変換・復元するツールです。Webページにコード例を表示したり、ユーザー入力を安全に出力してXSS攻撃を防止するために不可欠です。名前エンティティと数値エンティティの両方に対応しています。

📖 使い方

  1. エンコードするHTMLまたはテキストを入力してください
  2. エンコードボタンで特殊文字をエンティティに変換してください
  3. デコードボタンでエンティティを元の文字に復元してください

主な機能

  • HTML特殊文字エンコード
  • &, <, >, " などを変換
  • XSS防止用エスケープ
  • エンティティデコード
  • リアルタイム変換

💡 活用事例

  • Web開発者: ブログやドキュメントサイトにHTML/JavaScriptコード例を表示する際、タグが実行されないようにエンコードします。
  • セキュリティエンジニア: ユーザー入力値を出力する際にXSS攻撃を防ぐため、HTMLエンティティにエスケープします。
  • コンテンツ編集者: CMSで特殊記号(©、™、®など)をHTMLエンティティに変換し、全ブラウザで正しく表示されるようにします。
  • メールマーケター: HTMLメールテンプレートの特殊文字がメールクライアントで正しく表示されるようにエンティティに変換します。
  • テクニカルライター: APIドキュメントにXML/HTMLコードを安全に埋め込むために山括弧をエンコードします。

🎯 活用ヒント

  • Webページにコードブロックを表示する際は必ず<と>をエンコードしてください。エンコードしないとブラウザがタグとして解釈します。
  • &を先にエンコードする必要があります。&lt;をエンコードすると&amp;lt;になり二重エンコードが発生します。
  • デコード時に&amp;が出力される場合は二重エンコードされている可能性があります。確認してください。
  • ReactやVueは自動エスケープ機能がありますが、dangerouslySetInnerHTMLやv-html使用時は手動エンコードが必須です。

よくある質問

Q. HTMLエンコードがなぜ必要ですか?

A. HTMLで<、>などの特殊文字をそのまま表示するにはエンティティに変換する必要があります。セキュリティ(XSS防止)にも重要です。

Q. &nbsp;も変換されますか?

A. はい、ノーブレークスペースを含むすべてのHTMLエンティティに対応しています。

Q. XSS攻撃とは何ですか?

A. クロスサイトスクリプティング(XSS)は、悪意のあるスクリプトをWebページに挿入する攻撃です。ユーザー入力をHTMLエンコードせずに出力すると、<script>タグが実行されてCookieの窃取やセッションハイジャックが発生する可能性があります。

Q. 名前エンティティと数値エンティティの違いは?

A. 名前エンティティは&lt;や&amp;のように名前で表現し、数値エンティティは&#60;や&#38;のようにUnicodeコードポイントで表現します。機能は同じですが、名前エンティティの方が可読性に優れています。

Q. すべての特殊文字をエンコードする必要がありますか?

A. HTMLで必ずエンコードすべき文字は<、>、&、"、'の5つです。それ以外の特殊文字(©、€など)はオプションで、UTF-8ドキュメントではそのまま使用しても問題ありません。

Q. ReactやVueでもエンコードが必要ですか?

A. ほとんどのモダンフレームワークはテキスト内容を自動エスケープします。ただし、dangerouslySetInnerHTMLやv-htmlで直接HTMLを挿入する場合は、手動エンコードが必須です。

🔗 関連ツール