HTMLにおいて「特殊文字」は、そのまま記述するとHTMLの構文として解釈されてしまったり、環境によって正しく表示されなかったりする文字を指します。これらを安全かつ確実に表示するために「実体参照（エンティティ参照）」という記述方法を使用します。
実体参照には、主に以下の2種類があります。
文字実体参照（名前実体参照）: 文字の名前を使った形式。
&名前;のように記述します。覚えやすく、一般的に推奨されます。数値文字参照: 文字のUnicodeコードポイント（数値）を使った形式。
&#数値;または進数;のように記述します。文字実体参照がない文字や、より確実に表示させたい場合に使われます。
以下に、比較的よく使用する特殊文字の実体参照を解説します。
1. HTML構文と衝突する文字（特に重要！）
これらの文字は、HTMLのタグや実体参照の開始・終了を示す記号なので、テキストとして表示したい場合は必ず実体参照を使います。
<(小なり記号 / Less-than sign)意味: HTMLタグの開始を示します。
実体参照:
<または<使用例:
<p>これは <p> タグです。</p>表示: これは
<p>タグです。
>(大なり記号 / Greater-than sign)意味: HTMLタグの終了を示します。
実体参照:
>または>使用例:
<p>これは <p> タグです。</p>表示: これは
<p>タグです。
&(アンパサンド / Ampersand)意味: 実体参照の開始を示します。
実体参照:
&または&使用例:
<p>「A & B」と表示したい。</p>表示: 「A & B」と表示したい。
注意: URLのクエリパラメータ（例:
?param1=value1¶m2=value2）をHTML内で表示する場合も&に置き換えるのが正しい記述です。
"(二重引用符 / Double quotation mark)意味: HTML属性値の開始・終了を示します。
実体参照:
"または"使用例:
<p>彼女は「こんにちは」と言いました。</p>表示: 彼女は"こんにちは"と言いました。
注意: 属性値で引用符を使う場合は、属性値を別の引用符（シングルクォーテーション）で囲むか、実体参照を使います。
良い例:
<p title='She said "Hello"'>タイトル</p>良い例:
<p title="She said 'Hello'">タイトル</p>
'(アポストロフィ / Single quotation mark)意味: HTML属性値の開始・終了を示す場合があります。
実体参照:
'または'使用例:
<p>It's a beautiful day.</p>表示: It's a beautiful day.
注意:
'はHTML5から正式にサポートされました。古い環境を考慮する場合は数値文字参照'がより確実です。
2. 空白文字
HTMLでは連続する半角スペースは一つにまとめられたり、改行が無視されたりします。これを制御するために使用します。
意味: 通常の半角スペースですが、途中で改行されず、複数の連続したスペースもそのまま表示されます。
実体参照:
または 使用例:
<p>文章の途中に スペースを入れる。</p>表示: 文章の途中に スペースを入れる。
注意: レイアウト目的で
を多用するのは推奨されません。CSSのmarginやpadding、white-spaceプロパティを使うべきです。
3. 一般的によく使う記号
キーボードから直接入力しにくい記号や、表示環境による文字化けを防ぎたい場合に使用します。
©(著作権記号 / Copyright sign)実体参照:
©または©使用例:
<p>© 2025 Your Company</p>表示: © 2025 Your Company
®(登録商標記号 / Registered sign)実体参照:
®または®使用例:
<p>商品名®</p>表示: 商品名®
™(商標記号 / Trademark sign)実体参照:
™または™使用例:
<p>商品名™</p>表示: 商品名™
—(エムダッシュ / Em dash)意味: 文章中の区切りや付加的な情報を挿入する際に使われる、比較的長いダッシュ。
実体参照:
—または—使用例:
<p>彼女は懸命に努力した—そして成功した。</p>表示: 彼女は懸命に努力した—そして成功した。
–(エヌダッシュ / En dash)意味: 範囲（例: 日付や数字）を示す際に使われる、エムダッシュより短いダッシュ。
実体参照:
–または–使用例:
<p>2020–2025年</p>表示: 2020–2025年
…(三点リーダー / Horizontal ellipsis)実体参照:
…または…使用例:
<p>続きはウェブで…</p>表示: 続きはウェブで…
実体参照を使用する際のヒント
可読性: 文字実体参照（
<など）は、数値文字参照（<など）よりも直感的で分かりやすいため、可能な限り文字実体参照の使用が推奨されます。UTF-8エンコーディング: 現代のウェブサイトでは、ほとんどの場合、文字エンコーディングにUTF-8が使用されています。UTF-8は非常に多くの文字を直接表現できるため、昔ほど多くの特殊文字を実体参照にする必要はなくなりました（例えば、©や®などは直接入力してもほとんどの環境で正しく表示されます）。しかし、**HTML構文と衝突する5つの文字（
<,>,&,",'）**は、文字化けや構文エラーを防ぐために常に実体参照を使用するべきです。アクセシビリティと意味: 実体参照は、その文字が持つ意味を伝える上でも役立ちます。例えば、視覚的にスペースに見えても、それが「改行してはいけないスペース」であることを
が示します。
これらの特殊文字と実体参照の知識は、正確で堅牢なHTML文書を作成するために非常に重要です。
0 件のコメント:
コメントを投稿