HTMLで円マークとバックスラッシュを正常に表示させる方法！
今回は、HTMLで円マークとバックスラッシュを正常に表示させる方法についてサンプルコード付きで解説します。フォントによって、円マークやバックスラッシュの割り当てられているコードが違うため特殊文字を使います。
HTMLで円マークとバックスラッシュを正常に表示させたい
HTMLで¥や\を記載すると文字化けして、WEBブラウザー上で正常に表示されない場合があります。この記事では、HTMLで円マークとバックスラッシュを正常に表示させる方法を紹介していきます。
下記のサンプルコードは文字化けしている円マークとバックスラッシュです。
なぜ文字化けが起こってしまうのか
では、なぜHTMLで円マークやバックスラッシュを記載すると、WEBブラウザーで文字化けをしてしまうのでしょうか？
その理由は、フォント(日本語、英語)によって円マークやバックスラッシュの割り当てられているコードが違うからです。
MacとWindowsでは使用されているフォントが異なっており、Macでは円マークやバックスラッシュが正常に表示されますが、Windowsでは英語のフォントを採用しているため、文字化けして表示され円マークやバックスラッシュが打てない現象が起こる場合があります。
英語圏では￥などは使わないためコードが登録されていません。
この現象の改善方法として、特殊文字を使います。
特殊文字とは
特殊文字とは、簡単に説明すると¥や\みたいな記号の事です。
HTMLで¥や\を直接記述すると文字化けをしてしまうので、Webブラウザー上で正常に表示させるために特殊文字を使用します。
次章で文字化けをしない方法を説明いたします。
HTMLで円マークとバックスラッシュを正常に表示させる方法
HTMLで円マークとバックスラッシュを正常に表示させる方法を紹介していきます。
円マーク
¥または¥
WEBブラウザーで円マークを記載したい場合には、HTML上で¥を記述すると円マークになり、また¥を記述しても円マークになります。
¥または¥どちらでも円マークになるので、覚えやすい方や自分の好みで記述を変えたら良いと思います。
下記のサンプルコードを参考にして下さい。
バックスラッシュ
\
続いてはバックスラッシュを記載する方法です。
Webブラウザーでバックスラッシュを記載したい場合には、HTML上で\を記述するとバックスラッシュになります。
下記のサンプルコードを参考にして下さい。
半角スペース
また、半角スペースも特殊文字を使う事で記載することが出来ます。
文字と文字との間を少しだけあけたい場合に を使う事で半角スペースを作ることが出来ます。
下記のサンプルコードを参考にして下さい。
