HTMLエスケープツール
HTMLタグや特殊文字を、記事内で安全に表示しやすい実体参照へ変換できます。エスケープ、アンエスケープ、数値文字参照、コピー、TXT保存に対応しています。
変換結果のテキスト表示プレビューがここに表示されます。
| 文字 | 実体参照 | 主な用途 |
|---|---|---|
| & | & | エンティティやURLパラメータで使う記号 |
| < | < | HTMLタグの開始記号 |
| > | > | HTMLタグの終了記号 |
| " | " | HTML属性値で使う引用符 |
| ' | ' | HTML属性値やJavaScript文字列で使う引用符 |
HTMLエスケープツールは、HTMLタグや特殊文字を、ブラウザ上で安全に表示しやすい形式へ変換する無料ツールです。たとえば <div> や <p> のようなHTMLタグをそのまま記事内に書くと、ブラウザがHTMLとして解釈してしまい、タグが表示されずに実行されることがあります。そこで、< を <、> を >、& を & のようなHTML実体参照へ変換することで、コードを文字として表示できるようになります。
WordPressやSWELLでブログ記事を書くとき、HTMLコードの使い方を解説したい場面はよくあります。たとえば、カスタムHTMLブロックに貼るコード、リンクタグ、見出しタグ、装飾用のHTML、CSSやJavaScriptの一部などを記事内で紹介したい場合、HTMLエスケープが必要になることがあります。このツールを使えば、コードをコピーして貼り付けるだけで、記事内に表示しやすい形へ変換できます。
HTMLエスケープが必要な理由
HTMLでは、< や > はタグを表す特別な記号として扱われます。そのため、文章の中で <span> や <a href=""> のようなコードをそのまま入力すると、ブラウザがコードとして処理してしまいます。説明文として見せたいだけなのに、リンクになったり、レイアウトが崩れたり、タグが消えて見えたりすることがあります。
HTMLエスケープを行うと、ブラウザはその文字をタグではなく通常の文字として扱います。たとえば <strong>重要</strong> を <strong>重要</strong> に変換すると、実際に太字として表示されるのではなく、コードそのものを読者に見せることができます。ブログ運営、Web制作の解説記事、社内マニュアル、操作手順書などで非常に便利です。
アンエスケープとは
アンエスケープは、エスケープされたHTML実体参照を元の文字に戻す処理です。たとえば <div> を <div> に戻したり、& を & に戻したりできます。Webページのソース、CMSから出力された文字列、システムログ、メールテンプレートなどを確認するときに、実体参照のままだと読みにくい場合があります。そのようなときにアンエスケープを使うと、元のHTMLや記号を確認しやすくなります。
ただし、アンエスケープしたHTMLをそのままWebページに貼り付ける場合は注意が必要です。タグとして実行される可能性があるため、信頼できないコードや外部から受け取った文字列をそのまま公開するのは避けてください。表示用なのか、実行用なのかを区別して使うことが大切です。
このツールでできること
このHTMLエスケープツールでは、HTMLタグや特殊文字を名前付き実体参照、数値文字参照、16進数文字参照へ変換できます。通常は < や > のような名前付き実体参照を使えば十分です。より厳密に文字コードとして扱いたい場合は、数値文字参照や16進数文字参照も利用できます。
また、ダブルクォートやシングルクォートを変換するかどうかも選べます。HTML属性値の中に文字列を入れる場合、引用符の扱いは重要です。たとえば class="sample" のようなコードを説明文として表示したい場合、ダブルクォートを " に変換しておくと安全です。
さらに、既存のHTMLエンティティを二重変換しないオプションも用意しています。すでに < となっている文字列を再度エスケープすると、&lt; のようになってしまうことがあります。このツールでは、既存の実体参照をなるべく維持しながら変換できるため、WordPress記事やマニュアル作成でも扱いやすくなっています。
WordPress・SWELLでの活用例
WordPressでHTMLコードを記事内に掲載する場合、コードブロックやカスタムHTMLブロックを使うことがあります。しかし、テーマやブロックの種類、貼り付け位置によっては、HTMLが実行されてしまうことがあります。特にSWELLでWebツールやカスタムパーツの解説記事を作る場合、読者にコピーしてもらうコードを正しく表示することが重要です。
このツールでHTMLをエスケープしてから記事に貼り付ければ、タグが勝手に実行されにくくなり、読者にもコードとして見せやすくなります。たとえば、リンクタグ、見出しタグ、表のHTML、ボタンのHTML、アフィリエイトタグの一部、Googleタグ関連の説明などを掲載する際に便利です。
業務利用での活用シーン
HTMLエスケープは、ブログ運営だけでなく、業務でもよく使われます。社内マニュアルにHTMLコードを掲載したい場合、メールテンプレートのコードを共有したい場合、システム仕様書にタグの記述例を載せたい場合などに役立ちます。
また、問い合わせフォームやCSVデータ、システムログの中にHTMLタグのような文字列が含まれている場合、エスケープして表示することで、意図しないHTML実行を防ぎやすくなります。セキュリティ上、ユーザー入力を画面に表示する際には、HTMLエスケープが重要な対策のひとつです。
安全性について
このツールは、入力されたHTMLやテキストをブラウザ内で処理します。入力データは外部サーバーへ送信されません。そのため、業務データ、記事原稿、メールテンプレート、社内資料の一部などを扱う場合でも使いやすい設計です。
ただし、HTMLエスケープは万能なセキュリティ対策ではありません。Webアプリケーションでユーザー入力を表示する場合は、表示箇所に応じた適切なエスケープ処理が必要です。HTML本文、HTML属性、JavaScript内、URL内、CSS内では、それぞれ注意点が異なります。このツールは、主にHTML本文や記事内でコードを見せる用途の補助として利用してください。
また、共有端末ではクリップボード履歴や画面共有に注意が必要です。変換後はリセットボタンで入力欄と結果欄を消すと安心です。
FAQ
Q1. HTMLエスケープとは何ですか？
HTMLエスケープとは、HTMLで特別な意味を持つ <、>、&、"、' などを、< や > のような実体参照へ変換することです。HTMLタグを文字として表示したいときに使います。
Q2. アンエスケープとは何ですか？
アンエスケープとは、< や & のようなHTML実体参照を、元の < や & に戻すことです。
Q3. WordPressの記事内でHTMLコードを見せたいときに使えますか？
はい。HTMLコードをエスケープしてから記事に貼り付けることで、タグが実行されず、コードとして表示しやすくなります。
Q4. 入力したHTMLやテキストは外部に送信されますか？
いいえ。このツールはブラウザ内のJavaScriptで処理します。入力データは外部サーバーへ送信されません。
Q5. < が &lt; になってしまうのはなぜですか？
すでにエスケープ済みの文字列を再度エスケープすると、二重エスケープが起きます。このツールでは「既存のHTMLエンティティを二重変換しない」オプションを用意しています。
Q6. 日本語も数値文字参照にできますか？
はい。「日本語・絵文字も数値文字参照にする」をオンにすると、日本語や絵文字も こ のような形式に変換できます。
Q7. HTMLエスケープすればXSS対策として十分ですか？
用途によります。HTML本文に表示する場合は有効な対策のひとつですが、HTML属性、JavaScript内、URL内、CSS内では別の注意が必要です。Webアプリケーションでは表示場所に応じたエスケープを行ってください。