px・rem・%・vw の使い分け — 迷ったら何を使うか

CSSには単位がたくさんあります。全部覚える必要はありません。使う場面が決まっているものだけを押さえましょう。

まず結論

• 文字の大きさ … rem
• 余白 … rem（細かいところは px でもよい）
• 線の太さ・角丸 … px
• 幅 … %、または max-width と組み合わせた px
• 画面いっぱいの高さ … vh

px … 見たままの大きさ

いちばん分かりやすい単位です。1px は画面上の1点ぶん。指定した通りの大きさになります。線の太さや角丸のように「常にこの見た目でいい」ものに向いています。

一方で、文字サイズに px を使うと問題があります。ブラウザの文字サイズ設定を大きくしている人がいても、px 指定の文字は大きくなりません。読みづらさを我慢させてしまいます。

rem … 基準からの倍率

rem は「ブラウザの基準文字サイズの何倍か」を表します。基準は通常16pxなので、1rem = 16px、1.5rem = 24px です。

利点は、利用者がブラウザの設定で文字を大きくしたとき、それに追従することです。だから文字サイズには rem を使います。

• 0.875rem = 14px（小さめの文字）
• 1rem = 16px（本文）
• 1.5rem = 24px（小見出し）
• 2rem = 32px（大見出し）

16で割ればpxに戻せます。慣れるまでは、この対応表を手元に置いておけば十分です。

em … その要素の文字サイズ基準

em は rem と似ていますが、基準が「その要素自身の文字サイズ」です。入れ子にすると掛け算されてどんどん大きくなるので、初心者のうちは rem を使うほうが安全です。

ただし、ボタンの内側の余白のように「文字サイズに比例させたい」場面では em が便利です。文字を大きくしたとき、余白も一緒に大きくなります。

% … 親に対する割合

幅の指定でよく使います。width: 50% なら、親要素の幅の半分です。基準が親なので、親の幅が変われば自分も変わります。

注意点は、height: 100% が思ったように効かないことです。親の高さが決まっていない場合、「何の100%か」が分からないため無視されます。高さは指定しないほうが、たいていうまくいきます。

vw・vh … 画面に対する割合

vw は画面の幅、vh は画面の高さに対する割合です。100vh と書けば、画面の高さいっぱいになります。ファーストビューを画面いっぱいにしたいときに使います。

ただし 100vw には落とし穴があります。縦スクロールバーの幅を含むため、環境によっては画面より少し広くなり、横スクロールが発生します。幅には % を使うほうが安全です。

迷ったときの選び方

• 文字 → rem。これは覚えてしまってよい
• 幅 → まず % を試す。上限を付けたいときは max-width
• 高さ → できるだけ指定しない。中身に決めさせる
• 線・角丸 → px

「高さをできるだけ指定しない」は特に大事です。高さを固定すると、文字が増えたときにはみ出します。中身に応じて伸びるように作っておくのが、崩れないページのコツです。