プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
HTML、円マークとバックスラッシュの表示を使い分ける
結論から書くと、円マークは

¥

で固定表示できます。
バックスラッシュは、確実に表示する方法が無さ気です。
全角で


とすればいけますけどね。
半角でバックスラッシュを表示したい場合は

<span style="font-family: Arial;">\</span>

のように、円マークではなくバックスラッシュで表示されるフォントを指定するのが
悪あがきとしては一番可能性が高いと思います。
該当のフォントがPCにインストールされていないと駄目ですが
一般的なフォントを複数指定すれば大多数はカバーできますし、
webフォントを使えば確実性はさらに上がるでしょう。

それでは、詳細を書いていきます。

ふと気になったのですよ。
HTML上で円マークとバックスラッシュの表示って制御できないの(--?って。
要は「ここは円マークで表示」「ここはバックスラッシュで表示」と
確実な使い分けがしたかったのです。
できるかなー(--;

本題に入る前に、なぜ円マークとバックスラッシュの表示が環境によって変わるかを書いておきましょう。

すべてはフォントが原因です。
フォントによってコードに割り当てられている文字が違うのです。

例えばフォントAではコード「005C」に円マークが割り当てられています。
フォントBではコード「005C」にバックスラッシュが割り当てられています。
そのため「コード005Cに対応する文字を表示してよ!」と命令が出されたときに
フォントAを使っていれば円マークが表示されますし、
フォントBを使っていればバックスラッシュが表示されるのです。

もし円マークを入力したはずなのにバックスラッシュが表示されたとしたら、
入力するときはフォントAを、表示するときにはフォントBを使っているのでしょうね。

これが環境によって円マークとバックスラッシュが変わる原因です。

そんなフォントによって表示が切り替わる円マークとバックスラッシュですが、
こちら側できっちり指定できないのかね(--?と思ったのが今回のきっかけです。

ほんで、いろいろと実験をしてみました。
……が、過程には興味が無いと思いますので、さっさと結論に行きましょう。

こんなサンプルコードを実行したらφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
</head>
<body>
    <p span style="font-family: MS ゴシック;">
    ■MS ゴシック;<br>
    (1) <span style="font-family: Arial;">\</span> :バックスラッシュ<br>
    (2) <span style="font-family: MS ゴシック;">\</span> :円マーク<br>
    (3) \ :環境依存<br>
    (4) <span lang="en">\</span> :環境依存<br>
    (5) &yen; :円マーク<br>
    (6) &#92; :環境依存<br>
    (7) &#x5c; :環境依存<br>
    (8) &#xa5; :円マーク<br>
    </p>

    <p span style="font-family: Arial;">
    ■Arial;<br>
    (1) <span style="font-family: Arial;">\</span> :バックスラッシュ<br>
    (2) <span style="font-family: MS ゴシック;">\</span> :円マーク<br>
    (3) \ :環境依存<br>
    (4) <span lang="en">\</span> :環境依存<br>
    (5) &yen; :円マーク<br>
    (6) &#92; :環境依存<br>
    (7) &#x5c; :環境依存<br>
    (8) &#xa5; :円マーク<br>
    </p>
</body>
</html>

こんな結果になりましたφ(--)

■MS ゴシック;
(1) \ :バックスラッシュ
(2) \ :円マーク
(3) \ :環境依存
(4) \ :環境依存
(5) ¥ :円マーク
(6) \ :環境依存
(7) \ :環境依存
(8) ¥ :円マーク

■Arial;
(1) \ :バックスラッシュ
(2) \ :円マーク
(3) \ :環境依存
(4) \ :環境依存
(5) ¥ :円マーク
(6) \ :環境依存
(7) \ :環境依存
(8) ¥ :円マーク


念の為、私の環境での実行結果を画像化したものがこちらですφ(--)

20150308-01.png

ふむふむ(--)

当たり前ですが、表示に使うフォントを指定した

<span style="font-family: Arial;">\</span>

<span style="font-family: MS ゴシック;">\</span>

は、円マークとバックスラッシュの使い分けができていますね。
「指定したフォントがインストールされている環境であれば」の条件付きですが
円マークとバックスラッシュの好きな方を表示させられそうです。

&yen;

&#xa5;

は、フォントに依らず円マークとして表示されました。
円マークを表示したいときは、この2つのどちらかを使えば良さそうですね。

それ以外の

\

<span lang="en">\</span>

&#92;

&#x5c;

は、環境依存(フォントによって円マークかバックスラッシュか異なる)でした。

また、今回試した中には確実にバックスラッシュ表示できるやり方はありませんでした。

なるほど(--ゞ

取りあえず、円マーク表記をしたいときは

&yen;



&#xa5;

を使えば良いですね。
個人的には「&yen;」の方が好みです。

バックスラッシュ表記をしたいときは、該当のフォントが入ってる環境を期待して

<span style="font-family: Arial;">\</span>

のように英字フォントを指定するか、全角表記で


とする、もしくは最終手段で

20150308-02.png

のように画像化して対処することになると思います。

ふーん、バックスラッシュの方は、少しめんどっちーですね(-A-)

どうでもいいっちゃーどうでもいい部分ではあるのですが、
私の経験則的には、詳しくない人ほどこの手のことを気にします。

恐らく円マーク表記で固定する機会の方が多いでしょうし、
お客さまから指摘されても戸惑わないように、最低限

&yen;



&#xa5;

で円マーク表記固定、くらいは覚えてあげてください。

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事