HTMLの特殊文字について
文字実体参照
<br>
をHTMLタグとしてではなく、文章中に文字列として、表示させるにはどうすればよいのでしょうか。
HTMLでは、 <
(小なり)と >
(大なり)は、HTMLタグを示す記号として使われるので、普通に <br>
と記入すると、ただの改行となってしまいます。
<
を出すには <
と、 >
を出すには、 >
と記入します。
つまり、 <br>
を表示させるには、 <br>
とHTMLに書けばよいのです。
その他、空白を出すには、
、 "
を出すには "
、 '
を出すには '
と記入すれば文字として表示できます。
これらのような文字の記入の仕方を「文字実体参照」と言います。
まだまだある特殊文字
HTMLで使用可能な特殊文字は、HTMLの標準化を行っている W3Cのサイト に掲載されています。
この中から、私なりにおすすめな特殊文字を紹介します。
なお、ブラウザやOSなどの環境によっては表示できない文字があります。
おすすめ特殊文字
文字実体参照 | 表示 | 説明 |
---|---|---|
& |
& | アンパサンド |
… |
… | 省略記号 |
␣ |
␣ | 空白記号 |
☎ |
☎ | 電話マーク |
© |
© | 著作権マーク |
♪ |
♪ | 音符 |
♥ |
♥ | ハート |
▸ |
▸ | 右向き小正三角形(黒) |
⧉ |
⧉ | 2つの正方形が結合した図形 |
█ |
█ | ブロック |
½ |
½ | 2分の1 |
⅓ |
⅓ | 3分の1 |
¼ |
¼ | 4分の1 |
¾ |
¾ | 4分の3 |
⇄ |
⇄ | 右向き矢印+左向き矢印 |
𝔸 |
𝔸 | A |
𝕒 |
𝕒 | a |
HTML文字実体参照は他にも山ほどあります。
もちろん全部覚える必要はありません。思い出したいときに W3Cのサイト を見返せばよいのです。
サンプル
これらのサンプルはHTMLのbody要素内に置いてください。
サンプル1 「コードの挿入」
<!DOCTYPE html><br>
<html lang="ja"><br>
<head><br>
<meta charset="UTF-8"><br>
<title>Document</title><br>
</head><br>
<body><br>
<h1>Hello! Qiita World!</h1><br>
</body><br>
</html><br>
と表示させるためには、<br>
&lt;!DOCTYPE html&gt;<br><br>
&lt;html lang=&quot;ja&quot;&gt;<br><br>
&lt;head&gt;<br><br>
&nbsp;&nbsp;&lt;meta charset=&quot;UTF-8&quot;&gt;<br><br>
&nbsp;&nbsp;&lt;title&gt;Document&lt;/title&gt;<br><br>
&lt;/head&gt;<br><br>
&lt;body&gt;<br><br>
&nbsp;&nbsp;&lt;h1&gt;Hello! Qiita World!&lt;/h1&gt;<br><br>
&lt;/body&gt;<br><br>
&lt;/html&gt;<br><br>
と書きます。
実行結果
サンプル2 「blockによってグラフを作る」
<table>
<tr>
<th>アンケート回答</th>
<th>人数</th>
<th>グラフ</th>
</tr>
<tr>
<td>はい</td>
<td>29人</td>
<td>███████</td>
</tr>
<tr>
<td>いいえ</td>
<td>17人</td>
<td>████</td>
</tr>
<tr>
<td>どちらでもない</td>
<td>9人</td>
<td>██</td>
</tr>
<tr>
<td>分からない</td>
<td>7人</td>
<td>██</td>
</tr>
<tr>
<td>無回答</td>
<td>10人</td>
<td>███</td>
</tr>
</table>
<style>
table, th, td {
padding: 10px;
border: 2px solid #000;
}
</style>
実行結果
まとめ
HTMLには文字実体参照というものがたくさんあり、普通には表示できないものも表示できます。
皆さんも文字実体参照を活用してみてください!
執筆者(ふーちん)
N予備校プログラミングコース受講中です。
まだ初心者で、この記事もアカウントを作ってから2つ目に書きました。