この記事の目次
CSSの単位 rem・em・vhの違いとは
CSSの長さ単位には、px のような絶対的なものと、何かを基準に決まる相対的なものがあります。rem は <html> の文字サイズ、em は要素自身（または親）の文字サイズ、vh と vw は画面の高さ・幅を基準にします。使い分けを知っておくと、ユーザーの文字サイズ設定に追従でき、レスポンシブも組みやすくなります。
基本（構文・仕組み）
| 単位 | 基準 | 主な用途 |
|---|---|---|
| px | 画面上の1CSSピクセル | 線の太さ、影など |
| rem | ルート（html）の font-size | 文字サイズ、余白 |
| em | その要素の font-size（font-size では親の値） | ボタンの padding など文字に比例させたいとき |
| vh / vw | 画面の高さ / 幅の1% | ヒーロー画像の高さ |
| svh / lvh / dvh | 小さい / 大きい / 動的な画面の高さ | モバイルのアドレスバー対策 |
| ch | 「0」の幅 | 本文の行長（例: max-width: 60ch） |
ブラウザの標準では、html の font-size は16pxです。html { font-size: 62.5%; } で10pxにする書き方は、ユーザー設定を尊重する意味では、100%のままにしておくほうが無難です。
html { font-size: 100%; } /* 通常は16px */
h1 { font-size: 2rem; } /* 32px */
.btn { padding: 0.5em 1em; } /* ボタンの文字に比例 */
.hero { height: 100dvh; } /* モバイルのバーに追従 */
サンプルコード（実行結果つき）
<style>
html { font-size: 20px; }
.em { font-size: 1.5em; }
.rem { font-size: 1.5rem; }
.h { height: 50vh; background: #cef; }
</style>
<div class="em">L1<div class="em">L2<div class="em">L3</div></div></div>
<div class="rem">R1<div class="rem">R2<div class="rem">R3</div></div></div>
<div class="h"></div>
動作確認（検証環境と結果）
- 環境: Windows 11 / Microsoft Edge 154（Chromium系、headless）/
getComputedStyleで取得 - ファイル:
C:Tempks2techtestst2units.html
| 指定 | 1段目 → 2段目 → 3段目の font-size |
|---|---|
1.5em を入れ子 |
30px → 45px → 67.5px |
1.5rem を入れ子 |
30px → 30px → 30px |
50vh（window.innerHeight 704） |
要素の高さ 352px |
em は親の大きさに掛け算されて膨らみ、rem は常に html 基準で一定でした。
CSSの単位 rem・em・vhの違いの注意点
emは入れ子で累積します。リストや入れ子コンポーネントの文字サイズには、remのほうが予測しやすくなります。vhは、モバイルブラウザのアドレスバーを含めた大きい画面を基準にします。MDN では、ブラウザによってはvhがlvh（大きいビューポート基準）と同等に実装されると説明されています。バーが出ている間に下が隠れる場合はdvhやsvhを検討します。vwは縦スクロールバーを含むため、width: 100vwが横スクロールを生むことがあります。- 動的な単位（
dvh）は、スクロール中の再計算で負荷が出ることがあると MDN に書かれています。
CSSの単位 rem・em・vhの違いでよくあるミス
- 文字サイズを
pxで固定し、ブラウザの文字サイズ設定が効かない。 - 入れ子の中で
emを使い、想定外に大きくなる。 height: 100vhのヒーローが、スマホで下に隠れる。- 余白を
emで書き、見出しと本文で余白が揃わなくなる。
ブラウザ対応・バージョン
MDN によると、rem は2015年7月から、vh vw も長く、広く使える機能です。svh lvh dvh は比較的新しい単位のため、対象ブラウザは can I use で確認してください。
CSSの単位 rem・em・vhの違いのチェックリスト
- 文字サイズは
remで指定したか。 emを使う場所は、親の文字サイズの影響を受けてよい箇所か。- 画面高さの指定で、モバイルの実機確認をしたか。
100vwによる横スクロールが出ていないか。
CSSの単位 rem・em・vhの違いのFAQ（よくある質問）
Q. remとemはどちらを使うべきですか？
A. 基本は rem、文字に比例する padding などは em、という使い分けが一般的です。
Q. 62.5%のテクニックは使うべきですか？
A. 計算は楽になりますが、ユーザーの設定を上書きする側面があります。使うなら、本文のサイズを rem で必ず戻してください。
Q. ch はどんなときに使いますか？
A. 本文の1行の長さを、max-width: 60ch のように決めたいときです。日本語では、1文字の幅が異なるため、目視で調整します。
筆者の見解（CSSの単位 rem・em・vhの違い）
単位は、「何に追従させたいか」で選ぶのが分かりやすいと考えます。文字や余白は rem、ボタン内部は em、画面全体に関わる高さは vh 系、という整理です。px を完全に避ける必要はなく、境界線や影のように固定したいものは px のままで問題ありません。
