初心者必見！HTMLのエスケープ文字一覧と使い方｜&や<を正しく表示する方法

「HTMLで<や&をそのまま書いたらレイアウトが崩れた！」
「ダブルクオーテーション（”）を正しく表示させたい！」
「プログラムのコードをHTMLで表示したいけど、タグとして認識されてしまう」

ホームページやブログを作っているときに、こんな経験をしたことはありませんか？

これは、HTMLが特殊な記号をタグや属性として解釈してしまうからです。でも心配は無用！そんなときに使うのが**エスケープ文字（実体参照）**です。

この記事では、初心者でもわかるようにHTMLでよく使うエスケープ文字の一覧と、その使い方を詳しく解説します。これを読めば、特殊文字を正しく表示できるようになり、HTMLが崩れる心配もなくなりますよ。

HTMLのエスケープ文字とは？
よく使うHTMLエスケープ文字一覧
エスケープ文字を使う実例
実践的な使用場面
JavaScriptとの組み合わせ
1. 動的コンテンツでのエスケープ
2. エスケープ処理のJavaScript関数
注意点とベストプラクティス
トラブルシューティング
1. よくある問題と解決法
2. デバッグのコツ
自動化とツール
まとめ

HTMLのエスケープ文字とは？

なぜエスケープ文字が必要？

HTMLでは < や & などの記号はタグや特殊な意味を持ちます。そのため、そのまま書くと誤認識されてしまうことがあります。

問題のある例

<p>5 < 10</p>

この場合、HTMLは「< 10」を何かのタグの始まりだと勘違いし、表示が崩れたりエラーが発生したりします。

正しい書き方

<p>5 &lt; 10</p>

これで「5 < 10」と正しく表示されます。

エスケープ文字（実体参照）の仕組み

エスケープ文字は、正式には「文字実体参照」と呼ばれ、以下の形式で書きます：

&文字名;

& で始まる
文字名または数値コード
; で終わる

エスケープ文字の種類

名前付き実体参照

&lt;    <!-- < -->
&gt;    <!-- > -->
&amp;   <!-- & -->

数値文字参照

&#60;   <!-- < -->
&#62;   <!-- > -->
&#38;   <!-- & -->

16進数文字参照

&#x3C;  <!-- < -->
&#x3E;  <!-- > -->
&#x26;  <!-- & -->

よく使うHTMLエスケープ文字一覧

基本的な特殊文字

表示したい文字	書き方（名前付き）	数値参照	16進数参照	説明
`&`	`&`	`&`	`&`	アンパサンド
`<`	`<`	`<`	`<`	小なり
`>`	`>`	`>`	`>`	大なり
`"`	`"`	`"`	`"`	ダブルクオーテーション
`'`	`'`	`'`	`'`	シングルクオーテーション

空白文字

表示したい文字	書き方	説明
（改行されない空白）	` `	ノンブレーキングスペース
（タブ）	` `	タブ文字
（改行）	` `	ラインフィード
（復帰）	` `	キャリッジリターン

記号・特殊文字

表示したい文字	書き方	説明
`©`	`©`	著作権記号
`®`	`®`	登録商標記号
`™`	`™`	商標記号
`¥`	`¥`	円記号
`€`	`€`	ユーロ記号
`£`	`£`	ポンド記号
`¢`	`¢`	セント記号

数学記号

表示したい文字	書き方	説明
`±`	`±`	プラスマイナス
`×`	`×`	乗算記号
`÷`	`÷`	除算記号
`≠`	`≠`	等しくない
`≤`	`≤`	以下
`≥`	`≥`	以上
`∞`	`∞`	無限大
`∑`	`∑`	総和

矢印記号

表示したい文字	書き方	説明
`←`	`←`	左矢印
`→`	`→`	右矢印
`↑`	`↑`	上矢印
`↓`	`↓`	下矢印
`↔`	`↔`	左右矢印
`↵`	`&crarr;`	改行矢印

ギリシャ文字

表示したい文字	書き方	説明
`α`	`α`	アルファ
`β`	`β`	ベータ
`γ`	`γ`	ガンマ
`δ`	`δ`	デルタ
`π`	`π`	パイ
`Ω`	`Ω`	オメガ

エスケープ文字を使う実例

基本的な特殊文字の表示

比較演算子を表示

<p>5 &lt; 10 かつ 10 &gt; 5 です。</p>
<p>A &amp; B の両方が必要です。</p>

表示結果

5 < 10 かつ 10 > 5 です。
A & B の両方が必要です。

会社名や商品名での使用

<p>会社名：AT&amp;T</p>
<p>商品名：Q&amp;A システム</p>
<p>著作権：&copy; 2024 Example Corp.</p>

表示結果

会社名：AT&T
商品名：Q&A システム
著作権：© 2024 Example Corp.

プログラムコードの表示

HTMLコードを表示

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;サンプルページ&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;見出し&lt;/h1&gt;
    &lt;p&gt;段落のテキスト&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

JavaScript コードを表示

<pre>
if (x &lt; 10 &amp;&amp; y &gt; 5) {
  console.log(&quot;条件を満たしています&quot;);
}
</pre>

CSS コードを表示

<pre>
p {
  color: red;
  font-size: 16px;
}

a:hover {
  text-decoration: underline;
}
</pre>

属性値での使用

input要素のplaceholder

<input type="text" placeholder="例：&quot;名前&quot;を入力してください">
<input type="email" placeholder="形式：user@example.com">

title属性での使用

<a href="#" title="&quot;詳細情報&quot;を表示">詳細を見る</a>
<img src="image.jpg" alt="商品画像" title="価格：&yen;1,000">

複雑な表現の例

数学的な表現

<p>二次方程式：ax&sup2; + bx + c = 0</p>
<p>面積：S = &pi;r&sup2;</p>
<p>不等式：-∞ &lt; x &lt; +∞</p>

化学式の表現

<p>水の化学式：H&sub2;O</p>
<p>二酸化炭素：CO&sub2;</p>
<p>硫酸：H&sub2;SO&sub4;</p>

実践的な使用場面

ブログ記事での技術解説

<article>
  <h2>HTMLの基本タグ</h2>
  <p>HTMLでは、&lt;p&gt;タグを使って段落を作成します。</p>
  <p>見出しには&lt;h1&gt;から&lt;h6&gt;までのタグを使用できます。</p>
  
  <h3>コード例</h3>
  <pre>
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;サンプルページ&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;メインタイトル&lt;/h1&gt;
  &lt;p&gt;段落のテキストです。&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
  </pre>
</article>

商品説明での使用

<div class="product-info">
  <h2>商品仕様</h2>
  <ul>
    <li>サイズ：10cm &times; 15cm &times; 5cm</li>
    <li>重量：約500g</li>
    <li>価格：&yen;2,980（税込）</li>
    <li>保証期間：購入日から1年間</li>
  </ul>
  
  <p class="copyright">
    &copy; 2024 Example Store. All rights reserved.
  </p>
</div>

FAQ（よくある質問）での使用

<section class="faq">
  <h2>よくある質問</h2>
  
  <div class="faq-item">
    <h3>Q: &quot;送料無料&quot;の条件は？</h3>
    <p>A: 商品代金が&yen;5,000以上の場合、送料は無料になります。</p>
  </div>
  
  <div class="faq-item">
    <h3>Q: 返品 &amp; 交換はできますか？</h3>
    <p>A: 商品到着後7日以内であれば、返品・交換を承ります。</p>
  </div>
</section>

JavaScriptとの組み合わせ

動的コンテンツでのエスケープ

<script>
function displayCode() {
  const codeContent = '&lt;div class=&quot;container&quot;&gt;\n  &lt;p&gt;Hello World&lt;/p&gt;\n&lt;/div&gt;';
  document.getElementById('codeDisplay').innerHTML = codeContent;
}
</script>

<button onclick="displayCode()">コードを表示</button>
<pre id="codeDisplay"></pre>

エスケープ処理のJavaScript関数

<script>
function escapeHtml(text) {
  const map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

function displayUserInput() {
  const userInput = document.getElementById('userInput').value;
  const escapedInput = escapeHtml(userInput);
  document.getElementById('output').innerHTML = escapedInput;
}
</script>

<input type="text" id="userInput" placeholder="HTML文字を入力">
<button onclick="displayUserInput()">エスケープして表示</button>
<div id="output"></div>

注意点とベストプラクティス

必須エスケープ文字

以下の文字は必ずエスケープする必要があります：

HTMLコンテンツ内

< → <
& → &

属性値内

" → " (ダブルクオートで囲まれた属性値内)
' → ' (シングルクオートで囲まれた属性値内)

エスケープの順序

複数のエスケープ処理を行う場合は、順序に注意が必要です：

<!-- 間違った順序 -->
<!-- 1. < を &lt; にエスケープ -->
<!-- 2. & を &amp; にエスケープすると &amp;lt; になってしまう -->

<!-- 正しい順序 -->
<!-- 1. & を &amp; にエスケープ -->
<!-- 2. < を &lt; にエスケープ -->

適切なエスケープの例

正しい例

<p>コマンド: cat file.txt &gt; output.txt</p>
<p>式: (a &amp; b) &lt; (c &amp; d)</p>
<input type="text" value="&quot;デフォルト値&quot;">

不適切な例

<!-- エスケープが不十分 -->
<p>コマンド: cat file.txt > output.txt</p>
<p>式: (a & b) < (c & d)</p>
<input type="text" value=""デフォルト値"">

トラブルシューティング

よくある問題と解決法

問題1: 表示が崩れる

症状: HTMLが正しく表示されない

原因: 特殊文字がエスケープされていない

解決法:

<!-- 問題のあるコード -->
<p>5 < 10 && 10 > 5</p>

<!-- 修正後 -->
<p>5 &lt; 10 &amp;&amp; 10 &gt; 5</p>

問題2: 文字が二重にエスケープされる

症状: &lt; のように表示される

原因: エスケープ処理が重複している

解決法:

<!-- 問題のあるコード -->
<p>&amp;lt;html&amp;gt;</p>

<!-- 修正後 -->
<p>&lt;html&gt;</p>

問題3: 属性値内のクオートが正しく処理されない

症状: 属性値が途中で切れる

原因: 属性値内のクオートがエスケープされていない

解決法:

<!-- 問題のあるコード -->
<input type="text" value="彼は"こんにちは"と言った">

<!-- 修正後 -->
<input type="text" value="彼は&quot;こんにちは&quot;と言った">

デバッグのコツ

ブラウザの開発者ツールで確認

F12キーで開発者ツールを開く
ElementsタブでHTMLの構造を確認
エスケープが正しく処理されているかチェック

HTMLバリデーターの使用

W3C Markup Validator でHTMLの構文をチェック
エスケープが不適切な部分を特定

自動化とツール

エディタでの自動エスケープ

Visual Studio Code

HTML/CSS Support拡張機能
Auto Rename Tag拡張機能

Sublime Text

Emmet プラグイン
HTMLエスケープ用のスニペット

オンラインツール

エスケープ変換ツール

HTML Entity Encoder/Decoder
Online HTML Escape Tool

文字コード確認ツール

Unicode Character Table
HTML Character Codes Reference

自動化スクリプト

Python での自動エスケープ

import html

def escape_html(text):
    return html.escape(text)

# 使用例
text = 'Hello <world> & "friends"'
escaped = escape_html(text)
print(escaped)  # Hello &lt;world&gt; &amp; &quot;friends&quot;

Node.js での自動エスケープ

function escapeHtml(text) {
  const map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

// 使用例
const text = 'Hello <world> & "friends"';
const escaped = escapeHtml(text);
console.log(escaped); // Hello &lt;world&gt; &amp; &quot;friends&quot;

まとめ

HTMLエスケープ文字を正しく使うためのポイントをまとめます：

基本的なエスケープ文字

< → <
> → >
& → &
" → "
' → '

エスケープが必要な場面

HTMLコンテンツ内での特殊文字表示
属性値内でのクオート使用
プログラムコードの表示
数学記号や特殊記号の表示

実践的な活用

ブログ記事での技術解説
商品説明での仕様表示
FAQ での質問と回答
動的コンテンツでのエスケープ処理

注意点

必須エスケープ文字の確実な処理
エスケープの順序に注意
二重エスケープの回避
適切なツールの活用

トラブル回避

ブラウザ開発者ツールでの確認
HTMLバリデーターでの検証
自動化ツールの活用

HTMLのエスケープ文字とは？

なぜエスケープ文字が必要？

問題のある例

正しい書き方

エスケープ文字（実体参照）の仕組み

エスケープ文字の種類

名前付き実体参照

数値文字参照

16進数文字参照

よく使うHTMLエスケープ文字一覧

基本的な特殊文字

空白文字

記号・特殊文字

数学記号

矢印記号

ギリシャ文字

エスケープ文字を使う実例

基本的な特殊文字の表示

比較演算子を表示

会社名や商品名での使用

プログラムコードの表示

HTMLコードを表示

JavaScript コードを表示

CSS コードを表示

属性値での使用

input要素のplaceholder

title属性での使用

複雑な表現の例

数学的な表現

化学式の表現

実践的な使用場面

ブログ記事での技術解説

商品説明での使用

FAQ（よくある質問）での使用

JavaScriptとの組み合わせ

動的コンテンツでのエスケープ

エスケープ処理のJavaScript関数

注意点とベストプラクティス

必須エスケープ文字

HTMLコンテンツ内

属性値内

エスケープの順序

適切なエスケープの例

正しい例

不適切な例

トラブルシューティング

よくある問題と解決法

問題1: 表示が崩れる

問題2: 文字が二重にエスケープされる

問題3: 属性値内のクオートが正しく処理されない

デバッグのコツ

ブラウザの開発者ツールで確認

HTMLバリデーターの使用

自動化とツール

エディタでの自動エスケープ

Visual Studio Code

Sublime Text

オンラインツール

エスケープ変換ツール

文字コード確認ツール

自動化スクリプト

Python での自動エスケープ

Node.js での自動エスケープ

まとめ

Youtube

カテゴリー別人気記事

コメント