HTML: HTML文字実体参照
HTMLでは、特定の文字（<、>、& など）がタグ構文の一部として使用されています。これらの文字自体をページに表示したい場合は、文字実体参照（エスケープ文字とも呼ばれます）を使う必要があります。
1. なぜ実体参照が必要か
ブラウザが < に遭遇すると、それをタグの開始と解釈します。ページ上で「小なり」記号として表示するには、< と記述しなければなりません。同様に、& 記号自体もエスケープが必要です。これは実体参照のプレフィックスだからです。
(1) 参考テーブル
| 文字 | コード | 説明 | 文字 | コード | 説明 | 文字 | コード | 説明 |
|---|---|---|---|---|---|---|---|---|
|
|
改行しないスペース | < |
< |
小なり | > |
> |
大なり |
& |
& |
アンパサンド | " |
" |
二重引用符 | ' |
' |
一重引用符 |
© |
© |
著作権 | ® |
® |
登録商標 | ™ |
™ |
商標 |
¥ |
¥ |
円記号 | € |
€ |
ユーロ | £ |
£ |
ポンド |
× |
× |
乗算 | ÷ |
÷ |
除算 | ± |
± |
プラスマイナス |
≤ |
≤ |
以下 | ≥ |
≥ |
以上 | ≠ |
≠ |
等しくない |
≈ |
≈ |
ほぼ等しい | ∞ |
∞ |
無限 | ∑ |
∑ |
総和 |
ƒ |
ƒ |
関数 | ¹ |
¹ |
上付き1 | ² |
² |
上付き2（二乗） |
³ |
³ |
上付き3（三乗） | ½ |
½ |
2分の1 | ¼ |
¼ |
4分の1 |
← |
← |
左矢印 | → |
→ |
右矢印 | ↑ |
↑ |
上矢印 |
↓ |
↓ |
下矢印 | … |
… |
省略記号 | — |
— |
長いダッシュ |
· |
· |
中点 | |
  |
enスペース | |
  |
emスペース |
▶ サンプル
HTML
<p>HTMLでは、小なりには <、大なりには > を使います。</p>
<p>& は「アンド」記号そのものです。</p>
<p>結果：小なりには <、大なりには > を使います。& は「アンド」記号そのものです。</p>
2. よく使われる実体参照一覧
以下はHTMLで最もよく使われる文字実体参照です ― 覚えておく価値があります。
▶ サンプル
HTML
<!-- よく使われるHTML実体参照 -->
<p>改行しないスペース： </p>
<p>小なり：<</p>
<p>大なり：></p>
<p>アンパサンド：&</p>
<p>二重引用符："</p>
<p>一重引用符：'</p>
<p>著作権記号：©</p>
<p>登録商標：®</p>
<p>商標記号：™</p>
<p>ユーロ記号：€</p>
<p>円記号：¥</p>
<p>ポンド記号：£</p>
💡 ヒント：ほとんどのコードエディターでは、手動で実体参照を入力する必要はありません。例えばVS Codeでは、
& を入力すると自動提案が表示されます。ただし、生のHTMLコードでは、山括弧には常に実体参照を使うことを忘れないでください。
3. 数値参照と名前付き実体
実体記号には名前付き実体（例：©）と数値参照（例：©）の2つの形式があります。数値参照は10進数または16進数（x プレフィックス付き）を使用できます。
▶ サンプル
HTML
<p>名前付き実体：© 2026 Web-Tutorial</p>
<p>10進数参照：© 2026 Web-Tutorial</p>
<p>16進数参照：© 2026 Web-Tutorial</p>
<p>3つともまったく同じ結果になります。すべて © 記号が表示されます。</p>
4. 特殊な空白文字
HTMLはデフォルトで連続する複数のスペースを1つのスペースにまとめます。特定のスペーシングを保持したい場合は、以下の方法を使います。
▶ サンプル
HTML
<p>通常：複数の スペースは まとめられます。</p>
<p>実体参照スペース：複数 スペース が保持されます。</p>
<p>注意： は改行を防ぐためにも使われます。例えば「100 km/h」は行をまたいで分割されません。</p>
5. 使用シーンのまとめ
- コード表示： コード例で
<div>のようなタグを表示する場合、<と>を使う必要があります - 特殊記号： 著作権
©、登録商標®、通貨記号 - 改行防止： 「100 km/h」や「第1章」などのフレーズが行をまたいで分割されないように
を使用 - 引用符のネスト： 属性値の中で引用符を使う場合、内側の引用符はエスケープが必要
📌 完全な実体参照リスト：すべてのHTML文字実体参照の完全なリストはHTML仕様書に記載されています。よく使われる数十個で99%のシーンをカバーできます。
❓ よくある質問
Q
<と>はなぜエスケープが必要ですか？A
<と>はHTMLタグの構文文字です。<div>と直接書くと、ブラウザはそれをタグと見なし、表示すべきテキストとは解釈しません。<（小なり）と>（大なり）を使用してエスケープすると、ブラウザに小なり記号と大なり記号そのものを表示したいのだと伝えます。一般的なシナリオ：コードの表示、数式、技術文書。Q
と通常のスペースの違いは何ですか？A 通常のスペースはHTMLで「折りたたまれ」、複数の連続スペースは1つだけ表示されます。これはソースコードのインデントがページ表示に影響しないようにするHTMLの設計機能です。
（改行しないスペース）には2つの機能があります：1）折りたたまれず、複数の は複数のスペースとして表示される；2）ブラウザがその位置で行を改めないようにします。一般的な使用例：数字と単位の間（100 pxなど）、名前の間（田中 太郎など）。Q 実体参照には互換性の問題がありますか？
A 一般的な実体参照（
<、>、&、 、©など）はすべてのブラウザで動作し、問題はありません。ただし、一部の珍しい実体参照（絵文字、特殊な数学記号など）は古いブラウザで四角として表示される場合があります。推奨事項：1）一般的な実体参照は自由に使用；2）特殊な記号は公開前にテスト；3）互換性のない記号にはCSSや画像を代替として使用。Q 数値参照と名前付き実体はいつ使うのですか？
A 名前付き実体（
<など）はより読みやすく覚えやすいので、優先的に使用します。数値参照（<や<など）はカバー範囲が広く、名前付き実体がない文字も含みます。選択の指針：名前付き実体がある場合はそれを使い（©など）、ない場合は数値参照を使います（€はユーロ記号€など）。数値参照には10進数（&#数字;）と16進数（&#x数字;）の2つの書き方があります。📖 まとめ
- 実体参照は
&で始まり;で終わる - よく使われる実体参照：
<、>、&、 、© - 実体参照には名前付き実体と数値参照の2形式がある
- 連続するスペースはブラウザがまとめる。
で強制的に保持できる
📝 練習問題
- コード表示： ページに「Please use <h1> through <h6> to define headings」というテキストを表示する段落を作成してください。
<h1>〜<h6>の部分は青いコード風の書式にしてください。 - 著作権表示： ページの下部に著作権表示を記述してください。
©で著作権記号を表示し、 で適切なスペーシングを維持してください。 - 実体参照の組み合わせ： 実体参照を使って、小なり記号、大なり記号、アンパサンド、引用符をすべて同時に含むテキストを1行書いてください。
