CSS単位の使い分け早見表｜px / rem / em / vw / % の判断基準

結論：この4行だけ覚えろ

文字サイズ → rem 余白 → rem ボーダー・シャドウ → px 迷ったら → rem

計算は Unit Converter で即変換。以下は判断基準だけ。

即決表

何を指定する？	使う単位
font-size	rem
padding / margin	rem
border	px
box-shadow	px
border-radius	px
width（レイアウト）	% + max-width
height（フルスクリーン）	dvh

これで95%のケースは即決できる。

単位早見表

単位	基準	使う場面
rem	html の font-size	文字・余白（基本これ）
px	絶対値	ボーダー・シャドウ・角丸
em	親の font-size	ボタン内部（font-sizeに連動させたい）
%	親要素	レイアウト幅
vw	画面幅の1%	フルスクリーン幅
dvh	動的な画面高さ	ヒーローセクション（vhより安全）

rem を使う理由

/* ✓ rem: ユーザーが「文字を大きく」設定すれば連動 */
font-size: 1rem;

/* ✗ px: ユーザー設定が無視される */
font-size: 16px;

アクセシビリティの基本。 変える理由がなければrem。

px → rem 変換表（Root 16px）

px	rem
12	0.75
14	0.875
16	1
18	1.125
20	1.25
24	1.5
32	2

px を使う場面

ボーダー

border: 1px solid #ccc;

0.5pxは意図通りに描画されない。境界線はpx。

シャドウ・角丸

box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 4px;

視覚的な微調整。remにする利点なし。

em を使う場面

.button {
  font-size: 1rem;
  padding: 0.5em 1em; /* font-sizeに連動 */
}

.button-large {
  font-size: 1.5rem;
  padding: 0.5em 1em; /* 自動で大きくなる */
}

ボタンやアイコンなど、font-sizeに比例させたい場面だけ。

⚠️ ネストが深いとremの方が安全。

vw / dvh を使う場面

フルスクリーン

.hero {
  height: 100dvh; /* vhよりdvhが安全 */
  width: 100vw;
}

⚠️ vw でフォントサイズは危険

/* ✗ 4Kモニターで192pxになる */
font-size: 5vw;

/* ✓ clampで制限 */
font-size: clamp(16px, 5vw, 48px);

% を使う場面

.container {
  width: 90%;
  max-width: 1200px;
}

⚠️ padding/margin の % は親の「幅」基準

padding-top: 10%; /* 親の横幅の10%（縦幅ではない） */

混在OK

.button {
  font-size: 1rem;         /* rem */
  padding: 0.75rem 1.5rem; /* rem */
  border: 1px solid;       /* px */
  border-radius: 4px;      /* px */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* px */
}

「全部remに統一」は不要。用途で使い分ける。

まとめ

判断	結論
文字サイズ	rem
余白	rem
ボーダー・シャドウ	px
レイアウト幅	%
フルスクリーン高さ	dvh
迷った	rem

計算は Unit Converter で。判断はこの表で。