HTMLで特殊文字のエスケープ処理を行う方法【初心者向け】
初心者向けにHTMLで特殊文字のエスケープ処理を行う方法について解説しています。ブラウザ上では何が起きてるか分からないかもしれないですが、サイトのセキュリティ的にも大事な部分なので、ぜひ実際に書いて慣れていきましょう。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。
HTMLで特殊文字をエスケープする方法について解説しています。
特殊文字を表示したい際に便利な文字なので、書き方を覚えるというよりどんな種類があるのか知っておくだけでも役に立つでしょう。
そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
特殊文字のエスケープ処理を行う方法について詳しく説明していくね！
お願いします！
特殊文字とは
特殊文字とは、<>や”といった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デザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
