CSS単位の使い分け、もう迷わない！rem, px, vw完全ガイド

「スマホで確認したら、PCで綺麗だったレイアウトが崩れてる…」
私たち開発者なら、CSSのpx指定が原因でそんな失敗を経験したことが、一度はあるのではないでしょうか。

先輩から「とりあえずremを使っておけば大丈夫」とアドバイスされたものの、「なぜpxではダメなんだろう？」「remとem、vwって、結局どう使い分ければいいの？」と、自信を持って答えられない。

この記事では、そんなモヤモヤを一緒に解消していきましょう。

この記事を読み終える頃には、

なぜ単位の使い分けが重要なのかが論理的にわかる
実務でどの単位を選ぶべきか自信を持って判断できる
すぐに使える「CSS単位使い分けチートシート」が手に入る

もう単位の指定で迷うのは終わりにしましょう。基本から最新のclamp()関数まで、あなたのコーディングを次のレベルへ引き上げる知識を、順を追って解説します。

まずは結論！CSS単位使い分けチートシート

忙しいあなたのために、まず結論から。
この「使い分けチートシート」をブックマークして、日々のコーディングに役立ててください。なぜこの使い分けになるのか、という理由は後ほどじっくり解説します。

用途別・推奨単位と使い方のポイント

用途	推奨単位	ポイント
文字サイズ (font-size)	rem	サイト全体の基準となり、ユーザー設定にも追従できる基本単位。
余白 (margin, padding)	rem	文字サイズと連動させることで、一貫性のあるレイアウトを保てます。
枠線 (border)	px	デザイン上、太さを絶対に固定したい場合に最適。1pxの線など。
レイアウト幅 (width, height)	%, rem	親要素基準なら%、サイト基準ならrem。calc()での併用も有効です。
画面いっぱいの要素	vw, vh, svh	ヒーローヘッダーなど。スマホのUI考慮ならsvhが新定番です。
流動的な文字・余白	clamp()	レスポンシブで「いい感じ」に可変させたい高度な表現に。
コンポーネント内の拡縮	em	ボタン内のアイコンなど、親要素の文字サイズに追従させたい時に。

このチートシートの使い方

このチートシートは、コーディングで迷ったときにいつでも参照できる「早見表」として作りました。

コーディングで迷ったら、まずこの表を見る。
推奨単位を使って実装してみる。
「なぜその単位なのか？」と疑問に思ったら、この記事の続きを読んで理解を深める。

このサイクルを繰り返すことで、自然と最適な単位選びが身についていきます。ぜひこのページをブックマークして、あなたの「コーディングのお守り」にしてください。

なぜpxだけではダメなのか？単位が重要な3つの理由

「なぜpxだけだとダメなんだろう？」
その疑問、とても大切です。答えは、現代のWeb制作で求められる3つの重要な要素に関係しています。

1. アクセシビリティの向上

pxは「絶対単位」と呼ばれ、画面上にドットを固定的に配置します。
これは一見便利ですが、ユーザーがブラウザのデフォルト文字サイズを変更しても、pxで指定された文字は大きさが変わりません。remのような「相対単位」を使えば、ユーザーの設定に応じて文字サイズが適切に拡縮され、誰にとっても見やすいサイトになります。

2. メンテナンス性の向上

サイト全体のデザインを修正する場面を想像してください。
「全体的にもう少し余白を広げてほしい」という要望があった時、pxで指定していると何十、何百という箇所のCSSを一つひとつ修正する必要があり、大変な手間と修正漏れのリスクが伴います。
一方、remを使っていれば、基準となるルート要素のfont-sizeを1ヶ所変更するだけで、サイト全体の余白や文字サイズを一括で調整できます。

「（保守性の高いCSSの書き方については『CSS設計で保守性と拡張性を高める方法｜BEM・OOCSS・SMACSS徹底比較』をご参照ください）」

3. デザインの柔軟性と一貫性

レスポンシブデザインでは、画面サイズに応じてレイアウトを柔軟に変化させる必要があります。
pxという固定値だけでは、多様なデバイスサイズに対応するのは困難です。remや%、vwといった相対単位を組み合わせることで、要素が互いに関連性を持ちながら拡縮するため、どの画面サイズでも一貫性のある美しいデザインを保ちやすくなります。

「（レスポンシブ対応の基本的な実装方法については『初心者向けCSSレスポンシブ解説｜2025年対応・サンプル付きでスマホ対応をマスター』をご参照ください）」

用語解説：アクセシビリティ
年齢や身体的条件、利用環境にかかわらず、誰もがWebサイトや情報にアクセスしやすくすること。Webアクセシビリティとも呼ばれる。

用語解説：絶対単位
pxやcmのように、他の要素のサイズに影響されず、常に物理的に固定されたサイズを持つ単位。

用語解説：相対単位
remや%、vwのように、他の要素のサイズや画面サイズを基準にして大きさが決まる単位。柔軟なレイアウトに適している。

用語解説：ルート要素
HTML文書の最上位にある要素、つまり<html>タグのこと。rem単位の基準となるフォントサイズが設定される。

用語解説：レスポンシブデザイン
PC、タブレット、スマートフォンなど、閲覧するデバイスの画面サイズに応じて、Webサイトのレイアウトやデザインを最適化して表示する手法。

最初に覚えるべき4つの基本単位

それでは、実務で必須となる4つの基本単位の役割と使い方を見ていきましょう。

px：borderなど「絶対に変わってほしくない」固定値に

px（ピクセル）は、ディスプレイの1ドットに対応する「絶対単位」です。
周囲の状況に影響されず、常に指定されたサイズを保ちます。この「変わらない」特性は、border: 1px solid #000; のような、どうしてもサイズを固定したい部分で強みを発揮します。
ただし、アクセシビリティやメンテナンス性の観点から、文字サイズや主要なレイアウトに多用するのは避けるべきです。

rem：サイト全体の基準を作る「基本の単位」

rem（root em）は、ルート要素（<html>）のfont-sizeを基準とする「相対単位」です。
ブラウザのデフォルトではhtmlのfont-sizeは16pxなので、1rem = 16px
>となります。例えば、h2の文字サイズを32px相当にしたければfont-size: 2rem;と指定します。
このremを基本単位にすることで、サイト全体のスケール調整がルート要素一か所の変更だけで可能になり、メンテナンス性が飛躍的に向上します。現代のCSS設計の主役と言える単位です。

em：コンポーネント内で柔軟に拡縮させたいときの調整役

emもremと同じ「相対単位」ですが、こちらは自身のfont-size、もしくは親要素のfont-sizeを基準にします。
親に依存するため入れ子構造で計算が複雑になりがちですが、うまく使えば非常に便利です。
例えば、ボタンのpaddingをpadding: 0.5em 1em;
>のようにemで指定しておくと、そのボタンのfont-sizeを変更するだけで、余白もいい感じに拡縮してくれます。

%：親要素に対する割合でレイアウトを作るときの万能選手

%（パーセント）は、親要素の同じプロパティの値を基準とする「相対単位」です。
width: 50%;
>とすれば親要素の半分の幅になります。特に、カラムレイアウトのように親要素の幅に対して子要素を配置していく場面で絶大な効果を発揮します。レスポンシブデザインにおけるレイアウトの基本を作る、非常に重要な単位です。

「（CSSを使った具体的なレイアウト手法については『CSS GridとFlexbox徹底比較！違い・使い分け・選び方完全ガイド【2025年版】』をご参照ください）」

用語解説：px (ピクセル)
画面を構成する最小単位（ドット）を1とする絶対単位。環境によらず固定的なサイズを指定したい場合に用いる。

用語解説：rem (root em)
ルート要素（<html>タグ）の文字サイズを基準とする相対単位。サイト全体のサイズを一括で調整しやすく、メンテナンス性に優れる。

用語解説：em
自身の文字サイズ、または親要素の文字サイズを基準とする相対単位。特定のコンポーネント内で完結するサイズ調整に便利。

用語解説：% (パーセント)
親要素のサイズに対する割合を示す相対単位。親要素の大きさに応じて可変するレイアウトを組む際に使用する。

応用編：一歩進んだレスポンシブ表現

基本の4単位をマスターしたら、次はより高度なレスポンシブ表現を可能にするモダンな単位を学びましょう。

vw/vh：画面サイズいっぱいに要素を広げる

vw（viewport width）とvh（viewport height）は、ブラウザの表示領域（ビューポート）の幅と高さを基準とする単位です。100vwはビューポートの幅全体を意味します。
画面いっぱいに広がるヒーローイメージ（height: 100vh;）など、画面サイズを基準としたレイアウトを簡単に実現できるのが魅力です。

svh/dvh：スマホのツールバー問題を解決する新単位

vhには一つ問題がありました。スマホで見たとき、アドレスバーの表示・非表示でビューポートの高さが変わり、100vhで指定した要素がガタついてしまうのです。
この問題を解決するのがsvh (Small Viewport Height) と dvh (Dynamic Viewport Height) です。

svh: アドレスバーなどが表示された状態の「最小のビューポート」を基準にします。
dvh: アドレスバーの表示・非表示に応じて動的に高さが変わるビューポートを基準にします。

特にsvhは、ファーストビューで要素全体を確実に見せたい場合に安定した挙動を提供してくれるため、今後のスマホ対応の新たなスタンダードとなりつつあります。

clamp()：値を「いい感じ」に可変させる魔法

clamp()は単位ではなくCSS関数ですが、単位の使い分けにおいて革命的な機能を提供します。「最小値、推奨値、最大値」の3つを指定することで、値をある範囲内に収めることができます。

font-size: clamp(1rem, 4vw, 2rem);

上記のように指定すると、

基本的には4vw（画面幅の4%）の文字サイズになる。
ただし、1rem（例：16px）よりは小さくならない。
そして、2rem（例：32px）よりは大きくならない。

これにより、画面幅に応じて滑らかにサイズが変化する「流動的なタイポグラフィ」が、メディアクエリを多用することなく実現できます。

用語解説：ビューポート (Viewport)
Webページが実際に表示されるブラウザの領域のこと。vwやvhなどの単位は、この領域のサイズを基準とする。

用語解説：vw / vh
ビューポートの幅 (width) または高さ (height) を100分割したものを1とする相対単位。100vwで画面幅全体を指す。

用語解説：svh / dvh
スマートフォンのアドレスバーなどのUI表示を考慮したビューポート単位。svhはUIが表示された最小の領域、dvhはUIの表示/非表示に応じて動的に変化する領域を基準とする。

用語解説：clamp()
CSSの値に「最小値、推奨値、最大値」を設定できる関数。画面サイズに応じて値を滑らかに変化させ、一定の範囲内に収めることができる。

用語解説：タイポグラフィ
テキストのフォント、サイズ、行間、配置などをデザインし、読みやすさや美しさを追求すること。

用語解説：メディアクエリ
画面幅などデバイスの特性に応じて適用するCSSを切り替える仕組み。レスポンシブデザインの実現に不可欠な技術。

FAQ：実務でよくある疑問と答え

Q. line-heightに単位はつけないのがベスト？

はい。line-heightには1.5のように単位をつけない数値で指定するのがベストプラクティスです。指定した数値がその要素自身のfont-sizeに対する「倍率」として計算されるため、文字サイズが変わっても適切な行間を自動で保ってくれます。

Q. 値が0のとき、単位は省略できる？

はい、省略できます。margin: 0;のように、値が0の場合は単位は不要です。0pxも0remも、結局は0だからです。

Q. calc()でremとpxは混ぜて計算できる？

はい、可能です。calc()関数は、width: calc(100% – 4rem);のように、異なる単位を組み合わせた計算を可能にする非常に強力なツールです。

用語解説：line-height
テキストの行の高さを指定するプロパティ。単位なしの数値で指定すると、自身のフォントサイズを基準とした倍率で計算されるため、柔軟な行間設定が可能になる。

用語解説：calc()
calc(100% – 20px)のように、異なる単位同士を組み合わせて計算できるCSSの関数。レイアウトの微調整などで非常に強力。