CSSの単位を完全理解｜px・em・rem・%・vwの違いと使い分け

CSSでフォントサイズや余白を指定しようとすると、px・em・rem・%・vwなど、長さを表す単位がいくつも出てきて迷うことがあります。どれも「大きさ」を表しますが、何を基準にして大きさが決まるかがそれぞれ違います。本記事では、これらの単位の違いと使い分けを、初心者にも分かるように順を追って解説します。基準を理解すれば、レスポンシブ対応もアクセシビリティ対応もぐっと扱いやすくなります。

絶対単位と相対単位

CSSの長さの単位は、大きく絶対単位と相対単位の2種類に分けられます。この区別が、単位選びの出発点になります。

• 絶対単位：他の要素に左右されず、決まった大きさを持つ単位です。代表はpx（ピクセル）で、ほかにcm・mm・ptなどもあります。指定した値がそのまま大きさになります。
• 相対単位：何か別のものを基準にして、相対的に大きさが決まる単位です。em・remは文字サイズを、%は親要素を、vw・vhは画面（ビューポート）を基準にします。

絶対単位は「常に同じ大きさ」で分かりやすい一方、画面サイズやユーザー設定に合わせて伸び縮みしません。相対単位は基準に応じて変化するため、レスポンシブやアクセシビリティに強いという特徴があります。現代のWeb制作では、この相対単位を上手に使うことが品質の分かれ目になります。

pxとは：もっとも基本の単位

px（ピクセル）は、CSSでもっとも基本的でよく使われる絶対単位です。「1px」は画面上の点1つ分…と思われがちですが、実際にはデバイスの解像度に応じて調整される論理的な単位で、高精細なディスプレイでも見た目の大きさが大きく崩れないように設計されています。

pxの長所は、指定した値がそのままの大きさになり、結果が予測しやすいことです。ボーダーの太さ（例：1pxの線）や、細かな位置調整など、ぴったり固定したい場面では今でもpxが最適です。

一方で短所もあります。フォントサイズをpxで固定すると、ブラウザ側で設定された文字サイズの拡大が効きにくくなることがあり、アクセシビリティの観点で不利になる場合があります。そのため、文字まわりやレイアウトの寸法には、後述するremなどの相対単位を使うのが主流になっています。pxと相対単位を相互に変換したいときは、px・em変換ツールを使うと基準値からの計算を一瞬で確認できます。

emとremの違い：親基準か根基準か

相対単位の中でも特に混同しやすいのがemとremです。どちらも「文字サイズを基準にした相対単位」ですが、何の文字サイズを基準にするかが決定的に違います。

emは、その要素に適用されているフォントサイズを「1」とする単位です。たとえば親要素のフォントが16pxなら、その中での1.5emは24pxになります。便利な反面、要素を入れ子にするとem同士が掛け合わさって値が積み重なり、思わぬ大きさになる「複利」的な落とし穴があります。リストの中のリストなどで、文字がどんどん大きく（または小さく）なってしまうのは典型例です。

rem（root em）は、常にルートであるhtml要素のフォントサイズを基準にします。多くのブラウザの初期値は16pxなので、1rem＝16px、1.5rem＝24pxとなります。どこに書いても基準が一定なので入れ子の影響を受けず、値が予測しやすいのが最大の利点です。

使い分けの目安：全体の寸法やフォントサイズには「rem」、ボタンの内側余白のように「その要素の文字サイズに連動させたい」部分には「em」。

pxとemの対応関係を確認したいときは、px・em変換ツールでルートのフォントサイズを基準に相互変換するのが手軽です。

%とvw/vh：割合とビューポート基準

%（パーセント）は、親要素のサイズを基準にした割合を表す相対単位です。たとえば幅width: 50%は親要素の幅の半分を意味します。横幅のレイアウトでは古くから定番で、親に対して柔軟に伸縮するボックスを作るのに向いています。ただし、何を基準にするかはプロパティによって異なる（widthは親の幅、line-heightは自身のフォントサイズなど）ため、対象を意識して使う必要があります。

vw・vhはビューポート（表示領域）を基準にする単位です。1vwはビューポート幅の1%、1vhは高さの1%を表します。画面いっぱいに広がるヒーローセクションの高さを100vhにしたり、画面幅に応じて見出しを大きくしたりと、画面サイズそのものに連動させたいときに役立ちます。

vwは画面に合わせて滑らかに伸縮するのが魅力ですが、フォントサイズに単独で使うと、小さい画面で文字が極端に小さく、大きい画面で過大になりすぎるという問題が起きがちです。pxとvwの対応を確かめたいときはpx・vw変換ツールが便利で、想定する画面幅で何vwが何pxになるかを即座に確認できます。

clampで可変と上限を両立する

vwの「伸びすぎ・縮みすぎ」問題を解決するのが、CSSのclamp()関数です。clamp(最小値, 可変値, 最大値)という3つの値を渡すと、可変値が小さくなりすぎたら最小値で、大きくなりすぎたら最大値で頭打ちにしてくれます。

font-size: clamp(1rem, 2.5vw, 1.5rem);

この例では、画面が狭いときも文字は1rem（16px）を下回らず、広いときも1.5rem（24px）を超えません。その間では2.5vwとして画面幅に応じて滑らかに変化します。下限と上限を保ちつつ、その間だけ可変にするという、レスポンシブなタイポグラフィに理想的な書き方です。

ポイントは、最小値・最大値にremを使うことです。こうしておくと、後述するユーザーの文字サイズ設定を尊重しつつ、画面サイズへの追従も両立できます。可変部分のvw値を決めるときは、px・vw変換ツールで目標のpxが各画面幅で何vwになるかを確認しながら調整すると失敗が少なくなります。

アクセシビリティ：文字サイズを尊重する

単位選びは見た目の問題にとどまらず、アクセシビリティに直結します。視力に応じてブラウザやOSの文字サイズを大きく設定しているユーザーは少なくありません。フォントサイズをpxで固定すると、こうしたユーザー設定が反映されにくくなり、本人が大きくしたいのに文字が小さいまま、という事態を招きます。

これに対し、remはルートのフォントサイズを基準にするため、ユーザーがブラウザの標準文字サイズを変更すると、それに合わせてサイト全体の文字も拡大・縮小します。つまり、フォントサイズをremで指定しておくだけで、ユーザーの「読みやすくしたい」という意思を自然に尊重できるのです。

• フォントサイズ：原則rem。px固定は避ける。
• 余白・寸法：文字に連動させたいならrem／em、固定したい線などはpx。
• 可変サイズ：clamp()で最小・最大にremを使い、下限を確保する。

まとめると、単位は「何を基準に大きさが決まるか」で選ぶのが基本です。固定したいものはpx、文字や全体寸法はrem、要素の文字に連動させたい部分はem、親に対する割合は%、画面連動はvw/vh、そして可変と上限の両立はclampと役割分担を意識しましょう。具体的な数値の対応はpx・em変換ツールやpx・vw変換ツールで確かめながら進めると、設計がぶれません。

なお本記事は一般的な情報の提供を目的としたものです。CSSの仕様やブラウザの挙動は変化することがあるため、実装にあたっては最新の公式情報を確認のうえ判断してください。