【CSS】px / % / rem / em / vw の違い【図解】

2026年7月25日

どうも、くじらいどです。

CSSの数字のうしろに付いてる px とか rem とか vw。なんとなく px だけ使ってる人、けっこう多いと思います。

これ、全部「何を基準にした長さか」が違うだけなんですよね。そこさえわかれば、使い分けはそんなに難しくないと思います。

この記事では px / % / em / rem / vw の違いを、実際に動く例を見ながら整理したいと思います。

くじらいど

AIにコードを書いてもらっても「なんでここremなの？」がわからないと直せないんですよね。ここは押さえておくとラクです。

結論：違いは「何を基準にするか」だけ

先に全体像の表を出しておきます。

単位	読み方	基準にするもの	ひとことで
px	ピクセル	基準を持たない（固定値）	親や画面に左右されない固定値
%	パーセント	親要素	親のサイズに対する割合
em	エム	文字サイズ（font-sizeは親）	入れ子にすると膨らむ
rem	レム	ページ全体の文字サイズ	入れ子にしても膨らまない
vw / vh	ブイダブリュー / ブイエイチ	画面（ウィンドウ）の幅・高さ	画面サイズに連動する

▼ 基準の位置を図にするとこうなります

画面（ウィンドウ）＝ vw / vh の基準

html（ページ全体）＝ rem の基準

親要素＝ % の基準

この要素自身＝ em の基準

px は基準を持たない固定値（＝この図の外）

ここから1つずつ見ていきます。

px｜固定の長さ

一番わかりやすい単位です。16px と書いたら、どこに書いても16px。親も画面サイズも関係ありません。

.box {
  width: 200px;
  font-size: 16px;
}

▼ 表示例

200px 固定

画面を狭くしても広くしても、この幅は変わらない

確実に思ったとおりになるのがメリットです。デメリットは、ブラウザの「既定の文字サイズ」設定を大きくしても追従しづらいこと。ページ全体を拡大するズーム（Ctrl＋）なら px でも大きくなりますが、文字サイズだけを上げる設定には反応しにくい、という意味です。目が悪い人向けの配慮としては、そこが弱点になります。

なので枠線やアイコンのような「変わってほしくないもの」はpx、文字サイズはpx以外、というのが今の主流です。

%｜親要素に対する割合

%は親要素のサイズを基準にした割合です。親が400pxなら、50%は200pxになります。

▼ 表示例（外枠が親）

親要素（幅100%）

width: 50%

width: 25%

親の幅が変われば、中身も一緒に変わる

Point

%は「何の%か」がプロパティによって違います。width は親の幅、font-size は親の文字サイズ、height は親の高さ。ちなみに padding や margin は上下でも親の幅が基準になります（ここが引っかかりポイント）。

「height: 100% が効かない」もこれが原因です。親に高さが指定されていないと、100%の計算元がないので無視されます。

em｜文字サイズ基準（入れ子で膨らむ）

em は文字サイズを基準にした単位です。ただし「どの要素の文字サイズを1にするか」がプロパティによって変わります。padding など font-size 以外はその要素自身の文字サイズ、font-size に使ったときだけ親要素の文字サイズが基準になります。

たとえば文字サイズが16pxの要素なら、padding: 2em は32px（自分基準）。一方 font-size: 2em は親の文字サイズの2倍です。

この「font-size だけ親が基準」という性質がクセもので、次のように入れ子にすると効いてきます。

.item {
  font-size: 1.5em;   /* 親の1.5倍 */
}

これを入れ子にすると、1.5倍の1.5倍の1.5倍…とどんどん膨らんでいきます。

▼ 表示例（1.5em を3重に入れ子にした場合）

1階層目（1.5em ＝ 24px）

2階層目（36px）

3階層目（54px）

入れ子にするたびに1.5倍される（16→24→36→54px）

くじらいど

「なぜかこの部分だけ文字がめちゃくちゃデカい」の犯人はだいたいこれです。

ただしこの性質、ボタンの内側の余白には便利です。padding を em にしておくと、文字を大きくしたときに余白も一緒に大きくなって、バランスが崩れません。

rem｜ページ全体の文字サイズ基準（膨らまない）

rem は em の「膨らむ」問題を解決した単位です。基準が親ではなくhtml要素（ページ全体）の文字サイズに固定されています。

ブラウザの初期設定では html は16pxなので、1rem ＝ 16px。どこに書いても変わりません。

▼ 表示例（さっきと同じく3重に入れ子。今度は1.5rem）

1階層目（24px）

2階層目（24px）

3階層目（24px）

何重に入れ子にしても24pxのまま

rem の一番のメリットは読者がブラウザの文字サイズを変えたときに、ページ全体がきれいに拡大されることです。html の文字サイズが基準なので、そこが変われば rem で書いた部分は全部一緒に変わります。

なので、文字サイズは基本 rem にしておくのが良いと思います。

rem	px換算（html=16pxのとき）
0.875rem	14px
1rem	16px
1.25rem	20px
1.5rem	24px
2rem	32px

em と rem の使い分け

	em	rem
基準	自分の文字サイズ（font-sizeのみ親）	html の文字サイズ
入れ子	膨らむ	膨らまない
向いてる用途	ボタンの余白・アイコンの大きさなど「文字に連動させたいもの」	文字サイズ・全体の余白

vw / vh｜画面サイズ基準

vw は画面（ウィンドウ）の幅を100とした単位です。vh は高さ版。

100vw ＝画面の幅いっぱい
50vw ＝画面の幅の半分
100vh ＝画面の高さいっぱい（スクロールなしで1画面ぶん）

▼ 表示例（ブラウザの幅を変えると、この帯の長さも変わります）

width: 50vw

width: 25vw

親の幅ではなく「画面の幅」が基準なのがポイント

「画面いっぱいのメインビジュアル」みたいなときに使います。

Point

100vw には縦スクロールバーの幅も含まれます。そのため width: 100vw と書くと、環境によっては横スクロールバーが出てしまうことがあります。単に横幅いっぱいにしたいだけなら width: 100% のほうが安全です。

結局どれを使えばいいのか

迷ったときの目安がこちらです。

指定したいもの	おすすめの単位	理由
文字サイズ	rem	読者の文字サイズ設定に追従できる
余白（margin・padding）	rem	全体で単位を揃えられる
ボタンの内側の余白	em	文字サイズに連動して自然に伸びる
枠線・角丸	px	拡大されると不自然。固定でいい
カラムの幅	% または fr	親に合わせて伸縮させたい
画面いっぱいの高さ	vh	ファーストビューを作るとき