HTMLエスケープとHTMLエンティティ一覧
HTMLエンティティ変換と記号検索
HTMLエスケープツールと検索できるHTMLエンティティ一覧 | We.Inc
HTMLのエスケープと復元をブラウザー上で行い、よく使われる100のHTMLエンティティと記号を検索できます。名前付きエンティティ、数値コード、CSSのcontentの値、JSのエスケープを、ワンクリックでコピーできます。
HTMLのエスケープとは、ブラウザーがマークアップとして読み取ってしまう文字を、エンティティに置き換えることです。&は&に、<は<に、>は>に変わります。属性値の中では、引用符もエスケープが必要です。下の欄に文章を貼り付けるとエスケープや復元ができ、記号の一覧表を検索して、どのエンティティも名前、数値、CSSの値の形でコピーできます。
特に重要な5つの文字
- &
- テキスト内では常に。文字参照の始まりと解釈されうる場合
- >
- どこでもエスケープするのが望ましく、一部の場面では必須
- ' または '
- シングルクォートで囲んだ属性値の中
まとまった文章をまるごと双方向に変換できるツールと、実際によく使われる記号を検索できる一覧を用意しました。一覧には、引用符、ダッシュ、空白、通貨記号、数学記号、矢印、ギリシャ文字、絵文字が含まれています。どの行も、4通りの形式でコピーできます。
- 欄に文章やマークアップを貼り付け、エスケープか復元を選びます。入力に合わせて、結果がすぐに更新されます。
- 文章を属性値の中に入れる場合は、属性モードにチェックを入れてください。引用符もエスケープされるようになります。
- UTF-8以外の文字コードでファイルを保存したり送信したりする場合は、ASCII以外をエンコードする設定にチェックを入れます。アクセント付きの文字や記号が、すべて数値参照に変換されます。
- 名前、記号、グループで一覧表を検索し、名前、数値、CSS、JSのいずれかをクリックすると、その形式でコピーできます。
- エスケープは、文章を保存するときではなく、HTMLに入れるその時点で行いましょう。あらかじめエスケープした文章を保存しておくと、後で&amp;のような二重のエスケープが起きてしまいます。
- Reactのようなフレームワークは、テキストの内容を自動的にエスケープしてくれます。手作業でのエスケープが必要になるのは、HTMLの文字列を自分で組み立てる場合だけです。
- 改行しない空白（ ）を使うと、数値とその単位のように、2つの言葉を同じ行に保てます。ただし、レイアウトのために何個も並べるのはやめて、代わりにCSSのマージンを使いましょう。
- CSSでは、contentプロパティにバックスラッシュと16進数のコードを書きます。たとえば右向きの矢印はcontent: "\2192"です。コードの直後に16進数として読める文字が続く場合は、コードの後に空白を1つ入れてください。
よくある質問
名前付きエンティティと数値エンティティの違いは何ですか？
どちらも同じ文字を表示します。©のような名前付きの参照は読みやすく、©（10進数）や©（16進数）のような数値の参照は、名前を持たない多くの文字も含め、すべてのUnicodeの文字に使えます。HTMLでは、約2,200個の名前が定義されています。
ページがUTF-8なら、エンティティはもう不要ですか？
必要なのは、マークアップの中で意味を持つ文字だけです。つまり&と<、そして属性の中では使っている引用符です。UTF-8のページなら、€、é、→のような記号はそのまま入力できます。それらをエンティティにするのは任意で、主にエディターやメールのシステムがASCII以外の文字を壊してしまう場合に役立ちます。
'は正しいHTMLですか？
はい、HTML5では正しい書き方です。HTML 4には含まれていなかったため、古いコードでは代わりに'が使われています。現在のブラウザーではどちらも動作しますが、このページのエスケープ機能は、最も幅広い互換性を保つために'を出力します。
HTMLをエスケープすればXSSは防げますか？
通常の要素の内容や、引用符で囲んだ属性の中では、挿入された文章がマークアップになるのを防げます。しかし、scriptブロックの中、インラインのイベントハンドラー、style属性、hrefのようなURLの中では、エスケープしただけでは値は安全になりません。それぞれに専用のエンコードや検証が必要です。フレームワークに組み込まれたエスケープ機能を使い、できるだけ文字列からHTMLを組み立てないようにしましょう。
入力した文章はどこかに送信されますか？
いいえ。エスケープと復元はすべてお使いのブラウザーの中で実行され、貼り付けた内容がページの外に出ることはありません。
そもそもブラウザーにエンティティが必要な理由
- HTMLのパーサーは、<をタグの始まりとして、&を文字参照の始まりとして読み取ります。商品名やコードのサンプルにこれらの文字が含まれていると、ブラウザーが文章の一部を表示しなかったり、次のタグとくっつけてしまったり、最悪の場合は挿入されたマークアップを実行してしまったりします。これらをエスケープすれば、パーサーに対して、その文字を処理せずにそのまま表示するよう伝えられます。
- 目安となるルールは、テキストの中では&、<、>をエスケープし、属性値の中では使っている引用符もエスケープすることです。それ以外の文字は、使い勝手や文字コードの問題にすぎません。
CSSとJavaScriptでのエンティティ
- HTMLのエンティティが使えるのはHTMLの中だけです。スタイルシートでは、文字をバックスラッシュとその16進数のコードで書き表します。一覧表に疑似要素のアイコンや独自の箇条書き記号のためのCSSの列があるのは、このためです。JavaScriptの文字列で同じことをするには、\uの後に4桁の16進数を書くか、絵文字のようにU+FFFFを超える文字の場合は\u{...}と書きます。
- JavaScriptでtextContentを使って文章を設定する場合は、事前にエスケープしてはいけません。ブラウザーは最初から普通の文章として扱うため、エスケープするとエンティティがそのまま文字として表示されてしまいます。
すべて
エスケープ必須
空白と不可視文字
句読点
通貨
数学
矢印
記号
ギリシャ文字
絵文字
エスケープまたは復元
変換の方向
エスケープ
復元
属性モード（引用符もエスケープ）
ASCII以外をエンコード
名前を優先
入力
結果
結果をコピー
入れ替え
{label} {value}をコピー
コピーしました
HTMLエンティティ一覧
名前、記号、コードで検索
arrow、euro、2014、©
グループ
{n}個の記号。コードをクリックするとコピーできます。
記号
名前
数値
グループ
（空白）
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る