エスケープ文字とは？特殊文字をテキスト表示させる方法を解説

HTMLで使用されるエスケープ文字は、特定の文字や記号（いわゆる特殊文字など）を表示するために使用されます。

HTMLにおいては、一部の文字をそのまま使用してしまうと、タグや構造に影響を与える可能性があります。

そのため、今回紹介する文字（＆ や ” など）を表示したい場合にはエスケープ文字を一緒に使用する必要があります。

エスケープ文字の種類一覧表

代表的なエスケープ文字には以下のものがあります。

エスケープ文字	実際に表示される文字	名称
&lt;	<	小なり記号
&gt;	>	大なり記号
&amp;	&	アンパサンド
&quot;	“	ダブルクォート
&apos;	‘	シングルクォート
&nbsp;	通常の空白文字とは異なり 改行や空白が無視されない空白を表示。	空白文字
&copy;	©	著作権記号
&reg;	®	登録商標記号
&trade;	™	商標記号
&euro;	€	ユーロ記号
&pound;	£	ポンド記号
&yen;	¥	円記号
&sect;	§	セクション記号
&hellip;	…	水平省略記号
&mdash;	—	ダッシュ
&ndash;	–	ハイフン
&deg;	°	度記号
&times;	×	乗算記号
&divide;	÷	除算記号
&Aacute;	Á	大文字のアキュート アクセント A
&agrave;	à	小文字のグレーブ アクセント a
&Eacute;	É	大文字のアキュート アクセント E
&euml;	ë	ダイアクリティカル マーク
&le;	≤	以下または等しい
&ge;	≥	以上または等しい
&frac12;	1/2	分数
&frac14;	1/4	分数
&frac34;	3/4	分数
&alpha;	α	ギリシャ文字アルファ
&beta;	β	ギリシャ文字ベータ
&gamma;	γ	ギリシャ文字ガンマ
&delta;	δ	ギリシャ文字デルタ
&epsilon;	ε	ギリシャ文字エプシロン
&pi;	π	ギリシャ文字パイ
&sigma;	σ	ギリシャ文字シグマ
&omega;	ω	ギリシャ文字オメガ
&mu;	μ	ギリシャ文字ミュー
&theta;	θ	ギリシャ文字シータ
&lambda;	λ	ギリシャ文字ラムダ
&xi;	ξ	ギリシャ文字クサイ
&rho;	ρ	ギリシャ文字ロー
&phi;	φ	ギリシャ文字ファイ

上記のエスケープ文字を使用することで、ブラウザはこれらの文字を通常のテキストとして解釈し、HTMLの構造に影響を与えません。

例えば、以下はHTMLコード内でタグを表示するためのエスケープ文字の使用例です。

<p>This is a &lt;p&gt; tag</p>

このコードは「This is a <p> tag」と表示されますが、実際には段落を示すPタグとして認識されません。※pはparagraghのpです。

ブラウザはエスケープ文字を解釈して<p>を通常テキストとして表示してくれます。

その他にも「&」を表示させたいときには「&amp;」という文字列にすれば「＆」をそのまま表示可能です。

また、HTML文字列をそのままテキストとして表示させる処理を「エスケープ処理」といいます。

エスケープ文字を使用する３つのメリット

HTMLの特殊文字をそのままテキストとして表示する場合はエスケープ文字を併用すれば解決できます。

①セキュリティ面の強化

特殊文字をエスケープ処理しないと、想定外のHTML構造になったり表示が発生したりする可能性があります。

適切にエスケープす処理させることで、テキストが意図した通りに表示され、デザインや構造に不測の問題が生じづらくなります。

②コードの可読性アップ

エスケープ文字を使用することで、特殊文字や予約語が文書内でどのように表示されるかが明確になります。

そのため、コードの読みやすさが向上し、他の開発者やメンテナンス担当者がコードを理解しやすくなります。

③バリデーションの簡略化

適切にエスケープ文字を使用すると、作成したHTMLが正しい構造を持っていることを確認しやすくなります。

特に動的コンテンツを含む場合、適切なエスケープ処理で、HTMLのバリデーションエラーを回避しやすくなります。

バリデーションとは、確認や検証を意味する英単語です。

転じて入力データやプログラミング言語、マークアップ言語のスクリプトが、正しい仕様にそって記述されているかを検証する作業を指します。

エスケープ文字のエスケープ処理を活用しましょう

エスケープ文字によるエスケープ処理は、Web制作において重要な知識です。

特殊文字をテキストとして表示させる場合に活用してみましょう。