不思議なこと

CMS で [ ¥ ] を入力したところ、環境によって見え方が異なるようです。

  • あるブラウザでは バックスラッシュで表示
  • あるブラウザでは そのまま ¥ (円マーク) を表示

なぜ、このような違いが出るのでしょうか。

なぜこのような違いが出るのか ?

OS の違い ?

なんとなく知っていたのは「 OS が違う」場合に、こうなる事が多い、ということでした。

Mac で入力したバックスラッシュを、Windows で見ると ¥ で表示され、

逆に、Windows のディレクトリなどで ¥ を入力したら、Mac では全てバックスラッシュで表示される

という具合です。

しかし実は、「 OS が違うから」は不正解のようです。

ではなく、実は

正解は「フォントによる」ようです。

  • 欧文フォントはバックスラッシュ
  • 日本語フォントは ¥

という感じのようです。

Web ページで確実に 円マークを表示するには

フォントファミリーでは不完全

Web ページを作るにあたって、CSS でフォントの種類を指定することはできます。

1font-family {}

しかし、font-family は「 指定フォントがインストールされていなければ、仕方がないので別のフォントを使う 」ため、完全にコントロールするのは難しいようです。

結論は、実態参照

結論としては、 実態参照 を使うことで、この問題に対処できます。

実態参照とは、&[何か文字]; という記述で記号を表示する 仕組みで、

ざっくり「 HTMLで意味のある文字、 < > & “ などをそのまま入力すると HTML と混ざって変になってしまうことがあるので、表示する側もの字を別のものに置き換えた」という理解です。

円マークにも実体参照が用意してあって、次の入力でいけますよ。

1&yen;

地図記号かるた

【サイズ】 W185×D115×H24mm(パッケージサイズ) 【内容】 絵札・読み札各44枚・予備札各2枚<br> 地図記号ガイド

Amazonで詳細を見る