構文
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 | 小さなサイズ |
medium | Webブラウザの基準となるサイズ。サイズは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>
● 表示結果
関連項目
- font - フォント関連の設定を一括設定
- font-family - 表示フォントの種類を指定する
- font-style - フォントの形状を指定する
- font-variant - スモール・キャピタルの設定
- font-weight - 文字の太さを指定する
- text-decoration - 文字列に装飾を加える