【特殊文字コード】HTMLで使用できない記号を実態参照で表示する方法

HTML/CSS

今回は、HTMLで表示する事が出来無い特殊文字や記号を表示させるための実態参照(文字参照)についてを紹介します。またよく使う実態参照の例をいくつか紹介します。

こんな人に向いた記事

  • HTMLで使用できない文字を表示させたい。
  • 入力するのが面倒な文字を楽に表示させたい。

HTMLで使用できない記号や特殊文字を表示する方法

HTMLには、半角「<」や「&」など、表示できない記号や文字が存在します。このようにHTMLで使用できない記号や特殊文字を表示する方法は「実態参照」を使うのをお勧めします。

また©や™などキーボードで打つのが面倒くさい文字列は今回紹介する「実態参照」を使ったほうが楽です。

他に「¥」のように文字化けが起こりやすい文字列は「実態参照」の「&yen;」を使ったほうが良いでしょう。

詳しくは以下参照。

文字参照(もじさんしょう、: character reference)とはHTMLなどのSGML文書においては、直接記述できない文字記号マークアップで使われる、半角不等号<」や「>」など)を表記する際に用いられる方法である。SGML構成素のひとつとして定義されており、文書文字集合中の文字を参照する為の手段を提供する。HTMLにおける文字参照には、表記方法により数値文字参照[1]文字実体参照[2]の二種が存在する。XMLにおいては、HTMLにおける「数値文字参照」を「文字参照」と呼ぶ。なおHTMLにおける「文字実体参照」は、XMLでは実体参照[3]と呼び区別する。

https://ja.wikipedia.org/wiki/文字参照

次で説明する例文のように、実態参照で記述する事で特殊文字を表示させる事が出来ます。

例文1

HTMLの学び方<最新版> ¥1,200-

HTMLの学び方&lt;最新版&gt; &yen;1,200-

例文2

«360°»

&laquo;360&deg;&raquo;

よく使われる実態参照

実態参照実際の表示説明
&amp;&アンパサンド
&lt;<小なり記号
&gt;>大なり記号
&quot;ダブルクォート
&nbsp; _半角スペース
&lsquo;'左シングルクォート
&rsquo;右シングルクォート
&ldquo;左ダブルクォート
&rdquo;右ダブルクォート
&laquo;«左ギュメ(山かっこ)
&raquo;»右ギュメ(山かっこ)
&copy;©著作権記号
&reg;®登録商標記号
&trade;商標記号
&yen;¥
&deg;°

最後に記事のように「&nbsp;」などの実態参照の実際に記述するコードを表示させたい場合は「&」の部分を「&amp;」にしてから「&」以降のテキストである「nbsp;」を入力すればOKです。


以上が「【実態参照】HTMLで使用できない記号や特殊文字を表示する方法」でした。

2020年5月26日HTML/CSSHTML,WEB

Posted by KT