HTMLを使ったウェブページ作成では、特定の文字や記号をそのまま表示させるのが難しい場合があります。
たとえば、HTMLのタグに使われる「<」や「>」の記号は、普通に書いてしまうとブラウザがタグとして認識してしまうため、うまく表示されません。
そんなときに使うのが「エスケープ文字」です。
今回は、HTMLのエスケープ文字について、初心者にもわかりやすく解説し、よく使うエスケープ文字の一覧も紹介します。
エスケープ文字とは？
エスケープ文字とは、HTMLの中で特定の記号や文字を正しく表示するために使われる特殊な文字列のことです。通常、HTMLのタグとして使われる記号や、プログラムの一部と認識されるような記号をテキストとしてそのまま表示させたい場合、エスケープ文字を使います。
例えば、「<」は「<」、そして「>」は「>」という記号に変換されます。これを使うことで、HTMLタグを誤って解釈させないようにすることができます。
どうしてエスケープ文字が必要なの？
なぜエスケープ文字が必要かというと、ウェブページのHTMLコードは「タグ」と呼ばれる特殊な記号で構成されています。
例として、以下のようなテキストを表示したい場合を考えてみましょう。
htmlコードをコピーするこのページには<b>重要な情報</b>が含まれています。この場合、「<b>」と「</b>」はHTMLのタグとして認識され、「重要な情報」が太字で表示されます。
このタグの中に<>をいれると正しく表示されない場合があります。
htmlコードをコピーするこのページには<b><重要な情報></b>が含まれています。よく使われるエスケープ文字
では、具体的にどのようなエスケープ文字があるのかを見てみましょう。以下は、初心者が知っておくと便利なエスケープ文字の一覧です。
| エスケープ文字 | 表示される文字 | 説明 |
|---|---|---|
< | < | 小なり記号（左括弧） |
> | > | 大なり記号（右括弧） |
& | & | アンパサンド（＆） |
" | " | ダブルクォート（”） |
' | ' | シングルクォート（’） |
© | © | 著作権マーク（©） |
® | ® | 登録商標マーク（®） |
¥ | ¥ | 円記号（¥） |
これらのエスケープ文字を使うことで、HTMLコードの中でも記号や特殊文字をそのまま表示することができるようになります。
エスケープ文字の使い方
エスケープ文字の使い方は非常に簡単です。HTML文中で、通常表示できない記号や文字が出てきたら、その記号に対応するエスケープ文字を使うだけです。
例えば、「C++」というプログラム言語名をHTMLページで表示したい場合、プラス記号はプログラム的な意味を持つため、「C++」をそのまま書くと問題が生じることがあります。そこで「C++」を次のようにエスケープ文字を使って記述します：
C++これで、正しく「C++」が表示されます。このように、エスケープ文字を使うことで、HTMLの記号と区別して特定の文字や記号をページに表示させることができます。
どんなときにエスケープ文字を使うべきか？
エスケープ文字を使うべきタイミングはいくつかありますが、主に以下のような場面で必要になります。
- HTMLタグをそのまま表示させたいとき
例：コードスニペットや、タグ自体を説明したい場合。 - 特殊文字を表示させたいとき
例：著作権マーク（©）や商標マーク（®）などの記号を表示したいとき。 - プログラムコードを表示させたいとき
例：プラス記号（+）やアンパサンド（&）など、プログラムの一部として使われる文字をテキストとして表示したいとき。
エスケープ文字の注意点
エスケープ文字を使うときには、いくつかの注意点もあります。
HTMLエスケープ文字を使いこなすために
エスケープ文字は、初心者でも簡単に使える便利なツールです。ウェブページを作成する際には、必ず覚えておくとよいでしょう。特に、HTMLタグや特殊記号をテキストとして表示したい場面では非常に役立ちます。
今回紹介したエスケープ文字の一覧を参考に、実際のコードに取り入れてみましょう。もし、どうしてもエスケープ文字がうまく使えない場合は、他の方法（例えばコードブロックの利用など）を考えるのも一つの手です。
