構文

font-size : サイズ;

説明文

 「font-size」では文字の表示サイズを指定できる。例えば,タイトルを20ptで表示するなどといった指定が行える。  サイズの指定には以下のような単位を利用することが可能だ。

単位意味
inインチ(1インチ=25.4mm)
cmセンチ・メートル
mmミリ・メートル
ptポイント(72ポイント=1インチ)
pcパイカ(1パイカ=12ポイント)
pxディスプレイの表示に利用する画素(ピクセル)
em要素で指定されているフォントのサイズを基準とした倍数。例えば,12ptのサイズを指定している要素に2emを指定すると,倍の24ptとなる
ex要素で指定されている小文字フォントのサイズを基準とした倍数
%親となる要素で指定されているフォントのサイズを基準とした割合。例えば,<body>タグで10ptを指定している場合に,<p>タグで120%を指定すると,12ptとなる

 また,「xx-small」から「xx-large」の7段階のサイズ名を指定することも可能。ただし,それぞれのサイズの段階はWebブラウザによって異なっており,必ずしも同じサイズになるとは限らない。

 さらに,「larger」を指定すると要素に指定されているフォントのサイズより1段階大きなフォントを,「smaller」を指定すると1段階小さなフォントを表せる。

文字サイズ意味
xx-smallもっとも小さなサイズ
x-smallより小さなサイズ
small小さなサイズ
mediumWebブラウザの基準となるサイズ。サイズはWebブラウザによって異なる
large大きなサイズ
x-largeより大きなサイズ
xx-largeもっとも大きなサイズ
larger要素に指定済みのサイズより1段階大きなサイズ
smaller要素に指定済みのサイズより1段階小さなサイズ

使用例

● CSSの定義

h1 { font-size : x-large ; }
p { font-size : 10pt ; }
strong { font-size : larger; }

● HTMLの例

<h1>フォントのサイズ指定</h1>
<p>フォントのサイズを指定したい場合は,スタイルシートに「<strong>
font-size</strong>」で指定する。例えば,フォントのサイズを12ptにする
といった指定が行える。</p>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目