font-sizeプロパティの説明
CSSのfont-sizeプロパティは、ブラウザに表示される文字の大きさ、つまりフォントサイズを指定します。通常はブラウザの既定値で自動的に文字の大きさが決まりますが、これを変更したい箇所に任意のフォントサイズを適用できます。
ここで指定された値は、その効果が継承する範囲を含めてemやexといった<length>値の基準になります。
font-sizeに指定できる値
<absolute-size>- 既定のフォントサイズを基準とした大きさを表す絶対的なキーワード値です。サイズは全8段階用意されています。
xx-small：超極小サイズを表しますx-small：極小サイズを表しますsmall：小サイズを表しますmedium：既定サイズを表しますlarge：大サイズを表しますx-large：極大サイズを表しますxx-large：超極大サイズを表しますxxx-large：超々極大サイズを表します
<relative-size>- 親要素が持つフォントサイズを基準に、それよりも大きいか小さいかを表す相対的なキーワード値です。
smaller：一段小さいサイズを表しますlarger：一段大きいサイズを表します
<length>- CSSで指定できる寸法を表すデータ型の値です。ピクセル、インチ、メートル法の単位による絶対値や、フォントサイズやビューポートの大きさを基準とした相対値が使用できます。負の数値は扱えません。
<percentage>- 親要素のフォントサイズに対する相対的な大きさを割合で指定します。
font-sizeの使い方とサンプルコード
font-sizeプロパティの構文は以下の通りです。
/* <absolute-size>値 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;
/* <relative-size>値 */
font-size: smaller;
font-size: larger;
/* <length>値 */
font-size: 16px;
font-size: 1em;
font-size: 1.5rem;
/* <percentage>値 */
font-size: 80%;
font-size: 120%;
/* グローバル値 */
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: unset;
font-sizeの実例
それでは実際にfont-sizeプロパティの書き方を見ていきましょう。以下の例は、使用中のブラウザのフォントサイズを基準にして、font-sizeの値を変えた場合にどのように表示されるのかを比較したものです。
<section class="samp_box">
<p id="fs_m">これが基準となるフォントサイズです。</p>
<p id="fs_xxs">font-size: xx-small;</p>
<p id="fs_xs">font-size: x-small;</p>
<p id="fs_s">font-size: small;</p>
<p id="fs_l">font-size: large;</p>
<p id="fs_xl">font-size: x-large;</p>
<p id="fs_xxl">font-size: xx-large;</p>
<p id="fs_xxxl">font-size: xxx-large;</p>
</section>
.samp_box {
overflow: auto;
width: 100%;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
}
#fs_m {
font-size: medium;
}
#fs_xxs {
font-size: xx-small;
}
#fs_xs {
font-size: x-small;
}
#fs_s {
font-size: small;
}
#fs_l {
font-size: large;
}
#fs_xl {
font-size: x-large;
}
#fs_xxl {
font-size: xx-large;
}
#fs_xxxl {
font-size: xxx-large;
}
相対的なフォントサイズの指定
続いて、親要素のフォントサイズを基準にした相対的な指定のサンプルです。この場合は、共通の値を子要素に指定しても親要素のフォントザイズによって結果が変わります。
<section class="samp_box" id="fs_m">
<p>基準値：medium</p>
<p id="fs_ser">font-size: smaller;</p>
<p id="fs_ler">font-size: larger;</p>
</section>
<section class="samp_box" id="fs_xs">
<p>基準値：x-small</p>
<p id="fs_ser">font-size: smaller;</p>
<p id="fs_ler">font-size: larger;</p>
</section>
<section class="samp_box" id="fs_xl">
<p>基準値：x-large</p>
<p id="fs_ser">font-size: smaller;</p>
<p id="fs_ler">font-size: larger;</p>
</section>
.samp_box {
overflow: auto;
width: 100%;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
}
#fs_m {
font-size: medium;
}
#fs_xs {
font-size: x-small;
}
#fs_xl {
font-size: x-large;
}
#fs_ser {
font-size: smaller;
}
#fs_ler {
font-size: larger;
}
フォントサイズの継承が重なった時に起こる複合
相対値でフォントサイズを指定すると、継承された値を参照していくため、それが重なって複合（compounding）する場合があります。これは不具合ではありませんが、よく理解しておかないと意図しない箇所で文字の大きさが乱れます。
例えば、入れ子にした要素に同じ相対値を重ねて指定した場合は、ひとつ前に変更が加えられた大きさを元に、さらに変更が加えられるため、より大きな文字が表示されたり小さな文字が表示されます。
<section class="samp_box" id="fs_m">
<div>1階層目：font-size: medium;
<div id="fs_up">2階層目：font-size: 1.2em;
<div id="fs_up">3階層目：font-size: 1.2em;</div>
</div>
</div>
</section>
<section class="samp_box" id="fs_m">
<div>1階層目：font-size: medium;
<div id="fs_down">2階層目：font-size: 0.8em;
<div id="fs_down">3階層目：font-size: 0.8em;</div>
</div>
</div>
</section>
.samp_box {
overflow: auto;
width: 100%;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box div {
margin: 1rem 0 0;
padding: .5rem;
border: 1px solid #ccc;
background: #fff;
}
#fs_m {
font-size: medium;
}
#fs_up {
font-size: 1.2em;
}
#fs_down {
font-size: 0.8em;
}
複合を回避できるremによるフォントサイズの指定
親要素のフォントサイズではなく文書のルート要素に対して相対的な値を取るremは、複合を回避する目的で考案されました。複合は上手く使えば便利な機能ではあるのですが、複雑な入れ子構造のサイトや複数の開発者が関わるプロジェクトには不向きでした。
remを使うと、常に参照する値が決まっているため、親要素のフォントサイズが変わったとしても、期待した文字の大きさを表示させやすくなります。
先ほどのサンプルで使用していたfont-sizeの単位を、emからremに変えてみましょう。こうすることで、同じ値を指定した要素の文字列は入れ子になっていたとしてもルート要素である<html>のフォントサイズを基準にします。