【26-2】font-sizeプロパティでフォントのサイズを指定しよう

前回は、要素のフォントファミリーを指定する font-familyプロパティを使いました。
そのフォントのサイズを指定するには font-sizeプロパティを使います。

本日のINDEX

1. font-sizeプロパティの値
   1. xx-small, x-small, small, medium, large, x-large, xx-large
   2. larger, smaller
   3. 単位付き数値での指定1「相対的な単位」
   4. 単位付き数値での指定2「絶対的な単位」
   5. パーセンテージでの指定

フォント関連のプロパティは、fontショートハンドプロパティで まとめて指定することができます。今回も含めて数回フォント関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【26-1】font-familyプロパティでフォント（書体）を指定しよう

【26-2】font-sizeプロパティでフォントのサイズを指定しよう　←今日はココ

【26-3】font-weightでフォントのウェイト（太さ）を指定しよう

【26-4】font-stretch で condensed などの文字幅を選択しよう

【26-5】font-styleプロパティでフォントを斜体に指定しよう

【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう

【26-7】フォントをまとめて指定する fontショートハンドプロパティ

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font - CSS | MDN

font-sizeプロパティの値

font-sizeプロパティは、数値を単位付きで指定してもイイし、いろいろなキーワードも用意されています。

font-sizeプロパティの値
<absolute-size> 絶対的サイズ	絶対的サイズをキーワードで指定。 xx-small, x-small, small, medium, large, x-large, xx-large mediumがデフォルト値
<relative-size> 相対的サイズ	親要素のフォントサイズに対する相対的サイズをキーワードで指定。 larger, smaller
<length>	正の数値に単位（px, em, ex, rem など）を付けて指定（マイナスの値不可） 親要素のフォントサイズに左右されない
<percentage>	親要素のフォントサイズに対するパーセンテージ（%）で指定
グローバル値	font-size: inherit; 親のfont-sizeの値を継承（コレ書かなくても継承するけど） font-size: initial; 継承した親の font-sizeの値を解消しデフォルト値に戻す font-size: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

xx-small, x-small, small, medium, large, x-large, xx-large

絶対的サイズのキーワードは、「medium」がブラウザデフォルト値です。
ブラウザのデフォルトフォントサイズは16px なので、font-size: medium は 16px になります。

キーワード	倍率	px	同サイズの ヘディング要素
xx-small	3/5（60％相当）	9.6px	---
x-small	3/4（75％相当）	12px	<h6>
small	8/9（88.8％相当）	14.2px	<h5>
medium デフォルト	1（100％）	16px	<h4>
large	6/5（120％相当）	19.2px	<h3>
x-large	3/2（150％相当）	24px	<h2>
xx-large	2（200％相当）	32px	<h1>

実際に指定してみました。

font-size: xx-small での指定 font-size: x-small での指定 font-size: small での指定 font-size: medium での指定（16px） font-size: large での指定 font-size: x-large での指定 font-size: xx-large での指定

ソースコードはこちら。

<div class="mihon">
  <span style="font-size:xx-small">font-size: xx-small での指定</span>
  <span style="font-size:x-small">font-size: x-small での指定</span>
  <span style="font-size:small">font-size: small での指定</span>
  <span style="font-size:medium">font-size: medium での指定（16px）</span>
  <span style="font-size:large">font-size: large での指定</span>
  <span style="font-size:x-large">font-size: x-large での指定</span>
  <span style="font-size:xx-large">font-size: xx-large での指定</span>
</div>
<style>
.mihon {
    font-size:1rem;
    border:solid 1px #ccc;
    padding:.5em .7em
    }
.mihon span {
    display:block;
    margin:.5em 0
    }
</style>

larger, smaller

相対的サイズのキーワード「font-size: larger」を使うと、親要素のフォントサイズに対して1段階ずつ拡大、「font-size: smaller」だと1段階ずつ縮小します。

拡大・縮小率は、先ほどの「絶対的サイズのキーワード」の比率にほぼ従うそうです。（が、若干「絶対的サイズのキーワード」より比率が小さい気がします。ブラウザによるかもだけど）

実際に試してみます。

font-size: smaller での指定4 font-size: smaller での指定3 font-size: smaller での指定2 font-size: smaller での指定1 font-size: medium での指定（16px） font-size: larger での指定1 font-size: larger での指定2 font-size: larger での指定3 font-size: larger での指定4

ソースコードはこちら。
最初に <span style="font-size: medium"> で文字サイズを指定し、その<span>の中に次々入れ子にして smaller, larger を指定しています。
相対値なので、親から継承したフォントサイズをどんどん縮小・拡大していきます。

<div style="font-size:initial" class="mihon">
  <span style="font-size:medium">
    <span style="font-size:smaller">
      <span style="font-size:smaller">
        <span style="font-size:smaller">
          <span style="font-size:smaller">
          font-size: smaller での指定4
          </span>
        font-size: smaller での指定3
        </span>
      font-size: smaller での指定2
      </span>
    font-size: smaller での指定1
    </span>
  font-size: medium での指定（16px）
    <span style="font-size:larger">
    font-size: larger での指定1
      <span style="font-size:larger">
      font-size: larger での指定2
        <span style="font-size:larger">
        font-size: larger での指定3
          <span style="font-size:larger">
          font-size: larger での指定4
          </span>
        </span>
      </span>
    </span>
  </span>
</div>

単位付き数値での指定1「相対的な単位」

フォントサイズを指定する単位には、「相対的な単位」と「絶対的な単位」があります。

「相対的な単位」を使うと、親要素のフォントサイズに対して相対的な値を指定できます。
例えば、「font-size: 1.5em」と指定すれば、親要素のフォントサイズの1.5倍のサイズにできます。

「相対的な単位」には、ざっと次のものがあります。

相対的な単位
em	親のフォントサイズの高さを1とする
ex	小文字「x」のフォントサイズの高さを1とする（実際は、1ex = 0.5em）
rem	ルート（<html>要素）のフォントサイズの高さを1とする（デフォルト値 1rem=16px）

「em」と「ex」の違いは文字の高さ。
em はフォントサイズの高さを 1 とし、exは「emの2分の1」です。

emは、元々は大文字の「M」の高さを１とすると言われ、「M」の読み方が「em（エム）」なので、この単位名になったとか。exは小文字「x」の高さを１とすると言われていたのでこの単位名です。

remはルート要素（root = <htm>l要素）のフォントサイズを1とします。 直近の親要素のフォントサイズからは何の影響も受けません。
ブラウザのデフォルトのフォントサイズは「16px」なので、「1rem = 16px」です。

ちょっと実験してみます。
<span>要素を入れ子にして、親要素に対して1.5emのサイズを指定。中の<span>の1つだけクラス名を付けて、フォントサイズを「1rem（ルートのフォントサイズの1倍）」にしてみます。

<div class="test-rem" style="font-size:initial">
  <span>外側のspan要素<br>
    <span>内側のspan要素1</span><br>
    <span class="rem">内側のspan要素2（remで指定）</span>
  </span>
</div>

<style>
.test-rem span {
	font-size:1.5em /*span要素に「em」で指定*/
	}
.test-rem span.rem {
	font-size:1rem /*クラス名を付けた span要素のみ「1rem」に*/
	}
</style>

結果はコレ↓

外側のspan要素
内側のspan要素1
内側のspan要素2（remで指定）

「1.5em」で指定した <span>は、入れ子になると1.5倍の1.5倍（=2.25倍）になっていますが、「1rem」を指定した <span>は 16pxで表示されます。

単位付き数値での指定2「絶対的な単位」

「絶対的な単位」を使うと、親要素のフォントサイズに関係なくサイズ指定できます。
例えば「font-size: 20px」と指定すれば、親要素のフォントサイズに関係なく「20px」のフォントサイズにします。

「絶対的な単位」には、次のものがあります。（pxを使うのが一般的かな）

絶対的な単位
px	ディスプレイ上の1ピクセルを最小単位にした値。1px = 1インチの96分の1
pt	ポイント。元々DTPで使われる単位。1ポイント = 72分の1インチ = 約1.33px
pc	パイカ。これも元々DTPでの単位。1パイカ = 6分の1インチ = 12pt = 16px
in	1インチ = 約2.54cm = 96px = 72pt = 6pc
mm	メートル法のミリメートル。
cm	センチ。1cm = 1mm

パーセンテージでの指定

親のフォントサイズに対して、相対的に％で指定します。

パーセンテージは「em」で指定するのと同じです。
例えば「font-size: 120%」は「font-size: 1.2em」と同じ。

次回予告

次回は、フォントのウェイト（太さ）を指定する font-weightプロパティを使います。