XHTML/CSS・トップ | CSSプロパティ・目次

●フォントの大きさを指定

 font-sizeはフォントサイズを指定するプロパティです。指定できる値は、長さを表す実数付きの単位や実数付きのパーセントのほかに表に取りまとめてあるlargeなどの絶対的なキーワード、larger、smallerの相対的なキーワードがあります。すべての要素に適用でき、子要素に継承します。以下は、‘実数+単位’の値を指定した例です。

h2 {
  font-size: 1.2em
}
p {
  font-size: 1em
}

 レベル2の見出しに1.2emのフォントサイズを指定し、p要素(段落)には1emの大きさのフォントサイズを指定しています。ちなみに、ここのWebページのp要素のフォントサイズは1.1emです。

【フォントサイズの対比】

 HTMLでは h4(レベル4の見出し)が基準となるフォントサイズの文字を太字にしたものと同じになりますから、h4と p要素を同じフォントサイズの基準にしてほかの要素のフォントサイズを決めると良いでしょう。

 使える単位には以下のものがあります。絶対的なキーワード、相対的なキーワードの一覧表も併せてご参照ください。

【実数+単位】
 実数にem(エム)、ex(エックス)、px(ピクセル)の相対的な値を示す単位、in(インチ)、cm(センチメートル)、mm(ミリメートル)、pt(ポイント)、pc(パイカ)の絶対的な値を示す単位などを付けて指定できます。

【実数+%】
 実数に%を付けて、親要素のフォントサイズに対する割合で指定できます。例えば、親要素ですでに12pt(ポイント)を指定している場合は、120%を指定すると18ptになります。%(パーセント)も相対的な値を示す単位です。

 “実数+単位”と“実数+%”は、マイナス(-)の値は指定できませんが、実数が0の場合に限り、単位を省略することができます。

【絶対的なキーワード】
 xx-small、x-small、small、medium、large、x-large、xx-large の7段階のキーワードも使えます。単語の英訳は small(小さい)、medium(中ぐらいの大きさ)、large(大きい)ですが、mediumが通常のサイズとなります。そして、 xx-smallが一番小さく、xx-largeが一番大きいサイズのキーワードとなっています。xx-smallからxx-largeまで各キーワードの大きさは順に約1.2倍ずつ大きくなります。(CSS1では約1.5倍ずつとなっていました。)

【相対的なキーワード】
 smaller、largerのキーワードで指定して親要素のフォントサイズに対してそれよりも1段階相対的に小さく、1段階相対的に大きく指定することができます。例えば、親要素が「medium」の場合、「smaller」を指定すると「small」のフォントサイズになります。

文字の大きさ 絶対的なキーワード 説明
大きさ xx-small 一番小さい
大きさ x-small 小さい
大きさ small やや小さい
大きさ medium 標準サイズ
大きさ large やや大きい
大きさ x-large 大きい
大きさ xx-large 一番大きい
文字の大きさ 相対的なキーワード 説明
大きさ smaller 相対的に小さい
大きさ larger 相対的に大きい

【バグ】

 xx-small〜xx-largeの絶対的なキーワードに関して、実際にどのような大きさで表示されるかはブラウザの種類とバージョンに依存されます。また、ブラウザの標準モード、互換モードによっても影響されます。ウィンドウズ版IE5.5以前、IE6.0の互換モード、Mac版IE4.5、Mac版IE5.0の互換モード、Opera6.0以前のブラウザは「medium」ではなく、「small」が標準的なサイズになっているため、前述のブラウザでは各キーワードの大きさは1.2倍よりも大きめで全体的に1段階大きく表示されます。

■関連ページ

XHTML/CSS・目次 | フォント・目次

(2009/06/21 改正)

Copyright (C) 2004-2009 http://www.xml.vc/