＞ ＞ 円マークがバックスラッシュで表示される理由

円マークがバックスラッシュで表示される理由

Posted at April 9,2014 1:55 AM
Tag：[CSS, HTML]

円マーク（円記号）がバックスラッシュで表示される理由について調べてみました。

円マークがバックスラッシュで表示される理由

１．はじめに

ブログ記事に半角円マーク「\」を入力して投稿すると、実際のページでは半角バックスラッシュで表示されることがあります。

例として、下のスクリーンショットは当ブログの記事編集画面です。赤枠部分に円マークを入力しています。

下のスクリーンショットは上の記事の実際の表示画面です。円マークがバックスラッシュで表示されていることが分かります。

できれば円マークはそのまま円マークで表示したいところです。

２．円マークがバックスラッシュで表示される理由

１項のサンプルで大体予想がつくと思いますが、円マークがバックスラッシュで表示される理由は、CSSで指定したフォントの問題です。

円マークとバックスラッシュは、文字表記は異なりますが、同じコード（Unicode表記でU+005c）を使用しているため、フォントの種類によってこの問題が発生します。

おおむね英語フォントではバックスラッシュ、日本語フォントでは円マークになるようです。

１項のバックスラッシュになる原因は、下記のようにブログ記事ページのCSSのfont-familyの先頭に欧文フォントを指定していたためです。

font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3",～

３．円マークをそのまま表示する（その1）

円マークがバックスラッシュで表示される問題は、以前エントリーした「三点リーダが真ん中に表示されない理由」と同じ対処が適切と思われます。

なので、対処案の一つとして、円マークを下記のようにspan要素などで括り、lang属性値「ja」を指定する方法があります。

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

ただしhtml要素にlang属性を指定しておけば、個別の設定は不要です。

<html lang="ja" ...>

バックスラッシュにしたい場合は、lang属性「en」を指定します。

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

デフォルトのfont-familyはブラウザに依存するので、上記のHTMLに対応するCSSを個別に設定しておくとよいようです。font-familyの設定について分からない方は「いまさら聞けないCSS font-familyのまとめ」をご覧ください。

span:lang(ja){
    font-family: (和文フォント優先の指定)
}
span:lang(en){
    font-family: (欧文フォント指定)
}

html要素にlang属性を設定しているのであれば以下のCSSで大丈夫だと思いますが、完全に確認できてないかもしれないので色々試してみてください。

*:lang(ja){
    font-family: (和文フォント優先の指定)
}
span:lang(en){
    font-family: (欧文フォント指定) // span指定の場合のみCSSを上書き
}

参考までに上記の設定を行ったサンプルを掲載しておきます。

円マークとバックスラッシュを表示するサンプル
円マークとバックスラッシュを表示するサンプル

手修正できない場合はjQueryなどで一括変換する手もありますが、円マークとバックスラッシュの区別がつかない場合は使えません。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
    $('body').each(function(){
        var txt = $(this).html();
        $(this).html(txt.replace(/\\/,'<span lang="ja">\\</span>'));
    });
});
</script>
<body>
\
</body>

４．円マークをそのまま表示する（その2）

円マークは文字実体参照で表記することが可能です。

&yen;

と記述すれば、円マークで表示することができます。

表示例

¥

ちなみに「&yen;」はUnicodeの「U+00a5」にマッピングされます。

冒頭の説明では「U+005c」と書きましたが、「U+00a5」がUnicodeの本来の円マークです。

ただしWindowsの場合、キーボードからの円マークの入力は「U+005c」になり、表示を（クライアントツールのフォントに依存しますが）円マークになるようにしているようです。

ざっと調べただけなので、認識誤り等ありましたらどこかでつぶやいてください。

５．参考サイト

参考サイトは下記です。ありがとうございました。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）