CSSの単位とは？px・em・rem・%・vw・vhの違いを解説

💡 この記事でわかること

CSSの単位が「絶対単位」と「相対単位」に分かれること
px・%・em・rem・vw・vhそれぞれの基準と使いどころ
emとremの違い(初心者がつまずきやすいポイント)
実際のコーディングでどの単位を選べばいいかの目安

🧮 CSSの単位とは?絶対単位と相対単位

CSSで幅・高さ・余白・フォントサイズなどを指定するとき、
👉 数値のうしろに付ける「単位」が必要です。

「pxでいいのでは?」と思うかもしれませんが、
実はCSSの単位は目的によって使い分けるのが基本です。

単位は大きく2種類に分けられます。

絶対単位:常に同じ大きさになる単位(例:px)
相対単位:何か(親要素・ルート要素・画面サイズなど)を基準に大きさが変わる単位(例:%・em・rem・vw・vh)

それぞれの単位が「何を基準にしているか」を理解すると、
レイアウトが崩れる原因も分かるようになります。

1️⃣ px(ピクセル)

pxは、
👉 画面上の1ドットを基準にした絶対単位です。

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

✅ メリット:指定したサイズが常に固定される(ブラウザや親要素の設定に影響されない)

⚠️ デメリット:ユーザーがブラウザの文字サイズ設定を変更しても、pxで指定した文字は大きくならない(アクセシビリティ面で不利)

枠線の太さ(border)や、細かい位置調整(box-shadowのぼかし幅など)、
「絶対にサイズを変えたくない」箇所に向いています。

2️⃣ %(パーセント)

%は、
👉 親要素のサイズを基準にした相対単位です。

.parent {
  width: 600px;
}

.child {
  width: 50%; /* 親(600px)の50% = 300px */
}

親要素の幅が変わると、%で指定した子要素の幅も自動的に変わります。
レスポンシブなレイアウト(画面幅に応じて伸び縮みする要素)を作るときによく使われます。

👉 widthとheightの使い方についての記事はこちら

3️⃣ em

emは、
👉 「親要素のフォントサイズ」を基準にした相対単位です。

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 親(20px)の1.5倍 = 30px */
}

1em = 親要素のフォントサイズと同じ大きさ、という意味になります。
ボタンの内側の余白(padding)などを、文字サイズに連動させたいときに便利です。

⚠️ emがつまずきやすい理由

emは「親要素」を基準にするため、
要素をネスト(入れ子)にするとサイズがどんどん掛け算されていってしまいます。

.a {
  font-size: 1.5em; /* 親(16px)の1.5倍 = 24px */
}

.a .b {
  font-size: 1.5em; /* さらに親(24px)の1.5倍 = 36px */
}

👉 入れ子が深くなるほど文字がどんどん大きく(小さく)なってしまい、意図しないサイズになりやすいのがemの弱点です。この問題を解決するのが、次に紹介するremです。

4️⃣ rem

remは、
👉 「ルート要素(htmlタグ)のフォントサイズ」を基準にした相対単位です。

rの部分は「root(ルート)」の意味です。

html {
  font-size: 16px; /* ブラウザの初期値も16pxが一般的 */
}

.a {
  font-size: 1.5rem; /* ルート(16px)の1.5倍 = 24px */
}

.a .b {
  font-size: 1.5rem; /* こちらもルート(16px)の1.5倍 = 24px */
}

emと違い、remは常にhtmlタグのフォントサイズだけを基準にするため、
どれだけ要素をネストしても計算がブレません。

✅ そのため、実務ではfont-sizeやmargin・paddingの指定にemよりremが使われることが多いです。

👉 marginとpaddingについての記事はこちら

5️⃣ vw・vh

vw・vhは、
👉 ブラウザの表示領域(ビューポート)のサイズを基準にした相対単位です。

vw(viewport width):画面の横幅の1% = 1vw
vh(viewport height):画面の縦幅の1% = 1vh

.hero {
  width: 100vw;  /* 画面の横幅いっぱい */
  height: 100vh; /* 画面の縦幅いっぱい */
}

ファーストビュー(画面いっぱいに表示するセクション)や、
画面サイズに応じて滑らかに変化させたい文字サイズなどに使われます。

⚠️ スマホでは、アドレスバーの表示・非表示で100vhの値が変動し、レイアウトがガタつくことがある点には注意が必要です。

👉 max-widthとmin-widthについての記事はこちら

📖 単位の比較表

単位	種類	基準	主な用途
`px`	絶対単位	画面のドット	枠線・影・崩したくない細部
`%`	相対単位	親要素のサイズ	幅・高さのレスポンシブ指定
`em`	相対単位	親要素のフォントサイズ	親に連動させたい余白・文字
`rem`	相対単位	ルート(html)のフォントサイズ	font-size・margin・paddingの基本
`vw`	相対単位	画面の横幅	フルスクリーン要素・可変フォント
`vh`	相対単位	画面の縦幅	ファーストビューの高さ

🎯 結局どれを使えばいい?選び方の目安

枠線の太さなど、絶対に変わってほしくない値 → px
親要素に対して幅を伸び縮みさせたい → %
文字サイズ・余白など、ページ全体で統一したい値 → rem
ボタンの余白など、そのコンポーネントの文字サイズに連動させたい → em
画面サイズいっぱいに要素を表示したい → vw・vh

迷ったときは、
👉 「レイアウトの外枠や細部はpx、フォントサイズと余白の基本はrem、局所的に文字に連動させたいところだけem、画面いっぱいの表示はvw・vh」と覚えておくと実務でも困りません。

✨ まとめ

CSSの単位は、
👉 「絶対単位のpx」と「何かを基準にする相対単位(%・em・rem・vw・vh)」に分かれます。

px:常に同じサイズを保ちたい細部に
%:親要素基準でレスポンシブに
em:親要素のフォントサイズ基準(ネストに注意)
rem:ルート基準で計算がブレない、実務での基本
vw・vh:画面サイズ基準でフルスクリーン表現に

最初はpxだけで書いてしまいがちですが、
remや%を使い分けられるようになると、レスポンシブ対応や保守がぐっと楽になります。
ぜひ実際のコードで手を動かしながら試してみてください。