★このページでは、CSSの基本的な仕様について解説しています。
動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。
|
初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう VOL７. フォントに関する設定 その1 ★ 書体とサイズ
１．フォント（書体） font-family: <値>; 書体の指定は「font-family:」の<値>として、「ＭＳ Ｐ明朝」や「Ariel Black」などのフォント名をそのまま書き込む方法と、同系書体のフォントを一括して指定できるキーワードを用いる方法があります。指定したフォントが必ずしもユーザーのパソコンに入っているとは限らないので、表示に著しい齟齬をきたすことがない書体を複数指定しておくと安心です。複数を指定した場合は、先に記述のあるものから優先して反映されます。 ⅰ）まず、フォント名をそのまま書き込む場合ですが、下の例のように各書体名を「,」で区切って並べることにより、複数の指定が可能になります。フォント名の指定に関して、注意点は以下の通りです。 ex. font-family: HG創英角ﾎﾟｯﾌﾟ体,"ＭＳ Ｐ明朝","ＭＳ Ｐゴシック"; ・「ＭＳ Ｐ明朝」のように、書体名にスペースが入っている時は、「" "」もしくは「' '」で囲わなければならない。 ・書体名の記述はフォントによって全角もしくは半角、両方の混入などさまざまで、これを間違うと表示に反映されなくなります。そのパソコンに指定フォントが入っているのに表示に反映されない時は、半角全角が違っていたり、スペースが全角になっていたりすることに原因がある場合が多いのでチェックして下さい。正しい記述の仕方はフォントによって異なりますので、作成ソフトで指定してみてHTMLにどのように記述されているかを見るというのもひとつの方法です。
ⅱ）次に、キーワードで同系書体を一括して指定する場合ですが、以下の5つが指定可能です。なお、フォント名とキーワードは<値>として並べて書くことが出来ます。 serif ... 明朝系 sans-serif ... ゴシック系 cursive ... 筆記体、草書体系 fantasy ... 装飾的なフォント monospace ... 等幅フォント ex. font-family: "ＭＳ Ｐ明朝",serif; font-family: "ＭＳ Ｐゴシック",sans-serif;
２．サイズ font-size: <値>; ⅰ）「数値+単位」で指定する （スタイルシートで使用できる単位については、「Column7.スタイルシートと単位」を参照して下さい。） ex. font-size: 12pt; font-size: 2em;
ⅱ）「%」で指定する 基準となるのは親要素で指定されているサイズで、それに対する割合で指定します。例えば<body>に「12pt」の指定がしてある時、<p>に「150%」を指定すれば、18pt相等の大きさで表示されます。 ex. font-size: 150%;
ⅲ）キーワードで指定する このプロパティに使える<値>には、以下の9つのキーワードがあります。 xx-small ... 非常に小さい x-small ... 小さい small ... やや小さい medium ... 通常サイズ（デフォルト） large ... やや大きい x-large ... 大きい xx-large ... 非常に大きい larger ... 親要素に対して一段階大きく smaller ... 親要素に対して一段階小さく
|
2007.1.27.
