HTMLで円マークとバックスラッシュを正常に表示させる方法!

今回は、HTMLで円マークとバックスラッシュを正常に表示させる方法についてサンプルコード付きで解説します。フォントによって、円マークやバックスラッシュの割り当てられているコードが違うため特殊文字を使います。

コンテンツ [表示]

  1. 1HTMLで円マークとバックスラッシュを正常に表示させたい
  2. 1.1なぜ文字化けが起こってしまうのか
  3. 1.2特殊文字とは
  4. 2HTMLで円マークとバックスラッシュを正常に表示させる方法
  5. 2.1円マーク
  6. 2.2バックスラッシュ
  7. 2.3半角スペース

HTMLで円マークとバックスラッシュを正常に表示させたい

HTMLで¥\を記載すると文字化けして、WEBブラウザー上で正常に表示されない場合があります。この記事では、HTMLで円マークとバックスラッシュを正常に表示させる方法を紹介していきます。

下記のサンプルコードは文字化けしている円マークとバックスラッシュです。

円マークになる

なぜ文字化けが起こってしまうのか

では、なぜHTMLで円マークやバックスラッシュを記載すると、WEBブラウザーで文字化けをしてしまうのでしょうか?

その理由は、フォント(日本語、英語)によって円マークやバックスラッシュの割り当てられているコードが違うからです。

MacとWindowsでは使用されているフォントが異なっており、Macでは円マークやバックスラッシュが正常に表示されますが、Windowsでは英語のフォントを採用しているため、文字化けして表示され円マークやバックスラッシュが打てない現象が起こる場合があります。

英語圏では¥などは使わないためコードが登録されていません。

この現象の改善方法として、特殊文字を使います。

特殊文字とは

特殊文字とは、簡単に説明すると¥\みたいな記号の事です。

HTMLで¥\を直接記述すると文字化けをしてしまうので、Webブラウザー上で正常に表示させるために特殊文字を使用します。

次章で文字化けをしない方法を説明いたします。

HTMLで円マークとバックスラッシュを正常に表示させる方法

HTMLで円マークとバックスラッシュを正常に表示させる方法を紹介していきます。
 

円マーク

¥または¥

WEBブラウザーで円マークを記載したい場合には、HTML上で¥を記述すると円マークになり、また¥を記述しても円マークになります。

¥または¥どちらでも円マークになるので、覚えやすい方や自分の好みで記述を変えたら良いと思います。

下記のサンプルコードを参考にして下さい。

バックスラッシュ

\

続いてはバックスラッシュを記載する方法です。

Webブラウザーでバックスラッシュを記載したい場合には、HTML上で\を記述するとバックスラッシュになります。

下記のサンプルコードを参考にして下さい。
 

半角スペース

 

また、半角スペースも特殊文字を使う事で記載することが出来ます。

文字と文字との間を少しだけあけたい場合に を使う事で半角スペースを作ることが出来ます。

下記のサンプルコードを参考にして下さい。

あわせて読みたい
HTMLの特殊文字とは?特殊文字まとめ!のイメージ
HTMLの特殊文字とは?特殊文字まとめ!
今回はHTMLの特殊文字(エスケープシーケンス)についてご紹介します!特殊文字を使う理由はもちろん、空白や三角・矢印などのよく使う記号から少しマニアックな特殊文字まで一覧でまとめましたので、ぜひ皆さんも活用してみてください!

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事