CSSでは、サイズ・余白・文字の大きさなどを指定するために さまざまな単位 を使います。
特に Web 制作でよく使うのが以下の4つ。
- px（ピクセル）
- %（パーセント）
- rem（ルート基準の相対値）
- em（親要素基準の相対値）
この記事では、初心者が最初に覚えるべき「4つの基本単位」をわかりやすく解説します。
CSSの単位は大きく2種類ある
まずCSSの単位は、以下の2種類に分類できます。
① 絶対値（例：px）
→ デバイスが変わっても変わらない
（正確なサイズを指定できる）
② 相対値（例：%、rem、em）
→ 親要素・ルートサイズなどを基準に変化する
（レスポンシブ対応に強い）
スマホ・PC両方に対応する場合、相対値を使うことが多くなります。
px（絶対値：ピクセル）
もっともよく使われる単位です。
p {
font-size: 16px;
}
特徴
- 常に同じ大きさで表示される
- コントロールしやすい
- デザインの再現性が高い
向いている用途
- ボタンサイズ
- 枠線
- アイコンサイズ
- PC表示で細かく調整したいとき
%（相対値：親要素に対する割合）
パーセントは 親要素のサイズに対する割合 です。
.box {
width: 50%;
}
親要素が 800px なら、width は 400px になります。
特徴
- 親要素に比例して変化
- レスポンシブ対応に強い
向いている用途
- コンテナ幅（article, sectionの幅調整）
- 画像サイズ（レスポンシブ対応）
- グリッド・Flexbox での調整
rem（ルート＝html基準の相対値）
rem は htmlタグで指定された font-size を基準 に計算されます。
例：
html {
font-size: 16px;
}
p {
font-size: 1.5rem; /* 16px × 1.5 = 24px */
}
特徴
- サイト全体で統一しやすい
- 親要素の影響を受けない
- アクセシビリティに強い
rem のメリット
スマホ用に html { font-size: 14px; } にすると、
全体のバランスが保たれたまま自動で縮小されます。
向いている用途
- サイト全体の文字サイズ基準
- 余白や幅の統一した設計
- アクセシビリティ対応
今後、プロのコーディングでは rem が主流 です。
em（親要素基準の相対値）
em は rem と似ていますが、基準が 親要素の font-size になります。
例
.parent {
font-size: 20px;
}
.child {
font-size: 1.2em; /* 20px × 1.2 = 24px */
}
特徴
- 親要素に依存する
- 入れ子が深いとサイズが膨らむ（注意）
em の注意点（初心者は要注意）
入れ子で使うと予期せぬサイズになることがあります。
親20px
└ 子1.2em → 24px
└ 孫1.2em → 28.8px?
→ 初心者は慣れるまで rem の方が安全です。
向いている用途
- ボタン内余白（padding）
- アイコンなど相対調整したい時
4つの単位の違いをまとめると？
| 単位 | 種類 | 基準 | 特徴 |
|---|---|---|---|
| px | 絶対値 | 固定 | 再現性が高い |
| % | 相対値 | 親要素 | レスポンシブ向き |
| rem | 相対値 | htmlのfont-size | サイト全体の統一に最適 |
| em | 相対値 | 親要素のfont-size | ボタンなどローカル用 |
実践：おすすめの単位の使い分け
| 用途 | おすすめ単位 | 理由 |
|---|---|---|
| 文字サイズ | rem | 全体で統一しやすい |
| 余白（padding/margin） | rem or em | 相対変化に強い |
| 幅 | % or rem | レスポンシブ対応 |
| アイコンサイズ | px | 見た目を固定したい |
| ボタンの内側余白 | em | 文字サイズに比例させたい |
よくある間違いと注意点
px だけでサイト全体を作る
→ スマホ対応で破綻しやすい
em をあちこちで使って混乱する
→ 親依存になるためサイズが読みにくい
rem を知らずにレスポンシブが作れない
→ 初心者の伸び悩みポイント
まとめ
この4種類の単位は、CSSの基礎として必ず覚えるべきものです。
- px ＝ 絶対値
- % ＝ 親要素の割合
- rem ＝ html 基準の相対値（最もおすすめ）
- em ＝ 親要素基準の相対値
これを理解できると、
デザインの再現性と、レスポンシブ対応が飛躍的にうまくなります。
著者からのひと言
CSSの単位は少しややこしいように感じますが、
実際は「基準が何か」を理解すれば一気にシンプルになります。
特に rem は、現代のWeb制作では必須の考え方です。
次回は「WebセーフカラーとCSSで使う色の指定方法」についてです。
