HTMLで特殊文字のエスケープ処理を行う方法【初心者向け】
初心者向けにHTMLで特殊文字のエスケープ処理を行う方法について解説しています。ブラウザ上では何が起きてるか分からないかもしれないですが、サイトのセキュリティ的にも大事な部分なので、ぜひ実際に書いて慣れていきましょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
HTMLで特殊文字をエスケープする方法について解説しています。
特殊文字を表示したい際に便利な文字なので、書き方を覚えるというよりどんな種類があるのか知っておくだけでも役に立つでしょう。
HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
特殊文字とは
特殊文字とは、<>や”といったHTMLを書く際に使う記号や、©や£のような通常の文字とは異なる特別な文字のことを指します。
エスケープとは
エスケープとは、HTML上で特殊文字を期待通りに表示するために施す処理のことです。
特殊文字に指定されている文字は、割り当てられている記号を記述することで、表示することができます。
例えば、<は<であったり、©は©など、特殊文字には必ず該当する記号が割り当たっています。
[PR] HTML/CSSで挫折しない学習方法を動画で公開中
エスケープしない危険性
あなたがフォームなどで閲覧している人が文字を入力して送信するなどのサイトを作った場合があるとします。
この時、エスケープ処理を施さないことで、クロスサイトスクリプティング（XSS）という攻撃の標的にされることがあります。
詳細は省きますが、第三者が自由に入力できる部分がサイト内にあった場合は、エスケープ処理を怠らないようにしましょう。
実際に書いてみよう
それでは実際に書いてみましょう。
escape.html
----------------------------------------------------------
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<strong>この文字列は太くなります。</strong>
<br />
<strong>この文字は太くなりません。</strong>
<br />
<h1>よく使う特殊記号</h1>
&(アンパサンド)
<br />
<(小なり)
<br />
>(大なり)
<br />
"(ダブルクォーテーション)
<br />
（空白）
<br />
©（コピーライト）
</body>
</html>
----------------------------------------------------------
ブラウザで表示してみます。
それぞれの特殊記号が正常に表示されていることがわかります。
以上、特殊文字をエスケープする処理の流れを解説しました。特殊文字をブラウザ上に表示させたい場合は、参考にしてみてください。
現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。
また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。
独学に限界を感じている場合はご検討ください。
