HTMLで円記号とバックスラッシュを同時に表示する方法
HTMLでWebページを作成する際に、 円記号「\」と バックスラッシュ「\」 を同時に表示する方法を紹介します。
CSSのfont-familyを指定する
キーボードで「\」と入力した時に、 それがブラウザでどのように表示されるかはCSSの「font-family」で指定している フォントによって異なります。
"ＭＳ Ｐゴシック"や"メイリオ"などの「和文フォント」を指定している場合は 「円記号」で表示され、 "arial"や"sans-serif"等の「欧文フォント」を指定している場合は 「バックスラッシュ」で表示されます。
| font-family | 表示 |
|---|---|
| 和文フォント | 円記号 |
| 欧文フォント | バックスラッシュ |
このページを読んでいる方は、 普段から日本語を使っているでしょうから、 Webサイトを作成する場合も「和文フォント」を使っていると思います。 このページも和文フォントです。 ですから基本的に「\」と入力したら円記号が表示されているはずです。
バックスラッシュを表示したい場合は、 その部分だけ「欧文フォント」を指定する必要があります。 次のHTMLコードでは欧文フォントの1つ"arial"を指定しています。
<span style="font-family: arial;">\</span>
このコードをブラウザで表示すると次のようにバックスラッシュが表示されます。
特殊文字を使うだけではダメ
バックスラッシュを示す特殊文字として「\」があります。
「\」のかわりに「\」と入力してもいいのですが、
これだけではバックスラッシュは表示されません。
ためしに「\」と入力してみます。
円記号が表示されていますよね。
次はfont-familyで欧文フォントを指定します。
<span style="font-family: arial;">\</span>
バックスラッシュが表示されます。
このように特殊文字を使うだけではダメで、
font-familyで欧文フォントを指定する必要があります。
ベースが欧文フォントの場合は逆
CSSのfont-familyのベースが欧文フォントの場合はこれまでの説明と逆です。
「\」と入力してもバックスラッシュが表示されますから、 円記号を表示するために"メイリオ"などの和文フォントを指定する必要があります。
style="font-family: 'メイリオ'" style="font-family: 'ＭＳ Ｐゴシック'"
ブラウザによっては「pre」要素や「code」要素を等幅フォントで表示するために、 欧文フォントを指定している場合があります。 その場合は円記号を表示させるために和文フォントを指定します。