HTMLエンコード/デコード

HTMLエンティティのエンコードとデコード。<>&・引用符をエンティティ参照に変換——すべてブラウザ内で完結、アップロード不要、瞬時に結果表示。

HTMLエンコード/デコードについて

このHTMLエンコード/デコードツールは、すべてブラウザ内で完結します。入力欄にテキストを入力または貼り付けし、エンコードをクリックすると <>&・引用符などの文字をHTMLエンティティ参照に変換し、デコードをクリックするとエンティティ参照を通常の文字に戻します。サーバーへのアップロードは一切なく、JavaScript によってあなたのデバイス上で瞬時に処理されます。

HTMLエンコードの役割

HTMLでは一部の文字が特別な意味を持ちます。小なり記号 < はタグの開始、大なり記号 > はタグの終了、アンパサンド & はエンティティ参照の開始、引用符 " ' は属性値の区切りを表します。これらの文字をウェブページ上に文字として表示したい場合は、エンティティ参照にエスケープする必要があります:

  • &&amp;
  • <&lt;
  • >&gt;
  • "&quot;
  • '&#39;

本ツールがエンコードするのはこの5文字で、HTML内に任意のテキストを安全に埋め込むために必要な標準セットです。

HTMLエンコードを使う場面

  • HTML内にコードを表示 —— チュートリアルやブログ記事で <div class="box"> のようなHTMLスニペットをテキストとして見せたい場合、ブラウザが実際のタグとして解釈しないよう山括弧と引用符をエンコードする必要があります。
  • XSSの防止 —— ユーザー提供や外部のデータをウェブページに挿入する際、エンコードによりクロスサイトスクリプティング(XSS)を防げます。<script>alert(1)</script> のような悪意ある入力は実行されず、無害なテキストとして表示されます。
  • データ属性の埋め込み —— HTML属性内に配置する値は引用符をエンコードし、属性から抜け出せないようにすべきです。

変換ツールの使い方

  1. 入力ボックスにテキストを貼り付けまたは入力します。
  2. エンコードで5つの特殊文字をエンティティにエスケープ、デコードでエンティティを文字に戻します。
  3. 入れ替えをクリックすると出力を入力ボックスに移し、出力をクリアして逆の操作を実行しやすくします。
  4. 出力をコピーで結果をクリップボードにコピー、クリアでやり直せます。

よくある質問

テキストはアップロードされますか? いいえ。すべての変換はローカルブラウザで行われ、テキストがデバイスから外に出ることはありません。

どの文字がエンコードされますか? エンコーダは &<>"'——HTMLで特別な意味を持つ5文字をエスケープします。それ以外の文字はそのままです。

すべてのエンティティタイプをデコードできますか? デコーダは名前付きエンティティ(&lt;&quot; など)、10進数エンティティ(&#60; など)、16進数エンティティ(&#x3C; など)を処理し、ブラウザ内蔵のHTMLパーサーで正確に変換します。

エンコードだけでXSSを完全に防げますか? 5つの特殊文字のエンコードは、HTML要素内容にテキストを挿入する際の標準的な防御です。ただし、データを他のコンテキスト(<script> ブロック内、URL、スタイル属性内など)に挿入する場合は、そのコンテキスト固有の追加エスケープルールが必要になる場合があります。