HTML

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLで特殊文字をエスケープする方法についてテックアカデミーのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説しています。

特殊文字とは

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

エスケープとは

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

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

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

[PR] Webデザインで副業する学習方法を動画で公開中

主なエスケープ文字一覧

シングルクォーテーションのみ、数値表現でコードを表示しています。

記号	コード	意味
<	<	小なり
>	>	大なり
‘	'	シングルクォーテーション
“	"	ダブルクォーテーション
&	&	アンパサンド（アンド）
		空白
¥	¥	日本円
¢	¢	セント
£	£	ポンド
¦	¦	縦破線
©	©	コピーライト
®	®	登録商標
°	°	気温を表す度
±	±	プラスマイナス
×	×	掛け算の乗算
÷	÷	割り算の除算
µ	µ	マイクロ
·	·	中点
§	§	セクション
«	«	左引用
»	»	右引用
²	²	上付き2
³	³	上付き3
¹	¹	上付き1
¼	¼	4分の1
½	½	2分の1
¾	¾	4分の3

エスケープしない危険性

エスケープしないと、「意図しない挙動」が発生する危険性があります。

例えば、メールフォームなどで情報を送信するページを作ったとします。

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

XSS（クロスサイトスクリプティング）

XSS（クロスサイトスクリプティング）とは、サイトにスクリプトを埋め込み実行することです。

XSSの対策の1つとして、エスケープ処理を行っておくと良いです。

実際に書いてみよう

HTML上で特殊文字を扱う処理の使用例を見ていきましょう。

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 />
    &#39;（シングルクォーテーション）
    &nbsp;（空白）
    <br />
    &copy;（コピーライト）
  </body>
</html>

表示結果

解説

次のコードはHTMLでstrongタグが適用されるため、太字で表示されます。

<strong>この文字列は太くなります。</strong>

次のコードはエスケープ処理されるため、strongが文字列で表示されるだけで、太字にはなりません。

&lt;strong&gt;この文字は太くなりません。&lt;/strong&gt;

次のコードでは、エスケープ処理をすることで、以下の結果が表示されます。

&amp;(アンパサンド)
&lt;(小なり)
&gt;(大なり)
&quot;(ダブルクォーテーション)
&#39;（シングルクォーテーション）
&nbsp;（空白）
&copy;（コピーライト）

実行結果

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

以上、特殊文字をエスケープする処理の流れを解説しました。

特殊文字をブラウザ上に表示させたい場合は、参考にしてみてください。

内容が分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

つまずかず「効率的に」学びたい
副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTMLエラーチェッカーの使い方を現役デザイナーが解説【初心者向け】

HTMLエラーチェッカーの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、H...

HTML

IE8でHTML5で作ったwebサイトを表示する方法を現役エンジニアが解説【初心者向け】

IE8でHTML5で作ったwebサイトを表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...

HTML

HTMLの入力フォームにplaceholder属性を使ってユーザビリティを向上する方法を現役デザイナーが解説【

HTMLの入力フォームにplaceholder属性を使ってユーザビリティを向上する方法について解説します。また、HTMLの記述方法がわからない場合は、 ...

HTML

HTMLでformタグのaction属性に複数の送信先を指定する方法を現役エンジニアが解説【初心者向け】

HTMLでformタグのaction属性に複数の送信先を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向...

HTML

HTMLで横・縦に並べるレスポンシブデザインを上手に使う方法を現役エンジニアが解説【初心者向け】

HTMLで横・縦に並べるレスポンシブデザインを上手に使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...

HTML

HTMLで文字エンコードを指定する方法を現役デザイナーが解説【初心者向け】

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

HTML

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

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

JavaScriptで書くエスケープ処理を行う方法について解説しています。セキュリティ対策のためにも知っておきたい知識なので、書き方を覚えておきましょう。また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。なお本記事は、オンラインブートキャンプフロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。エスケープ処理(エスケープシーケンス)とはエスケープ処理（エスケープシーケンス）とは、JavaScriptで特殊な文字を入力する際に￥（円マーク）か（バックスラッシュ）を前につけて表示する方法です。￥（円マーク）か（バックスラッシュ）のどちらかというところですが、基本的には同じキーです。設定されているフォントによって￥を押したら、（バックスラッシュ）で表示される環境もありますし、￥のまま表示される環境もあります。現在では、UTF環境が一般的だということもあり、￥のキーを押すことで、（バックスラッシュ）で表示されます。また、日本語キーボードでは￥キーですが、英語キーボードでは（バックスラッシュ）キーを使用します。何故、英語キーボードでは￥ではなく、（バックスラッシュ）かというと、そもそも英語キーボードを使用する国の通貨が￥（日本円）では無いためです。エスケープ処理（エスケープシーケンス）一覧使用文字エスケープシーケンス後の意味 b バックスペース t 水平タブ v 垂直タブ n 改行 r 復帰 f 改ページ ‘ シングルクオーテーション “ ダブルクオーテーション ¥ ¥文字 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] Webデザインで副業する学習方法を動画で公開中実際にエスケープ処理（エスケープシーケンス）を書いてみようシングルクォートの中にシングルクォートを表示 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

JavaScriptでHTMLのエスケープ処理を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptでHTMLのエスケープ処理を行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。目次エスケープ処理とはエスケープ処理が必要になる状況 HTMLのエスケープ処理を行う方法実際に書いてみようまとめエスケープ処理とはエスケープ処理とは、そのままでは意図した文字列を表現できない場合に使用する、代替文字列処理のことです。通常、JavaScriptからHTML画面に文字列を表示させる場合、「こんにちは」という文字はそのまま画面に「こんにちは」と表示されます。ところが、ある特殊な状況で「<p>こんにちは</p>」と表示させようとした場合、画面にそのまま文字列を表示させることができないケースがあります。このような場合、<p>の代わりに次のような文字列を入力すると、HTMLデコードにより<p>に変換されます。 HTMLタグ文字列のエスケープ処理例 ( JavaScript ) <p> // HTMLデコード時に、<p>に変換される [PR] Webデザインで副業する学習方法を動画で公開中エスケープ処理が必要になる状況 JavaScirptからのHTML要素の追加処理 JavaScriptで生成したHTMLコードを動的に画面表示する場合に、HTMLコードのエスケープが必要になる場合があります。例えば、以下のようにjQueryのappendメソッドを使うことで、画面に<p>タグのDOMを動的に追加し、文字列を表示させることができます。 JavaScript ( jQueryを利用 ) $("#divArea").append('<p id="pdom">こんにちは</p>'); HTML <p class="title">Hello TechAcademy !</p> <div id="divArea"></div> 画面表示1 この時、appendの引数で指定した<p id=”pdom”>は画面上でpタグとして扱われ、「こんにちは」の文字列はp要素として画面表示されます。ところが、次のようなコードでHTMLにDOMを追加すると、意図しない画面表示となります。 JavaScript ( jQueryを利用 ) $("#divArea").append('<p id="pdom">こんにちは、<p>タグの解説をします。</p>'); 画面表示2 同じ方式で画面に<p>という文字列を表示させようとしても、<p>はHTMLタグとしてDOMに変換されてしまうため、画面表示させることができません。このような時に、HTMLエスケープ処理が必要となります。 JavaScriptとHTMLは別々のファイルでコーディングするのが通常ですが、SPAのようにAjaxを多用するアプリケーションの場合は、APIから動的に取得したデータをJavaScript側で生成したDOMにセットした後、HTMLに追加して動的に画面表示させるため、JavaScript側でのHTMLエスケープが必要になるんですね。エスケープ処理が必要にならない状況 JavaScript側から単に画面に文字列を表示させたい場合、エスケープ処理は必要ありません。例えば、このような場合です。 JavaScript ( jQueryを利用 ) $("#area2").text("<p>タグの解説をします"); HTML <div id="area2"></div> 画面表示3 このようにDOM操作時においても、多くの場合エスケープ処理を必要としませんのでご安心ください。本記事では、JavaScript側からHTMLのDOM要素を生成して追加レンダリングするという特殊な状況を前提としています。大石ゆかり JavaScriptなのに、HTMLエスケープが必要な理由がわかりました。田島悠介エスケープ処理を使うケースは少ないけど、覚えておくと便利だよ。 HTMLのエスケープ処理を行う方法 HTMLの仕様で定められた特殊な文字列で<p>などの文字列を置き換えることにより、エスケープ処理を行うことができます。この特殊な文字列は「エスケープシーケンス」と呼ばれています。代表的なHTMLエスケープシーケンスこの３つを使うだけで、DOM追加時のエスケープ処理としては十分でしょう。エスケープ対象コードエスケープシーケンス説明 < < タグ構成記号の左側部分 > > タグ構成記号の右側部分 “ " ダブルクォーテーション HTMLエスケープシーケンス利用例 JavaScriptから追加したDOM要素で「こんにちは、<p>タグの解説をします」と表示できるようなコードを見てみましょう。 JavaScript ( jQueryを利用 ) $("#divArea").append('<p id="pdom">こんにちは、<p>タグの解説をします</p>'); HTML <p class="title">Hello TechAcademy !</p> <div id="divArea"></div> 画面表示4 <p>タグのDOMを動的追加しながら、同時にDOM内にセットした<p>の文字列表示に成功しています。実際に書いてみよう今回の解説で登場した、画面を表示・操作可能なサンプルプログラムをご紹介します。実際に動かして、エスケープ処理を成功させてみましょう。画面にはボタンが2つ用意してあり、「DOMを追加」ボタンを押下するとHTMLエスケープが必要なDOM追加処理が実行できるようになっています。また、「既存DOMを操作」のボタンを押下すると、HTMLエスケープが不要な場合の操作を検証することができます。 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p class="title">Hello TechAcademy !</p> <div

JavaScript

Javaの正規表現のエスケープ処理について現役エンジニアが解説【初心者向け】

Javaの正規表現のエスケープ処理について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。田島悠介今回は、Javaに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介正規表現のエスケープ処理について詳しく説明していくね！大石ゆかりお願いします！目次正規表現のルールとは Javaで正規表現を扱う方法エスケープ処理とは正規表現のエスケープ処理を実装してみようまとめ正規表現のルールとは正規表現とは文字列のパターンを一つの形式でまとめて表現するために使うものです。郵便番号や電話番号などを表すことができ任意の文字列から特定の文字列を取得したり、一致しているかを判定したりする際に使います。正規表現を作成する時には以下のルールがあります。以下に示す特殊文字を使用する特殊文字以外の文字は、その文字自体を照合する大カッコ([])で囲まれた文字セットは、そのセット内の任意の文字を照合する 1文字の正規表現を表します。例えば[abc]と記述すればaもしくはbもしくはcと一致することを表します正規表現の特殊文字及び記号には以下のようなものがあります。特殊文字及び記号記号の説明 . 任意の1文字。改行文字は除く。 * 直前の1文字の0回以上の繰り返しと一致 ^ 行の先頭 $ 行の末尾 [ ] カッコ内の任意の1文字と一致。「-」で範囲指定可。 [^ ] カッコ内の任意の1文字と不一致。「-」で範囲指定可。 + 直前の文字の1個以上の繰り返しと一致 ? 直前の文字が0個または1個の場合に一致 { } カッコ内の数値の繰り返しと一致 | 直前、直後どちらかのパターンに一致 [PR] Webデザインで副業する学習方法を動画で公開中Javaで正規表現を扱う方法 Javaで正規表現を使うためには以下のように記述します。 Pattern Patternの変数 = Pattern.compile(正規表現); Matcher Matcherの変数 = Patternの変数.matcher(比較対象文字列); java.util.regexパッケージにあるPatternクラスとMatherクラスを使うことで正規表現を使って処理をすることができます。最初にPatternクラスをcompileクラスの引数に正規表現を設定することで正規表現を使用する準備をします。次に先ほど作成したPatternクラスのオブジェクトからmatcherメソッドを呼び出し、引数として正規表現を使って調べたい文字列を設定します。戻り値としてMatcherクラスのオブジェクトを返すためMatherクラスの変数を用意しておきます。 matcherメソッドを使うことで文字列を正規表現に一致する部分に分けることができるため一つの文字列の中に複数正規表現に一致する場合でも調べることができます。エスケープ処理とは特殊文字を使うことで正規表現を表すことができます。しかし、特殊文字を正規表現としてではなく、文字として表したい時にはエスケープ処理をする必要があります。エスケープ処理は以下のようにします。特殊文字「」を前に付けることで正規表現としての特殊文字ではなく、普通の文字として扱うことができます。しかし実際には「」は文字列において特殊な意味を持つため「」に対してもエスケープ処理が必要になるため \特殊文字という形で記述します。正規表現のエスケープ処理を実装してみようでは正規表現のエスケープ処理を実装してみましょうソース import java.io.IOException; import java.io.IOException; import java.util.regex.Matcher; import java.util.regex.Pattern; public class MainClass { public static void main(String[] args) throws IOException { String str01 = "\..."; String str02 = ".da.fb.rd"; Pattern p = Pattern.compile(str01); Matcher m =

Java

Pythonのglobモジュールで特殊文字をエスケープする方法を現役エンジニアが解説【初心者向け】

Pythonのglobモジュールで特殊文字をエスケープする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。 Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Python講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Pythonのglobモジュールで特殊文字をエスケープする方法について詳しく説明していくね！大石ゆかりお願いします！目次 globモジュールとは globモジュールで特殊文字をエスケープする方法実際に書いてみようまとめ globモジュールとは globモジュールはPythonの標準ライブラリの1つです。指定された条件に基づきファイルやフォルダの一覧を返します。例えばtmpというフォルダに3つのファイルが格納されているとしましょう。 tmp test.png test1.txt text2.txt tmpフォルダのファイルを全て列挙するにはglobのglob()関数を使用します。 import glob glob.glob('./tmp/*') 実行結果は以下のとおりです。 ['./tmp\test.png', './tmp\test1.txt', './tmp\test2.txt'] 条件の指定方法はUnixシェルというもので使用されているルールに基づいています。いくつか例をあげてみましょう。 ./ ：現在のフォルダ ../ ：1つ上の階層のフォルダ * ：全てのフォルダやファイル *.txt ：拡張子が txt のファイル UnixシェルはMacであればTerminalで起動できます。Windowsの場合はコマンドプロンプトやPowerShellが該当しますがUnixシェルと若干ルールが異なるため、注意しましょう。 globについて、詳しくは公式サイトも参考にしてください。 glob — Unix形式のパス名のパターン展開 [PR] Webデザインで副業する学習方法を動画で公開中globモジュールで特殊文字をエスケープする方法さて、次に[tmp] というフォルダに3つのファイルが格納されているとしましょう。 [tmp] test.png test1.txt text2.txt 先ほどと同様に [tmp] フォルダのファイル一覧を列挙しようとします。 import glob glob.glob('./[tmp]/*') 実行結果は以下のようになります。想定した結果と異なりました。 [] これはglobの条件指定が「正規表現」と呼ばれる指定方法に対応しているため、正規表現で使用される文字が特殊文字とみなされてしまうためです。正規表現で […] は鉤括弧の中のいずれか1文字を表します。これを回避するには glob.escape() 関数を使用します。 glob.escape('[tmp]') 実際に書いてみようそれでは実際に glob.escape() 関数を使って[tmp]フォルダのファイル一覧を列挙してみましょう。 import glob glob.glob(glob.escape('[tmp]') + '/*') 実行結果は以下のとおりです。今度は正しくファイル一覧を列挙できました。 ['[tmp]\test.png', '[tmp]\test1.txt', '[tmp]\test2.txt'] まとめ今回の記事ではglobモジュールで特殊文字をエスケープする方法を学習しました。監修してくれたメンター太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア。普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、Pythonを使った人工知能（AI）や機械学習の基礎を習得できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

Python

JavaScriptでカンマをエスケープする方法を現役エンジニアが解説【初心者向け】

JavaScriptでカンマをエスケープする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介カンマをエスケープする方法について詳しく説明していくね！大石ゆかりお願いします！目次エスケープとはカンマをエスケープする方法実際に書いてみようまとめエスケープとは HTMLの要素は以下のように記述します。 <input type="text" id="text1"> HTMLの要素を記述する「<」などの文字は、そのままではHTMLの記述として扱われてしまうため使用できません。そこで別の文字に置き換えて使用することになります。このように、ある環境下(今回の場合はHTML)において使用できない文字を使用できる文字に変換することを「エスケープ」と呼びます。HTMLでは「<」「>」「”」「’」「&」を特殊文字と呼び、それぞれ以下の文字にエスケープして使用します。実際の文字エスケープした文字 < < > > “ " ‘ ' & & 特殊文字について、詳細は以下の記事も参考にしてください MDN – HTMLを始めよう – 実体参照:HTMLに特殊文字を含める [PR] Webデザインで副業する学習方法を動画で公開中カンマをエスケープする方法特殊文字以外以外でもエスケープした形式で表記することができます。例えばカンマは「,」で表記できます。HTMLにおけるエスケープ文字一覧については以下のページを参考にしてください Hypertext Markup Language – 2.0 – The HTML Coded Character Set 実際に書いてみよう今回のサンプルプログラムでは JavaScript で特殊文字とカンマをエスケープする方法について確認します。方法としては変換パターンを定義し、for構文で1つずつ該当する文字を変換しています。なお変換処理はreplace()を使用して正規表現パターンで行っています。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <div id="div1"></div> <script type="text/javascript" src="main.js"></script> </body> </html> main.js // 変換パターンの定義 const pattern = { "&" : "&", "<" : "<", ">" : ">", '"' : """,

JavaScript

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

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

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

目次

特殊文字とは

エスケープとは

主なエスケープ文字一覧

エスケープしない危険性

XSS（クロスサイトスクリプティング）

実際に書いてみよう

HTML

表示結果

解説

実行結果

HTMLを学習中の方へ

関連するキーワード

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

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

JavaScriptでHTMLのエスケープ処理を行う方法を現役エンジニアが解説【初心者向け】

Javaの正規表現のエスケープ処理について現役エンジニアが解説【初心者向け】

Pythonのglobモジュールで特殊文字をエスケープする方法を現役エンジニアが解説【初心者向け】

JavaScriptでカンマをエスケープする方法を現役エンジニアが解説【初心者向け】

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

TechAcademyから
現役エンジニアの方へ
お知らせ