TechAcademy（テックアカデミー） Webデザインコース WebデザインHTMLHTMLで特殊文字のエスケープ処理を行う方法【初心者向け】
HTML

HTMLで特殊文字のエスケープ処理を行う方法【初心者向け】

初心者向けにHTMLで特殊文字のエスケープ処理を行う方法について解説しています。ブラウザ上では何が起きてるか分からないかもしれないですが、サイトのセキュリティ的にも大事な部分なので、ぜひ実際に書いて慣れていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLで特殊文字をエスケープする方法について解説しています。

特殊文字を表示したい際に便利な文字なので、書き方を覚えるというよりどんな種類があるのか知っておくだけでも役に立つでしょう。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

特殊文字とは

特殊文字とは、<>や”といったHTMLを書く際に使う記号や、©や£のような通常の文字とは異なる特別な文字のことを指します。

 

エスケープとは

エスケープとは、HTML上で特殊文字を期待通りに表示するために施す処理のことです。

特殊文字に指定されている文字は、割り当てられている記号を記述することで、表示することができます。

例えば、<は&lt;であったり、©は&copy;など、特殊文字には必ず該当する記号が割り当たっています。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

エスケープしない危険性

あなたがフォームなどで閲覧している人が文字を入力して送信するなどのサイトを作った場合があるとします。

この時、エスケープ処理を施さないことで、クロスサイトスクリプティング（XSS）という攻撃の標的にされることがあります。

詳細は省きますが、第三者が自由に入力できる部分がサイト内にあった場合は、エスケープ処理を怠らないようにしましょう。

 

実際に書いてみよう

それでは実際に書いてみましょう。

escape.html
----------------------------------------------------------
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
  </head>
  <body>
    <strong>この文字列は太くなります。</strong>
    <br />
    &lt;strong&gt;この文字は太くなりません。&lt;/strong&gt;
    <br />

    <h1>よく使う特殊記号</h1>

    &amp;(アンパサンド)
    <br />
    &lt;(小なり)
    <br />
    &gt;(大なり)
    <br />
    &quot;(ダブルクォーテーション)
    <br />
    &nbsp;（空白）
    <br />
    &copy;（コピーライト）
  </body>
</html>
----------------------------------------------------------

ブラウザで表示してみます。

 

それぞれの特殊記号が正常に表示されていることがわかります。

 

以上、特殊文字をエスケープする処理の流れを解説しました。特殊文字をブラウザ上に表示させたい場合は、参考にしてみてください。

現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。

独学に限界を感じている場合はご検討ください。

記事を検索

関連するキーワード

関連する記事

これだけは覚えておきたい！絶対パスと相対パスの違いとは【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの絶対パスと相対パスの違いについて解説します。 ...
HTML

HTMLでコメントを書く方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLでコメントを書く（コメントアウトする）方法につい...
HTML

アンケートなどに役立つ！HTMLでチェックボックスを作成する方法【初心者向け】

HTMLでチェックボックスを作成する方法
webページでよく見かけるチェックボックス。自分で作成するとなると一見難しそうですが、実はHTMLで簡単に書くことがで...
HTML

HTMLで丸数字を書く方法を現役エンジニアが解説【初心者向け】

HTMLで丸数字を書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTML...
HTML

Canvasを覚える！HTMLでアニメーションを作成する方法【初心者向け】

アニメーションをWebページで実装するには二つの方法があります。 一つはgifアニメーション画像を読み込む方法。 もう一つは、CanvasというHT...
HTML

読みやすいサイト設計を！HTMLで段落分けを行う方法【初心者向け】

HTMLで文章を記入していると段落分けをしたい場面が出てくることがあると思います。段落分けを効果的に使用することができれば、ユーザーにとって読みやすい文章を作成...
HTML

あわせてよく読まれている記事

JavaScriptでエスケープ処理を行う方法【初心者向け】

JavaScriptで書くエスケープ処理を行う方法について解説しています。 セキュリティ対策のためにも知っておきたい知識なので、書き方を覚えておきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   エスケープ処理(エスケープシーケンス)とは エスケープ処理（エスケープシーケンス）とは、JavaScriptで特殊な文字を入力する際に￥（円マーク）か\（バックスラッシュ）を前につけて表示する方法です。 ￥（円マーク）か\（バックスラッシュ）のどちらかというところですが、基本的には同じキーです。 設定されているフォントによって￥を押したら、\（バックスラッシュ）で表示される環境もありますし、￥のまま表示される環境もあります。   現在では、UTF環境が一般的だということもあり、￥のキーを押すことで、\（バックスラッシュ）で表示されます。 また、日本語キーボードでは￥キーですが、英語キーボードでは\（バックスラッシュ）キーを使用します。 何故、英語キーボードでは￥ではなく、\（バックスラッシュ）かというと、そもそも英語キーボードを使用する国の通貨が￥（日本円）では無いためです。   エスケープ処理（エスケープシーケンス）一覧 使用文字 エスケープシーケンス後の意味 \b バックスペース \t 水平タブ \v 垂直タブ \n 改行 \r 復帰 \f 改ページ \’ シングルクオーテーション \” ダブルクオーテーション \¥ ¥文字 \0 NULL文字 \xXX Latin-1文字（XXは16進数） \uXXXX Unicode文字（XXXXは16進数）   エスケープ処理の書き方 例えば、”1行目2行目”という文字列をデベロッパーツールのconsoleに表示してみましょう。 まずは、開業せずにそのまま表示します。 プログラム console.log("1行目2行目"); 表示結果 1行目2行目   次に、改行キーであるEnterを押して次のようなコードで実行してみましょう。 すると次のように文法エラーになってしまいます。 プログラム console.log("1行目 2行目"); 表示結果 Uncaught SyntaxError: Invalid or unexpected token   人間の目から見ると1行目と2行目の間には改行が入っていますが、コンピューターから見ると改行はなく、単に文法に間違いが有るように見えているようです。 そこで、エスケープ処理（エスケープシーケンス）を使用してみます。 すると表示結果のように、1行目と2行目の間に改行が入った状態で表示されます。 エスケープ処理（エスケープシーケンス）を行わないと、改行を表示することができませんでした。 プログラム console.log("1行目\n2行目"); 表示結果 1行目 2行目   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際にエスケープ処理（エスケープシーケンス）を書いてみよう シングルクォートの中にシングルクォートを表示 JavaScriptの文法上次のようにシングルクォートの中にシングルクォートを表示することはできません。 プログラム console.log('Tech's academy'); 表示結果 Uncaught SyntaxError: missing ) after argument list   通常はシングルクォートを文字列として使用したい場合は、次のようにダブルクオーテーションで囲む必要があります。 プログラム console.log("Tech's academy"); 表示結果 Tech's academy   この処理を、エスケープ処理（エスケープシーケンス）を使用して処理すると次のようになります。 プログラム console.log('Tech\'s academy'); 表示結果 Tech's academy   まとめ 人間の目からすれば、エスケープ処理（エスケープシーケンス）せずに書いても動く方が便利だと思えるかもしれません。 しかし、コンピューターにとっては、エスケープ処理（エスケープシーケンス）を行わないと、意図する処理を行ってくれません。 したがって、エスケープ処理（エスケープシーケンス）を理解することで、意図する処理ができるようになります。   また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。 プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。
JavaScript

いざという時に便利！HTMLで特殊文字を扱う方法【初心者向け】

HTMLで特殊文字を扱う方法について解説しています。コードをサイト上に表示させるために必要な知識になるので、いざという時に便利でしょう。 HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   特殊文字とは 特殊文字とは、「a」や「b」などとは少し違った特殊な文字のことを指します。 例えば”<“という文字を入力したいとしても、”<“は”<“という文字として認識されず、<div>や<p>などのタグの始めとして認識されてしまいます。 しかしそれでは”<“という文字を打つことはできません。 そのため”<“は特殊文字という部類で定義され、ある特殊な文字列を打ち込むことでそれがHTML内で”<“に変換され、それを表示するという仕組みになっています。   大石ゆかり 特殊文字って何ですか？ 田島悠介 要するに、タグそのものを表示したい場合どうするのか？ってことなんだよ。 大石ゆかり タグを書いても表示されるのは中身で、タグ自体は表示されませんね。 田島悠介 そうそう。そんな時に使うのが、特殊文字なんだ。とりあえず例を見てみよう。 大石ゆかり はい！   特殊文字の表記方法 特殊文字は&の後に特定の文字列を入力することで特殊文字として認識されます。 &quot; => “” &amp; => & 一見何を書いているのかわからず、最初は戸惑うことが多いと思います。 特にPHPなどのプログラミング言語と混ざって記入してある場合、何を意味するのかわからないと、コードを読むことができなくなってしまいます。 特殊文字はとても種類が多いですが、よく使用される文字は限られているので、その文字を覚えておくと良いでしょう。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう それでは実際に特殊文字を使用してみましょう。 &quot; => ダブルクォーテーション &amp; => & &lt; => 小なり &gt; => 大なり よく使用される特殊文字は上の4つです。 ぜひ覚えておくようにしましょう。   まとめ 今回は特殊文字について解説していきました。 特殊文字は一見マニアックな知識に感じますが、実際のデザインの現場では何度も出てくる場面があります。 とっつきにくそうでも覚えておけば、役に立つ事まちがいないのでぜひ勉強しておくようにしましょう。   大石ゆかり ltとgtについてはわかりました。タグに使われる文字をHTML上で表示したいときに使えますね。でも、＆(アンパサンド)は？ 田島悠介 ややこしいんだけど、特殊文字自体を表示したい場合に使うんだよ。 大石ゆかり HTMLとして特殊な役割がある文字を表示したい場合に使うのが特殊文字。その特殊文字を表示したい場合に使う特殊文字もあるんですね。複雑ですね。 田島悠介 上の例にあるように、ltやgtを入力すると、開始タグと終了タグの文字が表示されるよね。ただ、今度は＆lt;って文字を表示する際に困ってしまうんだ。そこで＆を特殊文字で表示するんだよ。   [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
HTML

Javaでエスケープ処理を行う方法【初心者向け】

この記事では、Javaでエスケープ処理を行う方法について解説します。 実際にプログラムを書いて説明しているので、ぜひ理解しておきましょう。   なお本記事は、TechAcademyのJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 エスケープ処理を行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   エスケープシーケンスとは Javaでは「”（＝ダブルクォーテーション）」で囲んだ内容を文字列とみなしますが、例えばこの「”」という記号そのものを出力したい場合どうすれば良いでしょうか？ 単純に「System.out.println(“””);」と書いてもエラーになってしまいます。これは、2番目の「”」が文字列の内容ではなく、終端を表す記号とみなされてしまうからです。 この問題を解消するために使用するのが「エスケープシーケンス」です。 上記の「”」の例であれば、「System.out.println(“\””);」とします。この「\”」というのがエスケープシーケンスです。この2文字で「”」という記号を表しています。 Javaでは「”」以外にも、改行やtab等、そのままでは文字列として扱えないものがあり、それぞれに対して「エスケープシーケンス」が用意されています。 （例）改行→「\n」、tab→「\t」   エスケープ処理とは プログラム内で使用できない文字を、代替の文字に置き換えることをエスケープ処理と言います。 前述のエスケープシーケンスを使用した文字の置換もエスケープ処理のひとつです。 エスケープシーケンスはJavaの制約に基づくものですが、仕様上の理由により独自の制限を設けたい場合もあります。 例えばJavaが出力したファイルを他のプログラムが読み込む様なシステムの場合、相手側プログラムの仕様に合わせてJava側が出力内容にエスケープ処理を施す必要があったりします。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう 下記のサンプルプログラムはエスケープシーケンスを使用して改行（\n）とタブ（\t）を出力します。 ひとつの文字列の中に改行とタブを連結して出力しています。 ソースコード package escapetest; public class EscapeSample { public static void main(String[] args) { EscapeSample escapeSample = new EscapeSample(); escapeSample.print(); } private void print() { StringBuilder sBuilder = new StringBuilder(); String h1 = "大見出し"; String h2 = "中見出し";
Java

JavaScriptで文字列を操作する方法【初心者向け】

JavaScriptについてプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptで文字列を使う方法について解説します。 また、入門向けにJavaScriptを学習できるサイトを紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   目次 JavaScriptで文字列を出力する JavaScriptで文字列を連結させる JavaScriptで特殊文字（エスケープシーケンス）を使う 　タブ（空白）：\t 　シングルコーテーション：\’ 　改行：\n   大石ゆかり 田島メンター！文字列について教えてほしいです。 田島悠介 文字列は必ずシングルコーテーションかダブルコーテーションで囲うというルールがあるんだよ。 大石ゆかり どちらでもいいんですか？何か違いはあるんでしょうか？ 田島悠介 違いを含めて、文字列について見てみよう！   JavaScriptで文字列を出力する JavaScriptで文字列を出力したいときは、「“　”（ダブルコーテーション）」か「‘　’（シングルコーテーション）」で囲います。どちらを使っても違いはないので、お好きなほうで構いません。   実際に「こんにちは」と出力してみます。 <!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”utf-8″> <title>はじめてのJavaScript</title> </head> <body> <script> var x; x = "こんにちは" document.write(x); </script> </body> </html>   また、「I’m happy」のように「’」を含んだ文字列を表示させたいときは、「” “」で囲むとバグらず表示されますので、上手に使い分けましょう。 <script> var x;
JavaScript

HTMLの特殊文字の〒マークを表示する方法を現役エンジニアが解説【初心者向け】

HTMLの特殊文字の〒マークを表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   HTMLの記述方法がそもそもわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 特殊文字の〒マークを表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   特殊文字の〒を表示してみよう！ 今回は、HTMLの特殊文字の〒マークを表示する方法についてみていきましょう。   特殊文字とは 特殊文字とは通常の半角英数字、ひらがな、カタカナ、漢字、ごく一部の記号を除いた特別な記号のことを指します。 この中には単位、郵便番号、数学などで登場する算術記号などが含まれるものです。 また、全ての文字を覚えておく必要はありません。   Googleで「任意の出したい記号」と「数値文字参照」、「html」と半角スペース区切りで入力し、検索し出た結果をコピー＆ペーストすると手間が省けます。 特殊文字表一覧のサイトをブックマークしておくと良いでしょう。   郵便番号の記号３種の出し方 「〒」これは、日本国内の住所の郵便番号の前に登場する記号です。 この記号は「ゆうびん」と入力し、文字変換したものをそのまま使用して良い記号になります。 Mac OSでも、Windows OSのどのバージョンでも文字化けすることはありません。 安心して使うことができますね！   しかし、〶（○の中に〒マークが入っている）、〠（キャラクターっぽい〒マーク）の場合は要注意です。 これらを入れる場合は、&から始まる「数値文字参照」または、「文字実体参照」を使いましょう。   以下、数値文字参照を使わない場合の表示です。MacとWindowsなど、端末によって変わります。 〒（一般的な郵便マーク） 〶（表示：○の中に〒マークが入っている） 〠（表示：キャラクターっぽい〒マーク）     注意：ちょっと特殊な〒マーク2種の表示は数値文字参照を使うこと！ 注意したいのは、〶（○の中に〒マークが入っている）、〠（キャラクターっぽい〒マーク）の表示の場合は、数値文字参照を使いましょう。 仮に使用した場合は、制作物の納品前にそういった記号が正しく表示されているのかを端末毎にチェックしてください。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう 〒 〶（表示：○の中に〒マークが入っている） 〠（表示：キャラクターっぽい〒マーク）   今回は、特殊な〒マークの表示、表示方法について紹介しました。   執筆してくれたメンター ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。 TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。   大石ゆかり HTMLの特殊文字の〒マークを表示する方法がよくわかったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

HTMLの特殊文字で摂氏温度記号を表示する方法を現役エンジニアが解説【初心者向け】

HTMLの特殊文字で摂氏温度記号を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 特殊文字で摂氏温度記号を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   特殊文字の摂氏温度記号を表示してみよう！ 今回は、HTMLの特殊文字の摂氏・華氏温度記号を表示する方法について見ていきましょう。   特殊文字とは 特殊文字とは、伝統的に使用される通常の半角英数字、ひらがな、カタカナ、漢字以外の文字の事を指します。 例えば、単位、郵便番号、数学などで登場する算術記号は全て特殊文字に含まれ、環境によっては上手く表示することができきないこともあります。 摂氏温度記号の出し方 摂氏温度記号は、20 ℃ と気温やお湯の温度などを表示させたい場合などに使用します。 また、摂氏温度記号は機種依存文字です。 「ど」を文字変換した全角の「℃」は、英語コンテンツでは表示してくれません。 「20ど」と入力し、文字変換したものをそのまま使用しても文字化けすることがあります。 入れる場合は、&から始まる「数値文字参照」、「文字実体参照」を使いましょう。 または、半角でそれぞれを記載するという方法もあります。（華氏温度はこちらを使います。） 北海道　 15 ℃／　15 ℃ 北海道 　15 °C／　59 °F   注意：摂氏温度の表示は数値文字参照を使うこと！ 注意したいのは、温度表示の場合は、数値文字参照を使うことです。 使用した場合は、上手く表示されないこともあるため、制作物の納品前にそういった記号が正しく表示されているか？を端末毎にチェックしておきましょう。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう 北海道　 15 ℃／　15 ℃ 東京　 15 °C／　59 °F 今回は、機種依存文字の摂氏温度の記号表示、表示方法について紹介しました。   執筆してくれたメンター ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。 TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。   大石ゆかり HTMLの特殊文字で摂氏温度記号を表示する方法が分かりやすくて良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。
HTML

WEEKLY RANKING

今さら聞けない！コマンドプロンプトの使い方【初心者向け】

意外と簡単？Photoshopで画像を切り抜く方法

【超便利！】Excel(エクセル)でカレンダーを作成する方法

社会人として恥ずかしくない！「当社・弊社・貴社・御社」の使い方

【困った！】いつの間にかローマ字入力が大文字になっていたときの対処法

スタイルシート（CSS）の基本的な書き方【初心者向け】

【例文あり】好印象を与える！年末年始の挨拶メールの書き方

言葉の意味をおさらいしてみよう！「各位」の正しい使い方と用例

Photoshopで画像の背景を透明（透過）にする方法【初心者向け】

今さら聞けない！GitHubの使い方【超初心者向け】

TechAcademy（テックアカデミー） Webデザインコース WebデザインHTMLHTMLで特殊文字のエスケープ処理を行う方法【初心者向け】