HTMLで表示されない文字！特殊文字を表示させる方法

この記事ではHTMLで特殊文字を表示させる方法について解説します！コピーライトなどで使われる特殊な文字はHTMLでは対応する特定の文字列に変換して表示させる必要があります。この記事では、

について解説していきます。特殊文字をHTML上で扱いたい方はぜひ、この記事を参考にしてみてください！

特殊文字とは

まずは特殊文字とは何かについて知っておきましょう。特殊文字はコピーライトの横で使われる「©」のような、通常の文字ではない、記号に分類されるような文字のことを言います。

このような特殊文字はIME（文字入力のためのソフト）にもよりますが、「コピーライト」などと入力すると、変換候補欄に出てくる場合もあります。普段気にしていないかもしれませんが、ハートマークなども特殊文字として扱われています。

そしてこれらの特殊文字は、HTML上では文字実体参照か数値文字参照のどちらかの方法で置き換える必要があります。これについては特殊文字をなぜ置き換える必要があるのかを解説したあとに、詳しく解説します。

特殊文字をそのまま書いてはいけない理由

このような特殊文字はキーボードでも簡単に入力することができます。しかしそれをそのままHTML上で書いて表示させることはルール上してはいけないことになっています。

なぜなら、それをそのままHTML上で使ってしまうと、環境によっては文字化けをして見ることができなくなってしまうからです。自分の環境では見ることができても、他の環境で必ずしも見れるとは限りません。

そのような環境に左右されることをできるだけ防ぐために、特殊文字をルールに則った形で置き換えることで、表示させるようにできます。また、文字化け以外にも、「<」や「>」などはHTMLではタグの一部として使われています。

このように、HTMLで使われている記号なのか、文章中で使われている記号なのかを区別するためにも、特殊文字は置き換える必要があります。

特殊文字をHTML上で表示させる方法

それでは特殊文字をHTML上で表示させる方法を解説していきます。特殊文字は先程も解説したように、文字実体参照か数値文字参照のどちらかの方法で置き換える必要があります。この置き換えの方法について、それぞれ見ていきましょう。

文字実体参照

文字実体参照は、

&特殊文字の名前;

という形で特殊文字を置き換えることができます。こちらのコードをご覧ください。

 
©
>
<

実行結果

  
© 
> 
< 

こちらのコードでは文字実体参照が特殊文字に置き換わっていることが分かると思います。これらは特殊文字のリファレンスに一覧で掲載されています。こちら（外部サイト）で自分が表示させたい特殊文字を見つけることができます。

数値文字参照

数値文字参照は、

&#番号;

という形で特殊文字を置き換えることができます。文字実体参照との違いは特にありませんが、数値文字参照のほうが文字実体参照よりも定義されている記号の数が多くあります。

使える部分ではわかりやすい文字実体参照を、文字実体参照になければ数値文字参照を使うようにしましょう。こちらのコードをご覧ください。

 
©
>
<

実行結果

  
© 
> 
< 

こちらのコードでは数値文字参照が特殊文字に置き換わっていることが分かると思います。これらは文字実体参照と同じく特殊文字のリファレンスに一覧で掲載されています。

先ほどと同じく、こちら（外部サイト）で自分が表示させたい特殊文字を見つけることができます。

まとめ

今回は特殊文字をHTMLで表示させる方法について解説をしてきました。どのような文字が特殊文字か、分かって頂けたでしょうか？

特殊文字の表示には、文字実体参照と数値文字参照の2種類があります。どちらでも表示はできますが、コードの見やすさも考えながら選んでいきましょう！