【初心者向け】CSSでよく使う単位まとめ（px・em・rem・%・vh・vw・vmax・vmin・fr）| サイズ指定に使うはどれが最適か?

y.harima

2025.10.31 更新

この記事を共有する

で保存する

LINE

で共有する

このページのURLをコピー

https://kasoudesign.com/knowledge/css-unit/

クリップボードにコピーしました

もっと知らせる

CSSでレイアウトを組む際、要素の大きさや間隔を指定するために「単位」は不可欠です。
しかし、px、em、rem、vwなど、多くの種類があり、どれをいつ使うべきか、迷う初心者の方も多いでしょう。

本記事では、「CSS単位」の理解度を深めるべく、Webデザインのプロの視点から、それぞれの単位が持つ意味と特性を徹底解説します。この記事を読めば、レスポンシブデザインやアクセシビリティを考慮したコーディングを行うための単位選択の基礎知識が身につきます。

1 単位の早見表
2 単位の基本
- 2.1 1. 絶対長の単位（サイズが固定されるもの）
- 2.2 2. 相対長の単位（サイズが変化するもの）
3 よく使われる単位の紹介と説明
4 まとめ：単位選びの結論と実践ポイント
5 この記事の振り返りFAQ
6 よく見られるCSSの記事
7 関連リンク

単位の早見表

まずは、主要なCSS単位の種類、基準、用途を理解しやすいよう、早見表としてまとめました。
特に、相対長の単位はモダンなWeb制作で不可欠です。

単位	種類	基準となる要素	主な用途	レスポンシブ適性
px	絶対長	画面上の点 (ピクセル)	罫線など固定サイズが必要な場所	△
em	相対長	親要素の文字サイズ	特定の部品の中でのサイズ指定	〇
rem	相対長	ルート要素（<html>タグ）の基本の文字サイズ	サイト全体の文字や余白のサイズ調整	◎
%	相対長	親要素の幅や高さ	要素の幅を親要素に合わせて割合で決めたい時	〇
vh	相対長	画面（ビューポート）の高さの 1/100	画面いっぱいに広がる要素を作りたい時	◎
vw	相対長	画面（ビューポート）の幅の 1/100	画面いっぱいに広がる要素を作りたい時	◎
vmax	相対長	画面の縦横のうち大きい方	画面のサイズ変動に最大限合わせたい時	〇
vmin	相対長	画面の縦横のうち小さい方	画面のサイズ変動に合わせて最小限に抑えたい時	〇
fr	相対長	グリッドコンテナ内の空きスペース	CSS Gridレイアウトで比率を決めたい時	◎

単位の基本

CSSにおける単位は、値を決定する基準の違いから、大きく「絶対長の単位」と「相対長の単位」の二種類に分類されます。

1. 絶対長の単位（サイズが固定されるもの）

絶対長の単位は、他の要素やビューポート（画面領域）に影響されず、常に物理的な寸法に基づいて同じサイズを示します。例えるなら「定規で測ったサイズ」です。

単位	名前	換算
cm	センチメートル	1cm = 96px/2.54
mm	ミリメートル	1mm = 1/10 cm
Q	1/4 ミリメートル	1Q = 1/40 1cm
in	インチ	1in = 2.54cm = 96px
pc	パイカ	1pc = 1in の 1/6
pt	ポイント	1pt = 1in の 1/72
px	ピクセル	1px = 1in の 1/96

CSS の値と単位 – ウェブ開発の学習 | MDN

2. 相対長の単位（サイズが変化するもの）

相対長の単位は、その値が別の何かの基準（親要素、ルート要素、または画面全体）に依存して動的に変化します。スマートフォンやPCなど、画面が変わるたびにレイアウトを調整するレスポンシブデザインには、この相対長の単位が欠かせません。

単位	名前	換算
em	エム	親要素のfont-size（フォントサイズ）
rem	ルートエム	ルート要素（<html>）のfont-size
vw	ビューポート幅	ビューポート（画面）の幅の 1/100
vh	ビューポート高さ	ビューポート（画面）の高さの 1/100
vmin	ビューポート最小値	ビューポートの幅と高さのうち、小さい方の 1/100
vmax	ビューポート最大値	ビューポートの幅と高さのうち、大きい方の 1/100
ch	キャラクター	現在のフォントの「`0`（ゼロ）」の文字の幅
lh	ラインハイト	現在の要素のline-height（行の高さ）
rlh	ルートラインハイト	ルート要素（<html>）のline-height
vb	ビューポートブロック	ルート要素の書字方向におけるビューポートのブロック軸の 1/100
vi	ビューポートインライン	ルート要素の書字方向におけるビューポートのインライン軸の 1/100
svw/svh	スモールビューポート	ブラウザUIが表示された状態（最小）のビューポートの幅/高さの 1/100
lvw/lvh	ラージビューポート	ブラウザUIが非表示の状態（最大）のビューポートの幅/高さの 1/100
dvw/dvh	ダイナミックビューポート	ブラウザUIの表示・非表示に合わせて動的に変化するビューポートの幅/高さの 1/100

よく使われる単位の紹介と説明

Web制作で特に重要で、頻繁に使用される単位について、具体的な使い方とメリットを解説します。

px（ピクセル）

px は、CSS単位の中で最も基本的でわかりやすい絶対単位です。
画面を構成する最小の点（ドット）を基準にサイズを指定します。

得意なこと
1px の罫線（border）など、絶対にサイズを変えたくない固定の要素指定に使われます。
注意点
ユーザーがブラウザの文字サイズを大きく設定しても、px で指定された文字サイズは変わりません。そのため、アクセシビリティの観点から、フォントサイズ指定にはあまり推奨されません。

div { 
  border: 1px solid #ccc;
  min-width: 320px;
}

em

em は「親要素の文字サイズ」を基準にする相対単位です。
例えば、親要素の文字サイズが 16px だった場合、1em は 16px を意味します。

得意なこと
特定のコンポーネント（ボタンなど）の中で、親要素のサイズに合わせた調整がしたいときに便利です。
注意点
入れ子（ネスト）構造になると、基準となる親要素が次々と変わるため、計算が複雑になりやすいデメリットがあります。

.card { 
  font-size: 20px; 
}
.card h1 { 
  padding: 1em; 
}

rem

rem は「ルート要素（<html>タグ）の文字サイズ」を基準にする相対単位です。

得意なこと
サイト全体の基準サイズ（通常はブラウザ標準の16px）を基準にするため、どこに書いてもサイズ計算が統一されます。
最大のメリット
ユーザーがWebサイト全体の文字サイズを大きく（または小さく）設定した場合、 rem で指定された文字はすべて連動して拡大縮小します。これはアクセシビリティ（年齢や障害の有無にかかわらず、誰もがWebサイトを利用しやすくすること）を確保する上で最も推奨される単位です。

html { 
  font-size: 100%; /* 16pxが基準 */
} 
h2 { 
  font-size: 1.5rem; 
}

% （パーセント）

% は、「親要素のサイズ」に対する割合でサイズを指定する単位です。

得意なこと
要素の幅（横幅）を指定する際によく使われます。「親要素の横幅の50%」など、レスポンシブ対応に必須です。

div { 
  width: 50%;
  padding: 5% 0;
}

vh / vw （Viewport Height / Viewport Width）

vh と vw は、ユーザーの閲覧画面であるビューポート（画面領域）のサイズを基準とする相対単位です。vh は画面の高さ、vw は画面の幅を基準とし、それぞれ画面のサイズの 100分の1 を示します。

得意なこと
「画面の高さの半分（50vh）」や「画面の横幅全体（100vw）」など、画面全体を基準にしたダイナミックなレイアウトを作るのに非常に便利です。

div { 
  height: 100vh;
  font-size: 4vw;
}

新しいビューポート単位について

svh, lvh, dvh は、特にモバイルデバイスでアドレスバーなどのブラウザUIの表示・非表示によってvhの値が不安定になるという問題（オーバーレイ問題）を解決するために導入されました。

svh (Small)：UIが表示された状態の最小の高さを基準とします。
lvh (Large)：UIが完全に隠れた状態の最大の高さを基準とします。
dvh (Dynamic)：最も柔軟で、UIの有無に応じてサイズが変化します。

vmax / vmin (Viewport Maximum / Viewport Minimum)

vmax と vmin は、vh と vw と同じく画面（ビューポート）を基準とする単位です。画面の縦幅と横幅のうち、vmax は大きい方の 1/100を、vmin は小さい方の 1/100 を示します。

得意なこと
画面の縦横比が変わっても、要素が画面内に収まるようにしたい（vmin）場合や、常に画面を最大限に使いたい（vmax）場合に便利です。

div { 
  font-size: 5vmin;
  width: 80vmax;
}

fr

fr は、主に新しいレイアウト手法である CSS Grid で使用される相対単位です。

得意なこと
得意なこと: コンテナ内の「利用可能な空きスペース」を分割して割合を指定します。例えば 1fr 2fr と指定すると、空きスペースを 1:2の比率 で自動的に振り分けてくれます。

.container { 
  display: grid; 
  grid-template-columns: 1fr 2fr 1fr; 
}

まとめ：単位選びの結論と実践ポイント

この記事で解説した重要なポイントは以下の通りです。

基本は相対長を使おう
現代のレスポンシブなWebサイトを作るには、画面サイズに合わせて変わる相対長の単位（rem, vw, %など）を使うことが大切です。
文字サイズは rem
ユーザーの利便性（アクセシビリティ）を考慮し、フォントサイズはルート要素基準で管理しやすい rem を使いましょう。
固定サイズは px
罫線や影のぼかしなど、絶対に動かしたくない最小単位の指定に限り px を使ってください。
画面幅には vw/vh
画面全体に対するサイズ指定が必要な場合は、ビューポート単位を活用しましょう。

この記事の振り返りFAQ

フォントサイズを px ではなく rem で指定すべきなのはなぜですか？

rem を使うと、ユーザーがブラウザ設定で文字サイズを大きくしたときに、Webサイトの文字もそれに合わせて拡大されます。これは、誰でも使いやすいサイト（アクセシビリティの高いサイト）を作るために重要だからです。

em と rem の最も大きな違いは何ですか？

em は「その要素の親」の文字サイズが基準になりますが、rem は常に「Webサイト全体の基本」の文字サイズが基準になります。rem の方が全体管理がしやすいのでおすすめです。

vh や vw をマージン（余白）に使うのは一般的ですか？

はい、使われます。特に、画面サイズがどう変わっても、画面全体に対して均一な余白を確保したい場合に非常に有効です。

`vh` 単位を使うときに、モバイルでレイアウトが崩れるのはなぜですか？

モバイルブラウザのアドレスバー（URLバー）が原因です。このバーが表示されたり隠れたりする際、vh が参照するビューポートの高さが動的に変わってしまうため、要素のサイズが意図せず変動し、レイアウトが崩れる現象が発生します（オーバーレイ問題）。

オーバーレイ問題を解決するために、dvh や svh のような新しい単位を使うべきですか？

はい、モダンなWeb制作では強く推奨されます。特に高さを指定する際、古い vh の代わりに、dvh (ダイナミックビューポート高さ) を使うことで、ブラウザのアドレスバーの変動を自動的に考慮し、最も正確で安定した高さを要素に適用できます。svh や lvh は、最大値や最小値で高さを固定したい場合に有効です。