フォントサイズをコードで書いている中で、emやrem、%が出てきたのでその関係について調べました。
定義方法
フォントサイズの定義方法は、絶対値と相対値の2つがあります。
- 絶対値：他の要素に依存せずに定義される。px
- 相対値：他の要素によって定義される。%、em、rem、vw、vh
それぞれのフォントサイズの定義について
px
絶対値での指定となるので、どのデバイスでも、同じピクセルサイズで表示されます。
%
考え方：「親要素の◯%」となります。
stylusで書くとこのような感じです。
html
font-size 20px
p
font-size 50% /* これは10pxになる */
em
考え方：「親要素の◯」となります。
基本的には%と同じ考え方で、小数点で考える点だけが違う点となります。
emは、アルファベットの大きさのベースとなる「M」に由来しているとのことです。
html
font-size 20px
p
font-size 0.5em /* これは10pxになる */
rem
考え方：「もととなっている要素の◯」となります。
emに「root」のrを足したのがこのremで、親要素が複雑でわかりにくくなった場合も基準点を同じにしておくことで簡単に対応できるのがメリットになります。
ルート要素とはhtml要素のフォントサイズのことです。
html
font-size 100% /* 100%は16pxになる */
div
font-size 2em /* これは32pxになる */
vw
考え方：「画面幅の◯」となります。
vwは「viewport width」の略で、ビューポートの幅に対してどれくらいの幅にするのかを定義しています。
画面幅によって細かく文字サイズを調整できるので、目立つ文字列に使用されたりします。
p
font-size 0.05vw /* 画面幅が1000pxのとき、50pxのフォントサイズ。500pxの画面幅のとき、25pxのフォントサイズ */
どのように使うのが良いのか
ブラウザごとにフォントの大きさを変える必要がない場合は、remやemで書くのが良いでしょう。
remかemかはその状況にもよります。
基準となるフォントサイズを font-size = 62.5% とすると、そのフォントサイズを10pxにすることができます。
ですので
html
font-size 62.5% /* これで基準が10pxになる */
h1
font-size 3rem /* h1は基準の3倍、つまり30pxになる */
とすることができます。
これで、かなり使いやすく、かつ変更にも強いフォントサイズを作ることができます。
また一つ学びました。