【文字化け対応にも】HTMLで特殊文字を表示する方法

特殊文字とは？

< や ¥ などの特定の文字や記号は、ブログのシステムやブラウザ側で処理され、表示されなかったり文字化けしてしまう場合があります。その理由はおもにこちら。

• 特定の記号や文字がHTMLタグと認識されてしまうため
• タグによる不正な動作が行われないように処理されるため
• Shift-JISとUnicodeなど、文字コードの違いによるもの

そこで、特殊文字(エスケープシーケンス)の登場です！特殊文字を使うと、安全にかつ文字化けせずに特定の文字を表示することができますよ。

特殊文字の記述方法

たとえば、<ならばこのように記述します。

このように表示したい場合は・・・

HTMLではこのように記載しています。

<は特殊文字で記載します。&¿も特殊文字です。

特殊文字の文字化けを対策する方法

特定の特殊文字(例として' アポストロフィ、 ² 上付きの2)が、スマートフォンなどの一部ブラウザで表示されない場合があります。特殊文字を数値参照の表記にすると表示可能なものもあります。m²のような単位や、正確性が必要な場合などは、数値参照の特殊文字も試してみてください。

HTML表記

<b>文字参照</b><br>
&apos;　アポストロフィ<br>
m&sup2;　上付きの２<br>
m&sup3;　上付きの３<br>

<b>数値参照</b><br>
&#39;　アポストロフィ<br>
m&#178;　上付きの２<br>
m&#179;　上付きの３

表示結果

参考：W3G 文字実体参照・数値文字参照

よく使う特殊文字一覧

よく使われる特殊文字について表を作りました。参考にしてくださいね。

参考：W3G 文字実体参照・数値文字参照

まとめ

<>を多用するHTMLなどのコードをWebサイトに載せたい場合や、㊑や♥などの記号を使いたい場合には必須となる特殊文字、困ったときはこの使い方を思い出してくださいね。