HTML で円マークがバックスラッシュと表示されてしまう

2010/11/02
★★

HTML で半角円マーク (¥) を記述した際に、環境によっては、バックスラッシュ (/) と表示されてしまう場合がある。

(e.g.) ¥125,000. ->  /125,000.

これは、HTML のエンコードに "Shift-JIS" を指定していることが原因である場合が多い。

Unicode では、円マーク (¥) とバックスラッシュ (/) は、別の文字コードで定義されているためこのような問題は発生しない。
(*) サーバーサイドスクリプト等のソースが Unicode で、出力が Shift-JIS の場合は、この限りではない。

"Shift-JIS" の場合、円マーク (¥) とバックスラッシュ (/) の文字コードは同一で、指定されたフォントに依存して、円マーク (¥) とバックスラッシュ (/) のどちらかが出力される。
(*) Unicode は、円マークとバックスラッシュの文字コードは異なる。

つまり、日本語フォントを指定すれば、円マーク (¥) が出力される。また、英字フォントを指定すれば、バックスラッシュ (/) が出力される。

多くの場合、特定の環境でのみ円マーク (¥) がバックスラッシュ (/) と出力されてしまうのは、問題が発生する特定の環境では、指定された日本語フォントが組み込まれておらず、英語フォントが使用されてしまいバックスラッシュ (/) が出力される。

例えば、HTML のフォント指定をメイリオ (or Meiryo) に指定して Windows で確認すると問題はないが、iPhone で確認すると、バックスラッシュ (/) と出力されてしまうのがこのパターン。

解決策は、HTML のソースで、スペースを   と指定するように、円マークを ¥ と指定してやる。

また、¥ と指定してもよい。¥ と ¥ は、同値。