目次
はじめに
CSSのサイズ指定で出てくる px % rem vh vw。種類が多くて「結局どれを使えばいいの？」と迷いますよね。この記事では、それぞれの特徴と使い分けの目安を、具体例付きでスッキリ整理します！
単位は「絶対単位」と「相対単位」に分かれる
- 絶対単位（px）：環境に左右されない固定サイズ
- 相対単位（%・rem・vh・vw）：親や画面に応じて伸縮する
px（絶対単位）
.box { width: 200px; }画面幅が変わっても固定。ボタンやアイコンなど、サイズを固定したいときに。レスポンシブには不向きです。
%（親要素を基準）
.child { width: 50%; } /* 親の半分の幅 */親のサイズに追従。レスポンシブなレイアウトに向いています。
rem（ルートの文字サイズを基準）
html { font-size: 16px; }
.text { font-size: 1.5rem; } /* = 24px */基準が一箇所（html）に集約されるので、文字サイズの管理がしやすいのが利点です。
vh・vw（画面サイズを基準）
.hero { height: 100vh; } /* 画面の高さいっぱい */vh＝画面の高さの割合 /vw＝画面の幅の割合- 全画面のヒーローセクションなどに便利
使い分けの目安
| 単位 | 基準 | 向いている用途 |
|---|---|---|
| px | 固定 | ボタン・アイコン・枠線 |
| % | 親要素 | 横幅のレスポンシブ |
| rem | ルート文字 | 文字サイズ・余白の統一管理 |
| vh/vw | 画面 | 全画面セクション |
emとremの違い（混同しやすいポイント）
remとよく似た単位に em があります。違いは「基準にする場所」です。
rem＝常にルート（html）の文字サイズが基準em＝その要素自身（親）の文字サイズが基準
emは入れ子になると基準が次々に変わって計算がややこしくなりがちです。文字サイズの管理は、基準がブレないremのほうが扱いやすい場面が多いですよ。
remをfont-sizeに使うと、アクセシビリティにも強い
これは意外と知られていないのですが、文字サイズをpxで固定すると、ユーザーがブラウザの「文字サイズを大きく」という設定をしても反映されません。一方remで指定しておくと、ユーザーの設定に追従して拡大されます。
目が疲れやすい方や年配の方にもやさしいサイトになるので、本文の文字サイズはremで指定するのがおすすめです。これは私が実務でも必ず意識しているポイントです。
つまずきやすいポイント：「%」は何に対する割合？
初心者がよくハマるのが%です。width: 50%は親の幅の半分で直感どおりですが、height: 50%は「親に高さが指定されていないと効かない」という落とし穴があります。
「高さの%が効かない…」と悩んだら、まず親要素にheightが指定されているかを確認してみてください。私も最初はここでよく詰まりました。
まとめ
迷ったら「固定したいpx／伸縮させたい相対単位」と覚えればOK。レスポンシブ対応では相対単位が主役になります！
