はじめに
CSSでのフォントサイズの指定方法には２つの分類がある。
絶対値
サイズが固定される。指定されたサイズで表示され、他の要素の影響を受けない。
相対値
指定された要素自体の値を持っていない。サイズは親要素のフォントサイズによって変わる。依存する親要素のフォントサイズが変われば、それに応じて相対値を指定された要素のフォントサイズも変わる。
フォントサイズ指定によく使われる単位
px
絶対値
指定されたサイズが16pxであれば親要素のサイズに関係なくフォントサイズは16px
%
相対値
親要素のフォントサイズに対する割合。親要素のサイズによって指定した要素のサイズも変わる。emと同じ。
sample.css
html {
font-size: 100%;
}
div {
font-size: 16px;
}
/* 親要素の半分の8px */
div > p {
font-size: 50%;
}
em
相対値
％と同じ。親要素のフォントサイズに影響される。
sample.css
html {
font-size: 100%;
}
div {
font-size: 16px;
}
/* 親要素の半分の8px */
div > p {
font-size: 0.5em;
}
rem
相対値
ルート（html）要素が基準になる。
sample.css
/* 16px */
html {
font-size: 100%;
}
/* html要素の2倍の32px */
div {
font-size: 2em;
}
/* html要素の半分の8px */
div > p {
font-size: 0.5em;
}
vw
ビューポートの幅の1/100の大きさを持った単位。ビューポートが100pxの場合1vw、1vwは1pxとなる。
画面サイズによってフォントサイズが変わる。
↓画面サイズによって可変する単位
| 単位 | 説明 |
|---|---|
| vw | ビューポートの幅の1/100(100vwで横幅いっぱい) |
| vh | ビューポートの高さの1/100(100vhで縦幅いっぱい) |
| vmax | ビューポートの高さか幅の大きいほうの1/100 |
| vmin | ビューポートの高さか幅の小さいほうの1/100 |
レスポンシブデザインと画面サイズによって可変する単位
vwで指定すると画面サイズが小さい時にはフォントサイズも小さくなり、画面サイズが大きくなればフォントサイズも大きくなるのでレスポンシブデザインに使用するとフォントサイズが扱いやすくなる。
320px（一番小さいデバイスの幅）を基準としてフォントサイズを指定する。これで画面サイズに合わせてフォントサイズも大きくなってくれる。
サイズ早見表
| px | vw |
|---|---|
| 10px | 3.125vw |
| 11px | 3.4375vw |
| 12px | 3.75vw |
| 13px | 4.0625vw |
| 14px | 4.375vw |
| 15px | 4.6875vw |
| 16px | 5vw |
計算方法
フォントサイズ14pxの場合
14px ÷ 320px = 0.04375(4.375%) = 4.375vw
ブラウザのデフォルト
ブラウザのデフォルトフォントサイズは
100% = 16px = 1em = 1rem