CSSの基本フォントサイズを相対的に決めるには<文系エンジニアのプログラミング>

フォントサイズを決める方法は大きく分けて２通り。

・タグごとにpxでフォントサイズを指定する

・基本のフォントサイズを決めておき、各要素は相対値で指定する

まず一つ目の方法は一般的な手法で、要素ごとにフォントサイズが明示されているため、可読性が高いです。

二つ目の方法では、すべてのフォントサイズを基本となるサイズに対して相対的に決めることができます。

この手法は、以下のようにまずhtmlに対してフォントサイズをpxで指定します。

html{

  font-size: 14px;

}

次に各要素に対してフォントサイズを指定します。

h1{

  font-size: 1.4rem;

}

h1{

  font-size: 1.2rem;

}

rem(ルートエム)はルートに対して（ここではhtmlがルートとなる）指定されているフォントサイズに対する倍率を指定することで、各要素のフォントサイズを指定しています。

上記の例の場合、h1=14*1.4=20pxとなります。

このような相対的なフォントサイズの指定方法を取っておけば、htmlのフォントサイズを変更するだけで各要素のサイズも自動で連動するためパソコン向けとスマホ向けでサイズを変更したい場合などに威力を発揮します！