CSSのvw・vh・rem・emの違いとは？

デザイン・技術2026年10月30日読了時間：約3分

CSSで大きさを指定するとき、px のほかに、vw・vh・rem・em などの単位があります。
どれを使えばよいのか迷う方も多いと思います。

この記事では、それぞれの単位の違いと、使い分けの考え方を解説します。

1.違いは「何を基準にした大きさか」

多くのブラウザでは、初めの設定で html の文字の大きさが16pxなので、1rem = 16px になります。

px は決まった大きさなので、見る人がブラウザの文字の大きさを大きくする設定にしていても、変わらないことがあります。rem で文字の大きさを指定しておくと、見る人の設定に合わせて、文字が大きくなります。

また、vw や vh を使うと、画面の大きさに合わせて伸び縮みする大きさを指定できます。ただし、文字の大きさを vw だけで決めると、スマートフォンで小さくなりすぎたり、パソコンで大きくなりすぎたりします。

文字の大きさは rem、画面に合わせたい大きさは vw・vh、細かな線や位置は px、と使い分けるのが基本です。

body {
  font-size: 1rem;      /* 16px */
}

h2 {
  font-size: 1.5rem;    /* 24px */
}

.button {
  font-size: 1rem;
  padding: 0.5em 1em;   /* 文字の大きさに合わせて余白も変わる */
}

em は、要素が入れ子になると、大きさが重なって計算されるため、思ったより大きく（小さく）なることがあります。迷ったら rem を使うと分かりやすくなります。

h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

clamp() を使うと、「最小 1.5rem、画面の幅に合わせて変わり、最大 2.5rem」のように、大きさの範囲を決められます。

スマートフォンでは、ブラウザのアドレスバーが出たり隠れたりするため、100vh が画面より大きくなることがあります。今のブラウザでは、表示されている部分の高さを表す dvh などの単位も使えます。

px を使ってはいけませんか？

使ってかまいません。線の太さや、細かな位置合わせなど、決まった大きさがよい場面では px が向いています。

rem と em は、どちらを使えばよいですか？

迷ったら rem がおすすめです。ページ全体の文字の大きさを基準にするため、計算が分かりやすくなります。

% と vw は、何が違いますか？

% は親の箱の大きさが基準、vw は画面の幅が基準です。

1rem を 10px にする書き方を見かけます。

html の文字の大きさを 62.5% にして、1rem = 10px にする方法です。計算は楽になりますが、ほかの部分で文字の大きさを指定し直す必要があります。

CSSの単位は、何を基準にした大きさかで使い分けます。

画面の幅に合わせてデザインを切り替える方法は、CSSのメディアクエリとは？で解説しています。

CSSの指定や、表示の崩れで困っている場合は、浅草Web屋にご相談ください。