【CSS font-size】文字の大きさ・単位について

シュウ

今回は「【CSS font-size 】文字の大きさ」について解説します！

こんな方に読んでほしい

CSSを学び始めた方へ
font-sizeの使い方について学びたい方へ
font-sizeの単位が多すぎて分からない方へ

今回は「文字(フォント)」に対してfont-sizeプロパティを適応させる解説になります。

[記事の内容]

絶対値と相対値について

単位の種類は「絶対値」と「相対値」の2種類があります。

絶対値について

絶対値とはブラウザの表示領域や親要素のサイズに影響させることなく、指定したサイズが表示します。
よく使用させれるpxが例にあげられます。

相対値について

相対値とはブラウザの表示領域や親要素のサイズを基準として相対的に算出される単位です。
ブラウザの操作によって変化する単位です。
よく使用させれる%などが例にあげられます。

フォントサイズ指定の単位について

フォントサイズを指定する際に、px、%、em、remなど、いろいろな単位があって
わかりずらいですよね。

まず基本として、デフォルトのfont-sizeフォントサイズは16pxと言われています。

px（ピクセル）について

p{font-size: 16px}

一般的に使用されるpxは絶対値で指定できる単位です。
絶対値であるpxは他に影響を受けないため「16px」と指定した際には、必ずそのサイズで表示されます。

%（パーセント）について

html {
  font-size: 100%;  /*--16px--*/
}   
 
div {
  font-size: 200%;  /*--32px--*/
}   
 
div p {
  font-size: 50%;  /*--16px--*/
}

See the Pen
xxGQPRV by shu (@shu0325)
on CodePen.

%は親要素の相対値で指定ができる単位です。

ページ内でfont-sizeを指定していない場合は、100%=16pxとなります。
htmlにfont-size:100%を指定しています。100%はデフォルトサイズの16pxになります。
div要素はhtmlに対しての200%指定になるため、倍の32pxになります。
div pタグは親要素の32(px)×50%=16pxになります。

ページ内でfont-sizeを指定している場合について

html{
    font-size: 14px; /*--14px--*/
}

div{
    font-size: 24px; /*--24px--*/
}

div p{
    font-size: 50%; /*--12px--*/
}

See the Pen
abOQMOb by shu (@shu0325)
on CodePen.

em(エム)について

html {
  font-size: 1em;  /*--16px--*/
}   

div {
  font-size: 2em;  /*--32px--*/
}   

div p {
  font-size: 0.5em;  /*--16px--*/
}

See the Pen
oNXQmyN by shu (@shu0325)
on CodePen.

emは親要素の相対値で指定ができる単位です。

ページ内でfont-sizeを指定していない場合は、1em=16pxとなります。
htmlにfont-size:1emを指定しています。1emはデフォルトサイズの16pxになります。
div要素はhtmlに対しての2em指定になるため、倍の32pxになります。
div pタグは親要素の
32(px)×50%(0.5em)=16pxになります。

ページ内でfont-sizeを指定している場合について

html {
  font-size: 14px;  /*--14px--*/
}   

div {
  font-size: 2em;  /*--28px--*/
}   

div p {
  font-size: 0.5em;  /*--14px--*/
}

See the Pen
gOpQqNR by shu (@shu0325)
on CodePen.

rem(レム)について

html {
  font-size: 1rem;  /*--16px--*/
}   

div {
  font-size: 2rem;  /*--32px--*/
}   

div p {
  font-size: 0.5rem;  /*--8px--*/
}

See the Pen
RwPqdKZ by shu (@shu0325)
on CodePen.

remは常にルート（html）に対して相対値で指定ができる単位です。
remはroot em(ルートエム)の略です。
ルートとは親要素ではなく一番上の階層(html)に指定したフォントサイズが反映されます。

ページ内でfont-sizeを指定していない場合は、1rem=16pxとなります。
htmlにfont-size:1remを指定しています。1remはデフォルトサイズの16pxになります。
div要素はhtmlに対しての2rem指定になるため、倍の32pxになります。
div pタグは一番上の階層の
16(px)×50%(0.5rem)=8pxになります。