CSSの単位はどれを使う？

font-size: 16px、width: 50%、margin: 1rem——CSSの数字のうしろに付く単位、結局どれを使えばいいのか迷いますよね。この記事で、よく使う4つの正体と「迷ったらこれ」の使い分けを整理します。

4つの単位の正体

大事なのは「何を基準にした大きさか」がそれぞれ違うこと。pxだけが固定で、あとの3つは何かに連動して伸び縮みします。

pxは「そのままの大きさ」

いちばん直感的な単位。書いた数字の大きさに、そのままなります。境界線の太さ（border: 1px）や細かい余白など、伸び縮みしてほしくない場所に向いています。

.card {
  border: 1px solid #eee;   /* 線の太さは常に1pxのままでいい */
  border-radius: 12px;      /* 角丸の大きさも固定でいい */
  padding: 16px;            /* 内側の余白も固定が扱いやすい */
}

逆に言うと、pxは画面がどれだけ狭くても大きくても変わりません。「スマホでは幅いっぱい、パソコンでは半分」のような柔らかい指定は、pxでは書けない——そこで次の3つの出番です。

%は「親の大きさ」で決まる

width: 50%は「親の幅の半分」。画面が狭くなれば親も縮むので、いっしょに縮んでくれます。横幅を柔らかく決めたいときの主役です。

img {
  max-width: 100%;   /* 親からはみ出さない、の定番 */
}

remは「基準の文字サイズ」の倍率

remはページの基準文字サイズ（標準16px）を1とする倍率です。1rem＝16px、1.5rem＝24px。16で割れば換算できます。よく使うサイズの換算はこの表のとおりです。

remの本領は、ブラウザの文字サイズ設定に連動すること。「文字を大きく」設定にしている人のページでは、remで書いた文字はちゃんと大きくなります。pxで書いた文字は、設定を変えても大きくなりません。

vw/vhは「画面の大きさ」で決まる

100vw＝画面の幅いっぱい、100vh＝画面の高さいっぱい。ファーストビューを画面ぴったりに作るときの定番です。

.hero {
  height: 100vh;   /* 画面の高さいっぱいのヒーロー */
}

ときどき見かけるその他の単位

出番は少なめですが、読めるようにしておくと安心な単位もまとめておきます。

emはremとよく似ていますが、基準が「ページ全体」ではなく「その要素自身の文字サイズ」。padding: 1emなら、その要素の文字サイズと同じ余白になります。ただしfont-sizeそのものにemを使ったときだけは親の文字サイズが基準になるので、入れ子にすると倍率が掛け算されてずれやすい——迷ったらremを選べば大丈夫です。

迷ったらこの使い分け

• 文字サイズ → rem（設定に連動して親切）。練習のうちはpxでもOK
• 余白・線の太さ → px（微調整しやすく、ずれない）
• 横幅 → %やmax-width（画面に合わせて縮む）
• 画面いっぱいの高さ → 100vh

「文字はrem、幅は%、こまかい調整はpx」——この3行だけ覚えれば、実戦はほぼ困りません。実際のCSSに当てはめると、こんな景色になります。

h1 { font-size: 2rem; }        /* 文字はrem */
p  { font-size: 1rem; }

.container {
  max-width: 800px;            /* 上限だけpxで決めて */
  width: 100%;                 /* ふだんは%で画面なりに */
}

.card {
  padding: 16px;               /* 余白はpxで固定 */
  border: 1px solid #eee;      /* 線もpx */
}

.hero { height: 100vh; }       /* 画面いっぱいだけvh */

まとめ

1. 単位の違いは「何を基準に伸び縮みするか」——pxだけが固定、%は親、remは基準文字サイズ、vw/vhは画面
2. 文字はremにすると、ブラウザの文字サイズ設定に連動して親切
3. 迷ったら「文字はrem、幅は%、こまかい調整はpx」

単位を意識して選べるようになると、どんな画面でも崩れない、しなやかなページに近づきます。