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

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

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

本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。

目次

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

特殊文字とは

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

 

エスケープとは

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

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

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

 

[PR] Webデザインで副業する方法とは

主なエスケープ文字一覧

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

記号 コード 意味
< &lt; 小なり
> &gt; 大なり
‘ &#39;
シングルクォーテーション
“ &quot;
ダブルクォーテーション
& &amp;
アンパサンド（アンド）
&nbsp; 空白
¥ &yen; 日本円
¢ &cent; セント
£ &pound; ポンド
¦ &brvbar; 縦破線
© &copy; コピーライト
® &reg; 登録商標
° &deg; 気温を表す度
± &plusmn; プラスマイナス
× &times; 掛け算の乗算
÷ &divide; 割り算の除算
µ &micro; マイクロ
· &middot; 中点
§ &sect; セクション
« &laquo; 左引用
» &raquo; 右引用
² &sup2; 上付き2
³ &sup3; 上付き3
¹ &sup1; 上付き1
¼ &frac14; 4分の1
½ &frac12; 2分の1
¾ &frac34; 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の仕様に関連するW3Cについて現役デザイナーが解説【初心者向け】

HTMLの仕様に関連するW3Cについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HT...
HTML

HTMLで画像の下に文字を入れる方法を現役エンジニアが解説【初心者向け】

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

HTMLのinput要素に入力した文字を太字にする方法を現役エンジニアが解説【初心者向け】

HTMLのinput要素に入力した文字を太字にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

図形が描ける！HTML5のcanvasの書き方【初心者向け】

HTML5で使うcanvasの書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ブラウザ上で絵...
HTML

HTMLでよく使う数学記号を現役デザイナーが解説【初心者向け】

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

HTML5の非推奨要素/属性を現役エンジニアが解説【初心者向け】

HTML5の非推奨要素/属性について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   ...
HTML

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

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

PHPのエスケープ処理について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次特殊文字とはエスケープとは主なエスケープ文字一覧エスケープしない危険性実際に書いてみようHTMLを学習中の方へ そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPでダブルクォーテーションを表示しようとしたらエラーがでます。どうしたらいいですか？ ソースコード： <?php echo "私は"りんご"が好きです"; ?> エラー画面： PHP Parse error: syntax error, unexpected identifier "りんご", expecting "," or ";" in /workspace/Main.php on line 2 田島悠介 PHPでのダブルクォーテーションは「文字列の始まりや終了」を表す特別な意味がある記号だから、そのままでは表示できないんだ。 ダブルクォーテーションのような、特別な記号の働きをなくすエスケープ処理が必要だね。 大石ゆかり エスケープ？何の処理ですか？ 田島悠介 エスケープ処理をすると機能を無効にしたり、違う機能をさせたりできるんだ。 「エスケープ」の英語には「脱出する」という意味があるから、本来の機能から「脱出」させるのがエスケープ処理と覚えるのもいいね。 大石ゆかり そういえば、スマホのゲームに「エスケープ」ってタイトルが付いたゲームがありましたけど脱出ゲームでしたね。 田島悠介 プログラミング言語でのエスケープ処理には特殊記号を表示することと、HTMLタグなどの命令を無効にする2つの役割があるんだよ。 大石ゆかり そうなんですね。その「エスケープ処理」について教えてください！ 田島悠介 じゃあ、特殊記号を表示させる方法から見ていこうか。   この記事は、エスケープ処理の概要や、PHPプログラムでエスケープ処理を行う方法について解説しています。PHPを使用した開発にまだ慣れていないという方でも、理解できる内容になっています。 エスケープ処理とは エスケープ処理とは、特殊記号（あるいはタグなどの命令）で行われる処理を回避して単なる文字として表示したり、逆に普通の文字に改行などの特別な機能を持たせます。 たとえば、「”」（ダブルクォーテーション）をPHPのコードから文字列として表示させたい場合、通常なら「”」は文字列の始まりか終わりを指す特殊記号なのでPHPでは表示ができません。 特殊記号を表示するには、バックスラッシュ(\)または円記号に続けて特殊記号を記述します。 バックスラッシュのようなエスケープ処理に使う文字をエスケープ文字といいます。 エスケープ処理には特殊記号を表示させるだけでなく、HTMLコードやJavaScriptの命令を無効化して安全に表示する使い方もあります。 このようなエスケープ処理はPHPに限らず、他のプログラム言語でも共通に存在する処理です。 ※バックスラッシュ(\)を入力しても円記号(¥)がそのまま表示される場合もありますが、PHPでは円記号はバックスラッシュと同じ役割です。 ※ダブルクォーテーションをWebページ上に表示するには、HTMLの特殊文字コード「&quot;」を使う方法もあります。   バックスラッシュの入力方法について Windowsで標準的なキーボード配列の場合、バックスラッシュ(\)は日本語キーボードだとバックスペースキーの左側のキー（キーボードの刻印は「¥」）を押すか、右下にある「\」キー（日本語かな表記だと「ろ」の刻印のキー）を押します。 ※Windowsでは使用しているアプリやフォント（書体）により、バックスラッシュが円記号で表示される場合があります。 ※バックスラッシュの入力はPHPの命令と同じように漢字入力オフ（漢字が入力できない状態）で入力してください。 ※URLで使われるスラッシュ(/)と、エスケープ文字のバックスラッシュ(\)は違う記号なので注意してください。   またMacの場合だと、「option」キーを押しながら右上の「¥」キーを押すだけで、半角のバックスラッシュが入力できます。 【参考】文字列の囲み方 PHPで文字列を囲むには、(“)ダブルクォーテーションで囲む方法と(‘)シングルクォーテーションで囲む方法があります。 (“)ダブルクォーテーションを文字列の中で使用する場合、(‘)シングルクォーテーションで囲んで「’私は”りんご”が好きです’」のように指定します。 違う記号で囲む方法は、コードの中で文字列を囲む記号が統一できないので、エスケープ処理をするのがおすすめです。   特殊記号を表示する PHPでダブルクォーテーションを含んだ文字列をバックスラッシュでエスケープして表示します。 サンプルコード ダブルクォーテーションを含んだ「私は”りんご”が好きです」という文章を表示します。 ソースコード <?php echo "私は\"りんご\"が好きです"; ?> 実行結果 解説 上記のプログラムでは、「”」の前にバックスラッシュ(\)を使用して「”」を単に文字として扱うようにしています。 このようにダブルクォーテーションのような特別な意味を持つ文字の前に「\」のエスケープ文字を使用して「文字列の開始と終了」という特別な効果を打ち消す処理がエスケープ処理です。   エスケープシーケンス 上記のように、特殊な記号を文字として出力するためにエスケープ文字を使用した文字の組み合わせをエスケープシーケンスといいます。 エスケープシーケンスを使用することで、文字列の途中で「改行」したり「タブ」を挿入したりといった特殊な処理を行うことも可能です。 エスケープシーケンスを有効にするにはダブルクォーテーションで文字列を囲みます。 以下は、主なエスケープシーケンスの一覧です。 \n 改行 \’ シングルクォーテーション(‘) \” ダブルクォーテーション(“) \¥ 円記号 \$ ドル記号 \t 水平タブ \\ バックスラッシュ ※PHPの他のエスケープシーケンスについて、詳しくは公式のドキュメント「エスケープシーケンス」をご覧ください。 ※エスケープシーケンスが含まれた文字列をシングルクォーテーションで囲むと、「\’」「\\」以外のエスケープシーケンスは機能せずエスケープ文字が表示されてしまいます。   エスケープシーケンスを使った例 それでは、実際にエスケープシーケンスを使用する例を見ていきましょう。 サンプルコード エスケープシーケンスを使った例として、以下の記号の表示をしてみましょう。 (‘)シングルクォーテーション 改行 タブ ドル記号 バックスラッシュ ソースコード //preタグで通常のテキストとして表示 echo "<pre>"; // ダブルクォーテーションの表示 echo 'PHPの文字列は「"」か「\'」で囲みます。'; // 改行 echo "\n"; echo "\nりんご\nみかん\nれもん\n"; echo "\n"; // タブ echo "1\t2\t3\n"; echo "りんご\tみかん\tれもん\n"; echo "\n"; // ドル記号 echo "りんごの価格：\$1\n"; echo "\n"; //バックスラッシュ echo "PHPで改行するには「\\n」と記述します"; //preタグの終わり echo "</pre>"; 実行結果 解説 2行目のpreタグは出力した改行などをHTML表示でも反映させるためのタグです。 5行目では文字列をシングルクォーテーションで囲っているのでダブルクォーテーション(“)はそのまま表示でき、シングルクォーテーションはエスケープシーケンスで表示します。 8から10行目でエスケープシーケンス「\n」により文字列の途中で改行しています。 13と14行目は文字をそろえる時に便利なタブ文字「\t」（一定間隔の空白を空ける文字）を入力しているので、数字とフルーツの名前がそろっています。 18行目は変数名などで使われるドル記号($)をエスケープして表示しています。 また22行目にあるように、バックスラッシュ（または円記号）自身を表示するときは「\\」と記述します。 ※シングルクォーテーションで文字列を囲ったときに機能するエスケープシーケンスは、「\’」と「\\」だけです。   [PR] Webデザインで副業する方法とはHTMLタグのエスケープ(htmlspecialchars) エスケープ処理の中にはHTMLタグを無効化する処理も含まれます。 たとえば、エスケープ処理をしていないフォームに「<script>alert(‘Hello!’)</scprit>」と入力すると、入力された文字を表示するときにアラート画面を表示するJavaScriptがそのまま実行されてしまう可能性があります。 エスケープ処理を行うとタグで使われるHTMLの命令であるHTMLエンティティに変換されるので「<」や「>」などの記号は単なる文字として表示する「&lt;」「&gt;」に変わります。 PHPでHTMLタグをエスケープ処理するにはhtmlspecialchars関数を使います。 ※HTMLエンティティとは、アンパサンド(&)で始まりセミコロン(;)で終わる記号を表示するHTMLの命令を表す文字です。たとえばコピーライトの記号「©」を表示させるHTMLエンティティは「&copy;」です。 ※エスケープ処理する関数は、他に特殊記号なども変換できるhtmlentities関数やタグを取り除くstrip_tags関数などもあります。   書式 エスケープ処理された文字 = htmlspecialchars( 対象文字列 ); htmlspecialchars関数の第1引数には、エスケープ処理したい文字列を指定します。 ※第2引数は省略できますが、ダブルクォーテーションなどを変換するかどうかなどの変換パターンを指定します。詳しくは公式ドキュメント「PHP: htmlspecialchars – Manual」のパラメータflagsの項目をご覧ください。 ※第3引数も省略できて、文字を変換するときの文字コードを指定します。   サンプルコード HTMLタグを含んだ文字列「<b>太字</b><br>」をhtmlspecialchars関数でエスケープ処理して、HTMLタグとして認識されない文字（HTMLエンティティ）に変換します。 ソースコード <?php //HTMLタグをそのまま表示（太字になる） $tag = "<b>太字</b><br>"; echo $tag; //HTMLタグをエスケープして表示（HTMLエンティティに変換される） $tag_escape = htmlspecialchars($tag); echo $tag_escape; ?> 実行結果 解説 変数 $tagを表示すると、HTMLタグが有効なので<b>タグが有効になり太字で表示され<br>タグで改行されます。 htmlspecialchars関数にエスケープ処理したい変数 $tagを渡します。 エスケープ処理されて「<」「>」の記号がHTMLエンティティに変換され、変数 $tagの文字列は「&lt;b&gt;太字&lt;/b&gt;&lt;br&gt;」になります。 エスケープ処理された変数 $tag_escapeを表示するとHTMLエンティティに変換されているので、太字にも改行にもならず単なる文字として表示されます。   まとめ バックスラッシュ(\)に続けて記述されたエスケープシーケンスを使用することで、特別な効果を持つ「’」や「$」を文字として出力したり、改行やタブのような特殊な処理を行えます。 HTMLタグを無効にするhtmlspecialchars関数でエスケープ処理することで安全な表示が行えます。 エスケープ処理は実務でもよく使いますし、PHP以外のプログラム言語でも使用する処理です。 エスケープ処理とは何か、その使用方法について確実にマスターして実際の開発に役立てましょう。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   PHPを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
PHP

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

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

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

JavaScriptでHTMLのエスケープ処理を行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   目次 エスケープ処理とは エスケープ処理が必要になる状況 HTMLのエスケープ処理を行う方法 実際に書いてみよう まとめ エスケープ処理とは エスケープ処理とは、そのままでは意図した文字列を表現できない場合に使用する、代替文字列処理のことです。 通常、JavaScriptからHTML画面に文字列を表示させる場合、「こんにちは」という文字はそのまま画面に「こんにちは」と表示されます。ところが、ある特殊な状況で「<p>こんにちは</p>」と表示させようとした場合、画面にそのまま文字列を表示させることができないケースがあります。 このような場合、<p>の代わりに次のような文字列を入力すると、HTMLデコードにより<p>に変換されます。 HTMLタグ文字列のエスケープ処理例 ( JavaScript ) &lt;p&gt;  // 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追加時のエスケープ処理としては十分でしょう。 エスケープ対象コード エスケープシーケンス 説明 < &lt; タグ構成記号の左側部分 > &gt; タグ構成記号の右側部分 “ &quot; ダブルクォーテーション HTMLエスケープシーケンス利用例 JavaScriptから追加したDOM要素で「こんにちは、<p>タグの解説をします」と表示できるようなコードを見てみましょう。 JavaScript ( jQueryを利用 ) $("#divArea").append('<p id="pdom">こんにちは、&lt;p&gt;タグの解説をします</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

HTMLで蛍光ペンのようなマーカーを作成する方法を現役デザイナーが解説【初心者向け】

HTMLで蛍光ペンのようなマーカーを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 蛍光ペンのようなマーカーを作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   蛍光ペンのマーカー例 テキストの大事な所や目立たせたい所に、蛍光ペンのマーカーで引いたようなラインをHTMLとCSSで簡単に表現することができます。spanタグやstrongタグにクラス名を付けて使用しますが、特にstrongタグは、見た目にも検索エンジンにもテキストの重要性を伝えることができます。   太さと色を変える方法 CSSでクラス名を付けて、「linear-gradient」属性を使用します。 ラインの太さを変える transparentの後の「%」の値で太さを設定します。大きい値にすると、マーカーのラインは細くなり、小さい値にすると太くなります。100％にすると、マーカーのラインは消えてしまいます。0%～95%の値がおすすめです。 ラインの色を変える 「#」で始まる6桁のカラーコードで色を設定します。こちらは検索して調べると出てくるので、覚える必要はありません。   [PR] Webデザインで副業する方法とは蛍光ペンのマーカーをひいてみよう 太さ0%のマーカー HTML 吾輩は猫である。<strong class="marker_line0">名前はまだ無い。</strong> CSS .marker_line0 { background:linear-gradient(transparent 0%, #fec1fe 0%); } 太さ20%のマーカー HTML 吾輩は猫である。<strong class="marker_line20">名前はまだ無い。</strong> CSS .marker_line20 { background:linear-gradient(transparent 20%, #fec1fe 0%); } 太さ40%のマーカー HTML 吾輩は猫である。<strong class="marker_line40">名前はまだ無い。</strong> CSS .marker_line40 { background:linear-gradient(transparent 40%, #fec1fe 0%); } 太さ60%のマーカー HTML 吾輩は猫である。<strong class="marker_line60">名前はまだ無い。</strong> CSS .marker_line60 { background:linear-gradient(transparent 60%, #fec1fe 0%); } 太さ80%のマーカー HTML 吾輩は猫である。<strong class="marker_line80">名前はまだ無い。</strong> CSS .marker_line80 { background:linear-gradient(transparent 80%, #fec1fe 0%); }   See the Pen 蛍光マーカー 太さ by HO-Cosmos (@ho-cosmos) on CodePen. ピンクのマーカー HTML 吾輩は猫である。<strong class="marker_pink">名前はまだ無い。</strong> CSS .marker_pink { background:linear-gradient(transparent 60%, #fec1fe 0%) }; 黄色のマーカー HTML 吾輩は猫である。<strong class="marker_yellow">名前はまだ無い。</strong> CSS .marker_yellow {
HTML

HTMLで強調タグと区切り線を使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの「強調タグ」と「区切り線」について解説します。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次特殊文字とはエスケープとは主なエスケープ文字一覧エスケープしない危険性実際に書いてみようHTMLを学習中の方へ そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 強調タグと区切り線を使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   強調タグ HTMLでは文章を記述する際に、タグを使って重要な部分を強調することが可能です。 強調タグを使うことにより、文章中で何が重要であるかを読み手に伝えることができます。 また、コンピューターやGoogleの検索エンジンなどに対しても、文書のなかで何が重要であるかを認識させることができます。 今回は代表的な強調タグである「emタグ」と「strongタグ」を紹介します。   強調を示すemphasisタグ 主に文脈のなかで強調しておきたい部分を<em> 〜 </em>で囲んで示します。 囲んだ部分は斜体で表示されるようになります。 タグ名の「em」は、「emphasis = 強調」の略語になります。   以下の例を見てみましょう。 <p>TechAcademyでは<em>プログラミング教室</em>を開いています</p> <em> 〜 </em>で囲んだ部分が斜体になっています。   重要性を示すstrongタグ 特定の語句を強調する際に<strong>〜</strong>で囲んで示します。 HTMLでは前述のemタグで囲まれた部分よりも重要であるとみなされます。 囲んだ部分は太字で表示されます。   以下の例を見てみましょう。 <p>語句を強調したい場合には<strong>強調タグ</strong>を使います</p> <strong>〜</strong>で囲んだ部分が太字になっています。   さて、emタグもstrongタグも、ある部分を強調したいときに使うタグですが、その違いはどこにあるのでしょう。 strongタグは語句や文そのものが重要であることを示すものである一方、 emタグはどこを強調するかでニュアンスが異なる文章に使われます。   以下の例を見てみましょう。 <em>TechAcademy</em>は恵比寿でプログラミング教室を開いています。 TechAcademyは<em>恵比寿で</em>プログラミング教室を開いています。 TechAcademyは恵比寿で<em>プログラミング教室</em>を開いています。 1番目の文章は、主催をしている「TechAcademy」という点を、 2番目の文章は、新宿でも品川でもなく「恵比寿」という点を、 3番目の文章は、英会話教室でも料理教室でもなく「プログラミング教室」だという点をそれぞれ強調しています。 用途に応じて使分けてみましょう。   また、emタグもstrongタグもHTML上で強調しておきたい重要な部分とみなされ、斜体や太字で表示されます。しかし、これはブラウザが自動的に解釈し表示しており、文字のデザインとは異なります。 例えば、「重要ではないけれど文字を太くしたい」といった場合にemタグやstrongタグを使用すると、文書の意味づけという本来のタグの役割が成り立たなくなります。 デザインとして文字を装飾したい場合にはCSSで指定しましょう。   大石ゆかり 書いているページがiPhoneの紹介なので、ページ内に出てくるiphoneって単語16個全部をstrongタグで強調してみました♪ 田島悠介 一昔前にあった検索エンジンを誤解させるスパムみたいだね。 大石ゆかり え～！だって重要じゃないですか。 田島悠介 そのページの見出しに関連するフレーズや、ページ内で訴えたいことの中で特に強調したい部分１～３個所に使うのがいいよ。 大石ゆかり 単語全部強調っていうのは、かえってダメなんですね！   区切り線 続いて区切り線を使う方法です。   文章の区切りを示すhrタグ 文章の区切りとなる箇所に<hr>と記述します。 記述した部分には水平線が引かれ、文章の意味的な区切りを示します。 多くのタグは開始タグと終了タグの２つを使用しますが、hrタグは単独で使用します。 hrタグによる水平線はCSS側で色をつけたり太さを変えたり等、装飾することも可能です。   以下の例を見てみましょう。 <p>語句を強調したい場合には<strong>強調タグ</strong>を使います</p> <hr> <p>文章を区切る場合には、hrダグで線を入れることができます</p> <hr>と記述したところに水平線が入っています。   [PR] Webデザインで副業する方法とは様々な意味を持つタグ ここでは主に、文章中の語句に意味づけを行うタグを一覧で紹介します。 タグ名 文章中での意味 使用ポイント em 強調する語句 どこを強調するかでニュアンスが変わる時 strong 重要な語句 emよりも重要性がある時 b 強調ではなく他と区別された語句 商品名やキーワードなど i 強調ではなく他と区別された語句 心の声や思考など small 補足的な語句・文章 免責事項、著作権表示など hr 区切り  テーマや話題が変わる時 かつてこれらのタグは、太字や斜体にするといったデザインとしての装飾目的で用いられることもありました。 HTML5以降では、文章や語句に意味を持たせる目的のみで用いることが推奨されています。   実際に書いてみよう 強調タグと区切り線を用いて実際にコードを書いてみましょう。   HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLで強調タグと区切り線を使う方法</title> </head> <body> <section> <p><em>TechAcademy</em>はオンライン完結のプログラミングスクール。<br> <strong>現役のプロが学習を徹底サポート</strong>するから、ITスキルを実務レベルで習得できます。</p> <hr> <p>何でも聞ける無料相談も実施中。<br> サービスの内容、副業や転職についてなど、なんでもご相談ください。</p> </section> </body> </html>   See the Pen Untitled by nomallica (@nomallica) on CodePen. 解説 上記のコードでは、主催をしている「TechAcademy」という点をemタグで囲んで強調しています。 また、最も伝えたい語句である「現役のプロが学習を徹底サポート」をstrongで囲み強調しています。 無料相談の説明の直前には、話題が変わることを示す意味で区切り線を設けています。   大石ゆかり hrタグをたんさん使って、文章を分けると見やすくなりそうですね♪ 田島悠介 細かいけど、HTML5から若干意味が変わったんだよ。 大石ゆかり hrタグにも文書構造としても意味があるんですか？単に区切る線ではないんですか？ 田島悠介 上で説明しているように、pタグのように段落と段落を分ける線だったり、後はsectionタグ内での区切りとして使うことが推奨されてるよ！   まとめ 今回はHTMLの「強調タグ」と「区切り線」について解説しました。 emタグやstrongタグは記述すると該当部分が太字や斜体で表示されますが、HTML5以降では文章中の語句などに意味を持たせる目的で用いられています。 そのため、決して装飾目的では無いことを覚えておいてください。 これらの強調タグを効果的に用いることで、文章中で何が重要であるかを読み手や検索エンジンに対して伝えられます。 ぜひ適切なタグを用いたマークアップを心がけてみてください。   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

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

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

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