HTMLの特殊文字について

12048 ワード
HTML HTML5 特殊文字 HTML テキストリンク

HTMLの特殊文字について

文字実体参照

<br> をHTMLタグとしてではなく、文章中に文字列として、表示させるにはどうすればよいのでしょうか。
HTMLでは、 < (小なり)と > (大なり)は、HTMLタグを示す記号として使われるので、普通に <br> と記入すると、ただの改行となってしまいます。
< を出すには &lt; と、 > を出すには、 &gt; と記入します。
つまり、 <br> を表示させるには、 &lt;br&gt; とHTMLに書けばよいのです。
その他、空白を出すには、 &nbsp; 、 " を出すには &quot; 、 ' を出すには &apos; と記入すれば文字として表示できます。
これらのような文字の記入の仕方を「文字実体参照」と言います。

まだまだある特殊文字

HTMLで使用可能な特殊文字は、HTMLの標準化を行っている W3Cのサイト に掲載されています。
この中から、私なりにおすすめな特殊文字を紹介します。
なお、ブラウザやOSなどの環境によっては表示できない文字があります。

おすすめ特殊文字
文字実体参照 表示 説明
&amp; & アンパサンド
&hellip; … 省略記号
&blank; ␣ 空白記号
&phone; ☎ 電話マーク
&copy; © 　著作権マーク
&sung; ♪ 音符
&hearts; ♥ ハート
&rtrif; ▸ 右向き小正三角形(黒)
&boxbox; ⧉ ２つの正方形が結合した図形
&block; █ ブロック
&frac12; ½ ２分の１
&frac13; ⅓ ３分の１
&frac14; ¼ ４分の１
&frac34; ¾ ４分の３
&rlarr; ⇄ 右向き矢印＋左向き矢印
&Aopf; 𝔸 A
&aopf; 𝕒 a

HTML文字実体参照は他にも山ほどあります。
もちろん全部覚える必要はありません。思い出したいときに W3Cのサイト を見返せばよいのです。

サンプル

これらのサンプルはHTMLのbody要素内に置いてください。

サンプル1   「コードの挿入」

index.html
&lt;!DOCTYPE html&gt;<br>
&lt;html lang=&quot;ja&quot;&gt;<br>
&lt;head&gt;<br>
&nbsp;&nbsp;&lt;meta charset=&quot;UTF-8&quot;&gt;<br>
&nbsp;&nbsp;&lt;title&gt;Document&lt;/title&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
&nbsp;&nbsp;&lt;h1&gt;Hello! Qiita World!&lt;/h1&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;<br>
と表示させるためには、<br>
&amp;lt;!DOCTYPE html&amp;gt;&lt;br&gt;<br>
&amp;lt;html lang=&amp;quot;ja&amp;quot;&amp;gt;&lt;br&gt;<br>
&amp;lt;head&amp;gt;&lt;br&gt;<br>
&amp;nbsp;&amp;nbsp;&amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt;&lt;br&gt;<br>
&amp;nbsp;&amp;nbsp;&amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;&lt;br&gt;<br>
&amp;lt;/head&amp;gt;&lt;br&gt;<br>
&amp;lt;body&amp;gt;&lt;br&gt;<br>
&amp;nbsp;&amp;nbsp;&amp;lt;h1&amp;gt;Hello! Qiita World!&amp;lt;/h1&amp;gt;&lt;br&gt;<br>
&amp;lt;/body&amp;gt;&lt;br&gt;<br>
&amp;lt;/html&amp;gt;&lt;br&gt;<br>
と書きます。

実行結果

サンプル2    「blockによってグラフを作る」

index.html
  <table>
    <tr>
      <th>アンケート回答</th>
      <th>人数</th>
      <th>グラフ</th>
    </tr>
    <tr>
      <td>はい</td>
      <td>29人</td>
      <td>&block;&block;&block;&block;&block;&block;&block;</td>
    </tr>
    <tr>
      <td>いいえ</td>
      <td>17人</td>
      <td>&block;&block;&block;&block;</td>
    </tr>
    <tr>
      <td>どちらでもない</td>
      <td>9人</td>
      <td>&block;&block;</td>
    </tr>
    <tr>
      <td>分からない</td>
      <td>7人</td>
      <td>&block;&block;</td>
    </tr>
    <tr>
      <td>無回答</td>
      <td>10人</td>
      <td>&block;&block;&block;</td>
    </tr>
  </table>

  <style>
    table, th, td {
      padding: 10px;
      border: 2px solid #000;
    }
  </style>

実行結果

まとめ

HTMLには文字実体参照というものがたくさんあり、普通には表示できないものも表示できます。
皆さんも文字実体参照を活用してみてください！

執筆者（ふーちん）

N予備校プログラミングコース受講中です。
まだ初心者で、この記事もアカウントを作ってから2つ目に書きました。