1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

HTMLの特殊文字について

Last updated at Posted at 2021-12-11

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; 2つの正方形が結合した図形
&block; ブロック
&frac12; ½ 2分の1
&frac13; 3分の1
&frac14; ¼ 4分の1
&frac34; ¾ 4分の3
&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>
と書きます。

実行結果

sample1.png

サンプル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>

実行結果

sample2.png

まとめ

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

執筆者(ふーちん)

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?