文字サイズは色々な単位で指定する事が出来ます。

今回は文字サイズの単位について説明します。

px(ピクセル)

ピクセルはディスプレイの解像度に対する絶対値になります。従って、解像度によって文字サイズが変わります。高解像度ディスプレイの場合、文字が小さく見える可能性があります。

%(パーセント)

親要素の文字サイズに対しての割合になります。

例

HTML

<div class="root">
  <div class="main">
    <div class="title">タイトル1</div>
    <div class="contents">文章を書きます。あああああ。</div>
  </div>
</div>

CSS

.root {
  font-size: 24px;
}
.main {
  font-size: 32px;
}
.box {
  font-size: 100%;
}
.contents {
  font-size: 50%;
}

結果

.main クラスのfont-sizeの割合になるので、100%=32pxとなります。従って、タイトルが32px、コンテンツ文章が16pxとなります。

EM(エム)

em は親要素の文字サイズを基準にしたサイズ指定になります。親要素のサイズ = 1em となります。

例

HTMLは前回の例と同じなので割愛します。

CSS

.root {
  font-size: 24px;
}
.main {
  font-size: 32px;
}
.box {
  font-size: 1em;
}
.contents {
  font-size: 0.5em;
}

結果

.main クラスの font-size が基準となるので 1em = 32px となります。従って、タイトルが 32px、コンテンツ文章が 16px となります。

REM(レム)

rem はルート要素(最上位の要素)の文字サイズを基準にしたサイズ指定になります。ルート要素のサイズ = 1rem となります。

例

HTMLは前回の例と同じなので割愛します。

CSS

.root {
  font-size: 24px;
}
.main {
  font-size: 32px;
}
.box {
  font-size: 1rem;
}
.contents {
  font-size: 0.5rem;
}

結果

.root クラスの font-size が基準となるので 1rem = 24px となります。従って、タイトルが 24px、コンテンツ文章が 12px となります。

font-sizeを指定しない場合

font-sizeを指定しない場合、文字サイズは16pxとなります。サイズを相対的に指定する場合、16pxが基準となります。

最後に

特にありません。