「フォントサイズはpx？それともrem？」
「画像の幅は%で指定すればいいの？」
HTML・CSSを学び始めた人が最初にぶつかる壁が、
“サイズ指定の使い分け”です。
この記事では、よく使う6つの単位
px・%・rem・em・vw・vh
の意味と使い分け方を
初心者にもわかりやすく解説します。
記事の最後では、
「明日はHTMLとCSSのレイアウト構成（sectionやdivの使い分け）」
についての予告もあるので
ぜひ最後まで読んでください。
CSSの単位は「基準」が違うだけ。目的で使い分けよう
CSSでサイズを指定するとき
単位によって“何を基準にするか”が異なります。
固定的に見せたいのか
画面サイズに合わせて変化させたいのか
で選ぶ単位が変わります。
6つの単位にはそれぞれ得意分野がある
① px（固定サイズ）
特徴
▶︎画面上の1ドット（ピクセル）を
基準にした絶対的な単位です。
指定した通りのサイズで表示されるため
正確なレイアウト再現が必要な場面に向いています。
使いどころ
▶︎ボタンやロゴなど見た目を固定したいパーツ
▶︎デザイン通りに表示したい部分
.button {
width: 200px;
height: 60px;
}
✅ メリット： 再現性が高い
✅ デメリット： 画面サイズに応じて調整が効かない（レスポンシブに弱い）
② %（親要素に対する相対）
特徴
▶︎親要素のサイズを基準にした相対単位です。
画面幅に応じて伸び縮みするデザインに最適。
使いどころ
▶︎画像やコンテナの幅指定
▶︎フレックスボックス内の要素サイズ
.container {
width: 90%;
}
✅ メリット： レスポンシブ対応に強い
✅ デメリット： 親要素の大きさに依存するため、構造を理解していないと崩れやすい
③rem（全体基準の相対）
特徴
▶︎「ルート要素（html）のfont-size」を基準にした相対単位。
サイト全体の文字サイズや余白を一括で調整できるのが強みです。
使いどころ
▶︎フォントサイズ
▶︎余白（margin, padding）の統一
html {
font-size: 100%; /* 基準16px */
}
h1 {
font-size: 2rem; /* 32px相当 */
}
✅ メリット： 全体のサイズバランスを一箇所で管理できる
✅ デメリット： 設定ミスがあると全体に影響が出る
④ em（親要素基準の相対）
特徴
▶︎親要素のfont-sizeを基準にする単位。
ネスト（入れ子構造）が深くなると計算が複雑になります。
使いどころ
▶︎テキストサイズに比例させたい余白指定
▶︎ボタン内など、親要素に合わせて柔軟にサイズ調整したい場合
p {
font-size: 16px;
}
span {
font-size: 1.5em; /* p要素が16px → 1.5emで24pxになる */
}
✅ メリット： 柔軟なデザイン調整が可能
✅ デメリット： ネストが多いと意図せずサイズが膨らむ
⑤ vw（画面幅基準）
特徴
▶︎ビューポート（表示領域）の幅に対して相対的に決まる単位。
1vw = 画面幅の1%です。
使いどころ
▶︎全幅デザインのタイトル文字
▶︎スマホ・PC問わず画面に合わせて自動調整したい部分
h1 {
font-size: 5vw; /* 画面幅の5%のサイズで文字を表示 */
}
✅ メリット： 画面幅に連動して拡大・縮小できる
✅ デメリット： 画面が極端に小さい・大きいときに崩れる可能性あり
⑥ vh（画面高さ基準）
特徴
▶︎ビューポートの高さに対して相対的に決まる単位。
1vh = 画面の高さの1%。
使いどころ
▶︎メインビジュアル（ファーストビュー）全画面表示
▶︎スクロール前に全体を見せたい構成
.main-visual {
height: 100vh; /* 画面の高さ100% */
}
✅ メリット： 全画面デザインが簡単に作れる
✅ デメリット： スマホのアドレスバーなどにより誤差が出る場合あり
【まとめ】6つの単位の使い分け方
| 目的 | おすすめ単位 | 特徴 |
|---|---|---|
| デザイン通りに固定したい | px | 再現性が高い |
| 親要素に合わせたい | % | レスポンシブ向き |
| 全体の統一管理 | rem | ルート基準で調整が楽 |
| 親要素に連動させたい | em | 柔軟だがやや複雑 |
| 画面幅に合わせたい | vw | 横幅全体に合わせたいとき |
| 画面高さに合わせたい | vh | 全画面レイアウトに最適 |
明日は、「HTMLとCSSのレイアウト・セクション構成」を初心者向けにわかりやすく解説します！
「sectionとdivってどう違うの？」
「どこで区切ればSEO的に良いの？」といった疑問を
図解＋実例コード付きでスッキリ解消します。
明日の記事もぜひチェックして、
“プロっぽい構造のサイト”を作れるようになりましょう！