単位の種類
px
デバイスの1ドットを表す絶対的な値。現在はほぼ全てのブラウザで小数点を表すことができる。ただし、borderなど一部プロパティでは小数点を許容しなかったりする。
html要素のfont-size
デフォルトで16pxになっています。
用途
- borderなどの可変させたくない要素
em
CSS3から登場しました。font-sizeを基準として相対的な値となる。もし、font-sizeが16pxだったら2emの場合は32pxになります。
font-size値の検索方法
自分自身の要素にあるか調べる。もしヒットしなかった場合はさらに上位の要素をみる。それでももし見つからなかった場合は最上位のhtml要素のfont-sizeを見たりします。
用途
- letter-spacingや擬似要素との間隔
rem
CSS3から登場しました。ルート要素(通常はhtml要素)のfont-sizeを基準とした相対的な値になります。emと違って要素が入れ子になっていても影響を受けません。
用途
フォントサイズ
要素の大きさ・margin、paddingなど。
ブラウザのフォントサイズを変更したときに、要素の余白も相対的に変更してくれます。(要するにOSのズーム機能を使った時と同じような挙動になるのでレイアウトが崩れにくくなるのです。)
%
親要素の横幅や縦幅に対する割合になります。
用途
全体的なレイアウト
横幅いっぱいに広げたいなどです。レイアウトにpxやremなどの固定値を使ってしまうと画面から見切れたりする場合があります。
vw、vh
ブラウザの横幅(正確に言えば「viewportの横幅」)に対する相対的な値になります。1vwであればブラウザの横幅の1%になります。
注意点
vwはスクロールバーの幅を含むため、「width:100vw;」と指定してしまうとその分横スクロールが発生してしまいます。なので、あまり全体的なレイアウトには向きません。
用途
- ヒーローイメージやモーダルウィンドウなど画面を占有して表示させる要素
使い分けパターン
主に3パターンあります。
px単位を用いる派
全てのCSSをpx単位で指定します。
デメリット
ブラウザの設定から文字サイズを変更しても一切反映されない。
代替案としてはズーム機能を使うなどがある。ただ、Windowsでは若干使いづらい部分があったりするので、アクセシビリティを若干損ねることになるのがデメリットではある。
font-sizeのみemやremを用いる派
font-sizeプロパティにemやremなどの単位を指定する方法です。
メリット
ブラウザの文字サイズ設定が変更された際にちゃんと反映される。
デメリット
フォントサイズを拡大した際に、font-size以外の要素がpxで指定されているので全体的なレイアウトはそのままでフォントサイズのみが大きくなる。
emやremを用いる派
文字サイズ設定を変更した際に、全体的なレイアウトの比率を維持したまま文字サイズを変化させることができます。
emとremの使い分け
基本はemを使います。ただ、一部祖先要素のfont-sizeに影響を受けたくない場合はremを使うようにすると良いでしょう。
この記事へのコメントはありません。