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


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

HTMLに文章を書いていて、 <¥ などが「あれ??入力したはずなのにブラウザでは表示されていない!」となったことはありませんか?

そんな特定の文字をブラウザに表示させる際には、特殊文字(エスケープシーケンス)を使いましょう!今回はよくWebサイトで使われる特殊文字を、書き方と一緒にご紹介します!

目次
  1. 特殊文字とは?
  2. 特殊文字の記述方法
  3. 特殊文字の文字化けを対策する方法
  4. よく使う特殊文字一覧
  5. まとめ

特殊文字とは?

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

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

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

特殊文字の記述方法

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

&lt;
特殊文字は&ではじまり、;で終わります。;を忘れがちなので注意しましょうね!特殊文字は、HTMLの文章中に他の文字と一緒に記載します。

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

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

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

&lt;は特殊文字で記載します。&amp;&iquest;も特殊文字です。

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

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

HTML表記

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

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

表示結果

文字参照
' アポストロフィ
m² 上付きの2
m³ 上付きの3

数値参照
' アポストロフィ
m² 上付きの2
m³ 上付きの3

今あなたが見ているブラウザでは、ちゃんと表示されていますか?

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

よく使う特殊文字一覧

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

文字・記号 よみかた 特殊文字(文字表記) 特殊文字(数値表記)
< 小なり &lt; &#60;
> 大なり &gt; &#62;
& アンパサンド &#38; &#38;
  半角スペース &nbsp; &#160;
" クオーテーション(二重引用符) &quot; &#34;
' アポストロフィ &apos; &#39;
˜ チルダ &tilde; &#732;
¥ &yen; &#165;
© 著作権 &copy; &#169;
² 上付きの2 &sup2; &#178;
½ 2分の1 &frac12; &#189;
ε エプシロン &epsilon; &#949;
左向き矢印 &larr; &#8592;
右向き矢印 &rarr; &#8594;
株式会社 なし &#12945;
ハート &hearts; &#9829;
チェックマーク &radic; &#8730;
sum記号 &sum; &#8721;
スラッシュ &frasl; &#8260;

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

一流デザイナーのスキルが身に付く

無料カウンセリングはこちら

まとめ

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


のりぴよ
この記事を書いた人
のりぴよ
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp