スタッフブログStaffblog

フォントサイズについて

2020.10.01
スタッフブログ

新入社員の立原です。

本日はCSSでのフォントサイズの設定についてご紹介します。

私は今までpxで文字設定をしていたのですが、px設定だと「絶対値」での設定になるので、レスポンシブになった際に1つ1つ調整し直さないといけなくなります。

その分時間も労力も使いますよね…

そこで調整がもっと楽になる方法をご紹介します。

まず、「指定値はpxを使わないほうが良い」です!99%くらい!

使うとしたらemかremが良いです。

emはbodyに記載したフォントサイズをみながら、親元を参照してサイズを指定していきます。

例えばbodyに設定したのが10pxで、divに2em(20px)を指定します。そのdiv内にある文字に30pxの文字を表示させたい場合は3em(30px)で設定するのではなく、1.5emで記載する。ということです。

3emにしてしまうと、親となるdivを参照するので、60pxになってしまいます。

今回はbodyが10pxなので、まだわかりやすいですが、細かい数字ですと計算が大変になります…!

逆にremはhtmlに記載したフォントサイズをみながら、常にその場所を参照してサイズを指定していきます。

例えば先程の例を持ち寄ると、htmlに設定したのが10pxで、divに2rem(20px)を指定します。そのdiv内にある文字に30pxの文字を表示させたい場合はそのまま3rem(30px)で設定すればOKです!

html部分のみきりのいい数字(10px等)にしておけば、後はそのままremで設定すれば良いのです。

14pxなら、1.4rem。28pxなら2.8remです。簡単ですね。

この記事をSNSでシェア!