【font-size】フォントサイズを指定

font-sizeプロパティでは、フォントのサイズ(大きさ)を指定することができます。

フォントの大きさの指定方法は、small、largeなど7段階の絶対サイズで指定する方法、またはlargerなど親要素に対する相対サイズで指定する方法、他にも数値やパーセントで指定する方法などがあります。 それぞれの詳しい指定方法については下記の「値」の項目を参照下さい。

またInternet Explorer8(IE8)以下の場合、指定する単位によっては文字サイズが固定される事があります。 例えば、IE8以前のブラウザの「表示」メニューには「文字のサイズ」という項目があります。 通常はそこで文字サイズのみを変更できるのですが、CSSでフォントサイズを指定する際にpx、pt、pc、mm、cm、inなどの単位を使用した場合、そこの部分の文字サイズは変更されなくなります。

IE以外のブラウザの場合は、単位の種類によってサイズが固定されることはありませんが、IE8以下も対象としてホームページなどを作成する場合は注意して下さい。

書式

  • font-size : ……… フォントの大きさを指定する

★:キーワード(下記参照)、実数値+単位、パーセント値

実数値+単位で指定
数値にpxやemなどの単位を付けてフォントサイズを指定します。負の値は指定できません。
パーセント値+%で指定
フォントサイズを親要素のフォントサイズに対する割合で指定します。
xx-small、x-small、small、medium、large、x-large、xx-largeで指定
フォントサイズを7段階のキーワードで指定します。「xx-small」が最小、「medium」が標準、「xx-large」が最大となり、css2.1では1段階上がるごとに約1.2倍ずつ大きくなります。ただし実際に表示されるサイズはフォントの種類やブラウザによって異なります。
smaller、larger
親要素のフォントサイズに対する相対サイズで指定します。「smaller」で親要素より一段階小さく、「larger」で親要素より一段階大きなサイズとなります。例えば、親要素のフォントサイズが「medium」の時、「larger」を指定するとフォントサイズは「large」となります。なお親要素のフォントサイズが上記の7段階以外の場合は、ブラウザによって表示サイズが異なります。

使用した時の例

.sample1 {font-size: xx-small;}
.sample2 {font-size: x-small;}
.sample3 {font-size: small;}
.sample4 {font-size: medium;}
.sample5 {font-size: large;}
.sample6 {font-size: x-large;}
.sample7 {font-size: xx-large;}
.sample8 {font-size: smaller;}
.sample9 {font-size: larger;}
.sample10 {font-size: 15px;}
.sample11 {font-size: 15pt;}
.sample12 {font-size: 1.5em;}
.sample13 {font-size: 70%;}
.sample14 {font-size: 120%;}
<div class="sample1">文字サイズ「xx-small」</div>
<div class="sample2">文字サイズ「x-small」</div>
<div class="sample3">文字サイズ「small」</div>
<div class="sample4">文字サイズ「medium」</div>
<div class="sample5">文字サイズ「large」</div>
<div class="sample6">文字サイズ「x-large」</div>
<div class="sample7">文字サイズ「xx-large」</div>
<div class="sample8">文字サイズ「smaller」</div>
<div class="sample9">文字サイズ「larger」</div>
<div class="sample10">文字サイズ「15px」</div>
<div class="sample11">文字サイズ「15pt」</div>
<div class="sample12">文字サイズ「1.5em」</div>
<div class="sample13">文字サイズ「70%」</div>
<div class="sample14">文字サイズ「120%」</div>

ブラウザ上の表示例

文字サイズ「xx-small」
文字サイズ「x-small」
文字サイズ「small」
文字サイズ「medium」(標準サイズ)
文字サイズ「large」
文字サイズ「x-large」
文字サイズ「xx-large」
文字サイズ「smaller」
文字サイズ「larger」
文字サイズ「15px」
文字サイズ「15pt」
文字サイズ「1.5em」
文字サイズ「70%」
文字サイズ「120%」

対応ブラウザなどのデータ

初期値 medium 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / font
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~