円マークとバックスラッシュの関係
May 31, 2006
円マークをwebサイトに表示させたい場合とうするか‥
悩んだことのあるwebクリエイターもいるかと思います。
通常ですと、webサイトでは「円マーク」→「バックスラッシュ」と表記されてしまいます。
元々の意味自体は「バックスラッシュ」で日本語表記だと「円マーク」になります。
韓国のwebブラウザで見ると「ウォンマーク」になるそうです。
▼以下webサイト参照
http://mt.otoku-kan.com/zatugaku/20060426211442.php
▼上記webサイトから抜粋すると
--
円マーク（バックスラッシュ）は特殊文字の中でも、より特殊な分類に入ると
思います。円マークを表示しようとして苦戦している方も少なからず存在する
と思うので、今回は、円マークについて少し解説させて頂きます。
私が、なぜ、円マーク（バックスラッシュ）という言葉を使い、あえて『\』と
いうマークを使わないかとというと、実は個々のブラウザ環境によって『\』の
部分は円マークに見える人と、バックスラッシュに見える人など見え方が違っ
てしまうからです。
当サイトの場合、スタイルシートで {font-family: "ＭＳＰゴシック"}と日本語
対応のフォントを指定してあるので、このフォントに対応しているパソコンを使っ
ている方には円マークに見えると思います。しかし、日本語対応していないパソ
コンにおいては、これはバックスラッシュに見えてしまいます。
--
つまり、「円マーク」を表示したい箇所に下記のようにcssスタイル属性を追加すると表示されます。
font-family: "ＭＳ Ｐゴシック";
CSSの小技-ボックスとボーダー
February 16, 2006
▼今回はこのブログのレフナビにもあるような下記を表示させます。
▼このHTMLソース
<dl class="test060216">
<dt>ボックスとボーダー</dt>
<dd><a href="http://www.zonydesign.com/">ホームページ制作ならゾニーデザイン</a></dd>
<dd><a href="http://www.zonydesign.com/">ホームページ制作ならゾニーデザイン</a></dd>
<dd><a href="http://www.zonydesign.com/">ホームページ制作ならゾニーデザイン</a></dd>
</dl>
▼このCSSソース
.test060216 {
width: 240px;
margin:0 0 10px 0;
padding:10px;
background-color:#f9f9f9;
border-top: 3px solid #FF7052;
border-bottom:1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
.test060216 dt {
color: #FF7052;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
font-weight: bold;
margin-bottom:6px;
}
.test060216 dd {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: left;
line-height:1.8em;
list-style-type: circle;
}