CSSで使う単位のまとめ

**＜本記事のターゲット層＞**
- CSSの単位でいつも混乱する人
- px以外の単位がよくわからない人
- 単位の使い分けを知りたい人

## はじめに
昭和世代なもので、px以外の単位を使うときに慣れるまで苦労しました。あるいは久しぶりに触ると、分かっているつもりでついつい間違えて使ってしまうときもあり、チートシート的なものと、思い出せる資料が欲しいなーと思い、この記事を書くことにしました。

### 単位について

CSS（Cascading Style Sheets）では、長さやサイズを指定するときに「**単位**」を使います。単位は、**フォントサイズ**や**幅（width）・高さ（height）**、<b>マージン(margin)・パディング(padding)</b>などを設定するときに必要です。

以下では、CSSでよく使う単位を「**絶対単位**」と「**相対単位**」に分けて、表にまとめます。

※参考ページ：[MDN](https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Values_and_units)

---

#### ✅ 絶対単位（常に同じサイズ）

絶対単位は、**画面サイズや文字サイズに関係なく、常に一定の大きさ**です。

| 単位   | 説明                 | 例                 | 備考         |
| ---- | ------------------ | ----------------- | ---------- |
| `px` | ピクセル（画面の点）         | `font-size: 16px` | 一番よく使われる単位 |
| `cm` | センチメートル            | `width: 10cm`     | 印刷向け       |
| `mm` | ミリメートル             | `height: 50mm`    | 印刷向け       |
| `in` | インチ（1in = 2.54cm）  | `width: 1in`      | 印刷向け       |
| `pt` | ポイント（1pt = 1/72in） | `font-size: 12pt` | 主に印刷業界で使用  |
| `pc` | パイカ（1pc = 12pt）    | `font-size: 1pc`  | あまり使われない   |

---

#### ✅ 相対単位（親要素や画面サイズによって変わる）

相対単位は、**他の要素に対してサイズが決まる**ので、**レスポンシブ（画面に合わせた）デザイン**に向いています。

| 単位     | 説明                             | 例                   | よく使う場面          |
| ------ | ------------------------------ | ------------------- | --------------- |
| `%`    | 親要素に対する割合                      | `width: 50%`        | コンテナの半分など       |
| `em`   | 親のフォントサイズに対する倍率（1em = 親と同じ）    | `font-size: 2em`    | 親のサイズの2倍        |
| `rem`  | ルート（html要素）のフォントサイズ基準（root em） | `font-size: 1.5rem` | どこでも同じ基準でサイズ指定可 |
| `vw`   | ビューポート幅（画面幅）の1%                | `width: 100vw`      | 画面全体の幅に合わせる     |
| `vh`   | ビューポート高さの1%                    | `height: 100vh`     | 画面全体の高さに合わせる    |
| `vmin` | `vw`と`vh`の小さい方の値               | `width: 50vmin`     | 正方形などに便利        |
| `vmax` | `vw`と`vh`の大きい方の値               | `width: 50vmax`     | フルスクリーン背景など     |
| `ch`   | "0" の幅を基準にした文字幅                | `width: 20ch`       | テキストの長さに合わせたいとき |
| `ex`   | 小文字の"x"の高さを基準                  | `height: 2ex`       | あまり使われない        |

---

#### 🔰 初心者へのアドバイス

* **まずは `px`、`%`、`em`、`rem` を覚えるのがおすすめ**。
* **レスポンシブ対応には `rem` や `%` を使うと便利**。
* **フォントサイズは `rem`、レイアウトには `%` や `vw`/`vh` を組み合わせよう**。

---

## 🎯 単位の使い分け【具体例付き】

| 使う場面       | おすすめ単位         | 理由・使い方例                                                   |
| ---------- | -------------- | --------------------------------------------------------- |
| フォントサイズ    | `rem`          | ルートのサイズに比例。全体の拡大縮小がしやすい。<br>例：`font-size: 1.2rem;`        |
| ボタンや余白のサイズ | `em` または `rem` | テキストサイズに合わせて調整しやすい。<br>例：`padding: 0.5em 1em;`            |
| コンテンツの幅    | `%`            | 親要素に対して柔軟に変化。<br>例：`width: 100%;`                         |
| 全画面表示      | `vw`, `vh`     | ビューポート基準。画面サイズに対応できる。<br>例：`width: 100vw; height: 100vh;` |
| テキストの幅     | `ch`           | 文字数に応じたサイズ調整に便利。<br>例：`width: 60ch;`                      |
| 固定サイズの画像や線 | `px`           | デザイン上ぴったり合わせたいとき。<br>例：`border: 1px solid #ccc;`          |

---

## 📱 レスポンシブデザインにおけるコツ

レスポンシブデザインとは、**スマホ・タブレット・PCなど、画面サイズが違っても見やすいデザイン**のことです。

### 🔹 1. フォントサイズは `rem` で統一する

```css
html {
  font-size: 16px; /* 基準値（1rem = 16px） */
}

h1 {
  font-size: 2rem; /* = 32px */
}
```

✅ ユーザーがブラウザの文字サイズを変更しても柔軟に対応できます。

---

### 🔹 2. レイアウト幅は `%` や `vw` を使う

```css
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
```

✅ `%`で柔軟に、`max-width`でPCなど大画面で見やすく調整。

---

### 🔹 3. マージン・パディングは `em` or `rem`

```css
.card {
  padding: 1.5rem;
  margin-bottom: 2rem;
}
```

✅ フォントサイズに比例して余白が自動で調整され、統一感が出ます。

---

### 🔹 4. 画面サイズによって切り替える（メディアクエリ）

```css
@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}
```

✅ スマホサイズのときだけ余白やレイアウトを変更できます。

---

### 🔹 5. ビューポート対応の高さ調整は `vh`

```css
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

✅ 常に画面の高さに合わせたセクションが作れます（トップページのヒーローなどに便利）。

---

### 🧩 まとめ

| 要素    | 単位              | ポイント               |
| ----- | --------------- | ------------------ |
| テキスト  | `rem`           | ルート基準で管理しやすい       |
| パディング | `em`, `rem`     | テキストと連動すると自然な余白になる |
| 幅・高さ  | `%`, `vw`, `vh` | 画面サイズに応じて柔軟に調整できる  |
| 固定サイズ | `px`            | デザインを正確に調整したいとき    |