font-sizeの指定まとめ「px」「%」「em」「rem」

CSSでフォントサイズを指定する際に使われる
「px」「em」「%」「rem」。
それぞれの違いについておさらいしていきます。

ブラウザのデフォルトサイズ

ブラウザのデフォルトのフォントサイズと各単位の関係性
100% = 1em = 1rem = 16px

※1em=16px, 1rem=16px という意味ではありません

絶対値と相対値

フォントサイズの指定には、絶対値と相対値がある！

・絶対値とは
他の要素に影響されない値

・相対値とは
他の要素を基準に数値が決まる値

px（ピクセル）

絶対値指定。
他の要素に左右されない、固定された値となる。

例
html {font-size: 100%;} /* 16px */
.parent {font-size: 20px;}
.child {font-size: 14px;}

.child は常にfont-size: 14px; で表示されます。

em（エム）

相対値指定。
親要素のフォントサイズを基準とした相対的な値となる。

例
html {font-size: 100%;} /* 16px */
.parent {font-size: 20px;}
.child {font-size: 0.5em;} /* 10px */

.child は親要素(.parent)の半分のサイズで表示されます。

%（パーセント）

相対値指定。
親要素のフォントサイズを基準とした相対的な値となる。

html {font-size: 100%;} /* 16px */
.parent {font-size: 20px;}
.child {font-size: 50%;} /* 10px */

.child は親要素(.parent)の半分のサイズで表示されます。

 

em、%はここに注意！
親要素に影響されるため、入れ子の要素にそれぞれフォントサイズを指定した場合、
指定に細かな計算が必要となります。

rem（ルートエムまたはレム）

相対値指定。
最上位の要素（html）のフォントサイズを基準とした相対的な値となる。

html {font-size: 100%;} /* 16px */
.parent {font-size: 20px;}
.child {font-size: 0.5rem;} /* 8px */

.child は最上位の要素(html)の半分のサイズで表示されます。

 

Point!
以下のように、htmlに「font-size: 62.5%；」を指定しておくと、「10px = 1rem」となるので、
pxと同じ考えで計算がしやすくなります。

html {font-size: 62.5%;} /* 10px */
.parent {font-size: 1.6rem;} /* 16px */
.child {font-size: 1.4rem;} /* 14px */