2025年7月30日水曜日

HTMLでは特殊文字は実体参照を用います。比較的よく使用する文字を解説してください。

 HTMLにおいて「特殊文字」は、そのまま記述するとHTMLの構文として解釈されてしまったり、環境によって正しく表示されなかったりする文字を指します。これらを安全かつ確実に表示するために「実体参照(エンティティ参照)」という記述方法を使用します。

実体参照には、主に以下の2種類があります。

  1. 文字実体参照(名前実体参照): 文字の名前を使った形式。&名前; のように記述します。覚えやすく、一般的に推奨されます。

  2. 数値文字参照: 文字のUnicodeコードポイント(数値)を使った形式。&#数値; または &#x16進数; のように記述します。文字実体参照がない文字や、より確実に表示させたい場合に使われます。

以下に、比較的よく使用する特殊文字の実体参照を解説します。


1. HTML構文と衝突する文字(特に重要!)

これらの文字は、HTMLのタグや実体参照の開始・終了を示す記号なので、テキストとして表示したい場合は必ず実体参照を使います。

  • < (小なり記号 / Less-than sign)

    • 意味: HTMLタグの開始を示します。

    • 実体参照: &lt; または &#60;

    • 使用例: <p>これは &lt;p&gt; タグです。</p>

      • 表示: これは <p> タグです。

  • > (大なり記号 / Greater-than sign)

    • 意味: HTMLタグの終了を示します。

    • 実体参照: &gt; または &#62;

    • 使用例: <p>これは &lt;p&gt; タグです。</p>

      • 表示: これは <p> タグです。

  • & (アンパサンド / Ampersand)

    • 意味: 実体参照の開始を示します。

    • 実体参照: &amp; または &#38;

    • 使用例: <p>「A & B」と表示したい。</p>

      • 表示: 「A & B」と表示したい。

      • 注意: URLのクエリパラメータ(例: ?param1=value1&param2=value2)をHTML内で表示する場合も&amp;に置き換えるのが正しい記述です。

  • " (二重引用符 / Double quotation mark)

    • 意味: HTML属性値の開始・終了を示します。

    • 実体参照: &quot; または &#34;

    • 使用例: <p>彼女は「こんにちは」と言いました。</p>

      • 表示: 彼女は"こんにちは"と言いました。

      • 注意: 属性値で引用符を使う場合は、属性値を別の引用符(シングルクォーテーション)で囲むか、実体参照を使います。

        • 良い例: <p title='She said &quot;Hello&quot;'>タイトル</p>

        • 良い例: <p title="She said 'Hello'">タイトル</p>

  • ' (アポストロフィ / Single quotation mark)

    • 意味: HTML属性値の開始・終了を示す場合があります。

    • 実体参照: &apos; または &#39;

    • 使用例: <p>It&apos;s a beautiful day.</p>

      • 表示: It's a beautiful day.

      • 注意: &apos;はHTML5から正式にサポートされました。古い環境を考慮する場合は数値文字参照 &#39; がより確実です。

2. 空白文字

HTMLでは連続する半角スペースは一つにまとめられたり、改行が無視されたりします。これを制御するために使用します。

  • (ノーブレークスペース / Non-breaking space)

    • 意味: 通常の半角スペースですが、途中で改行されず、複数の連続したスペースもそのまま表示されます。

    • 実体参照: &nbsp; または &#160;

    • 使用例: <p>文章の途中に&nbsp;&nbsp;&nbsp;スペースを入れる。</p>

      • 表示: 文章の途中に スペースを入れる。

      • 注意: レイアウト目的で&nbsp;を多用するのは推奨されません。CSSのmarginpaddingwhite-spaceプロパティを使うべきです。

3. 一般的によく使う記号

キーボードから直接入力しにくい記号や、表示環境による文字化けを防ぎたい場合に使用します。

  • © (著作権記号 / Copyright sign)

    • 実体参照: &copy; または &#169;

    • 使用例: <p>&copy; 2025 Your Company</p>

      • 表示: © 2025 Your Company

  • ® (登録商標記号 / Registered sign)

    • 実体参照: &reg; または &#174;

    • 使用例: <p>商品名&reg;</p>

      • 表示: 商品名®

  • (商標記号 / Trademark sign)

    • 実体参照: &trade; または &#8482;

    • 使用例: <p>商品名&trade;</p>

      • 表示: 商品名™

  • (エムダッシュ / Em dash)

    • 意味: 文章中の区切りや付加的な情報を挿入する際に使われる、比較的長いダッシュ。

    • 実体参照: &mdash; または &#8212;

    • 使用例: <p>彼女は懸命に努力した&mdash;そして成功した。</p>

      • 表示: 彼女は懸命に努力した—そして成功した。

  • (エヌダッシュ / En dash)

    • 意味: 範囲(例: 日付や数字)を示す際に使われる、エムダッシュより短いダッシュ。

    • 実体参照: &ndash; または &#8211;

    • 使用例: <p>2020&ndash;2025年</p>

      • 表示: 2020–2025年

  • (三点リーダー / Horizontal ellipsis)

    • 実体参照: &hellip; または &#8230;

    • 使用例: <p>続きはウェブで&hellip;</p>

      • 表示: 続きはウェブで…

実体参照を使用する際のヒント

  • 可読性: 文字実体参照(&lt;など)は、数値文字参照(&#60;など)よりも直感的で分かりやすいため、可能な限り文字実体参照の使用が推奨されます。

  • UTF-8エンコーディング: 現代のウェブサイトでは、ほとんどの場合、文字エンコーディングにUTF-8が使用されています。UTF-8は非常に多くの文字を直接表現できるため、昔ほど多くの特殊文字を実体参照にする必要はなくなりました(例えば、©や®などは直接入力してもほとんどの環境で正しく表示されます)。しかし、**HTML構文と衝突する5つの文字(<, >, &, ", ')**は、文字化けや構文エラーを防ぐために常に実体参照を使用するべきです。

  • アクセシビリティと意味: 実体参照は、その文字が持つ意味を伝える上でも役立ちます。例えば、視覚的にスペースに見えても、それが「改行してはいけないスペース」であることを&nbsp;が示します。

これらの特殊文字と実体参照の知識は、正確で堅牢なHTML文書を作成するために非常に重要です。