CSS 単位について

# 単位一覧
| 単位       | 何を基準にしている？        | 使い方や特徴のポイント                     | どんなときに使う？                    |
| -------- | ----------------- | ------------------------------- | ---------------------------- |
| **px**   | 画面の小さな点（ピクセル）     | 絶対的なサイズ。どんな画面でも同じ大きさになる。        | アイコンのサイズや境界線の太さなど正確に決めたいとき。  |
| **rem**  | ルート（HTMLタグ）の文字サイズ | 相対的なサイズ。ブラウザの基本フォントサイズに依存する。    | 文字サイズや余白を統一的に変えたいとき。         |
| **em**   | 親要素の文字サイズ         | 相対的なサイズ。ネスト（入れ子）が深いとサイズが変わることも。 | コンポーネント内の文字サイズや余白調整に使う。      |
| **%**    | 親要素の幅や高さ          | 親要素に対する割合で決まる。レスポンシブデザインに便利。    | 幅や高さを親のサイズに合わせたいとき。          |
| **vw**   | ビューポート（画面の幅）の1%   | 画面幅の割合でサイズを決める。画面サイズに応じて変わる。    | 画面幅に合わせて文字や画像の大きさを変えたいとき。    |
| **vh**   | ビューポート（画面の高さ）の1%  | 画面高さの割合でサイズを決める。画面の高さに合わせて変わる。  | 画面いっぱいの高さを指定したいとき。           |
| **auto** | ブラウザや親要素におまかせ     | サイズを自動で決める。内容や親要素の状況に合わせる。      | 画像の自然な大きさを維持したいときや自動調整したいとき。 |

### 1.`px`（ピクセル）
- 意味：画面上の1点の大きさ。ディスプレイの小さなドット1つ分。
- 特徴：絶対的なサイズ。どの画面でも同じ大きさになる。
- 例：「`font-size: 16px;`」は文字の大きさを16ピクセルにする。

### 2.`rem`（ルートem）
- 意味：ルート（htmlタグ）のフォントサイズを基準にした相対単位。
- 特徴：親の影響を受けずに、ページ全体の基準サイズに対して比率を指定できる。
- 例：「`font-size: 2rem;`」はhtmlのフォントサイズの2倍の大きさになる。
- ポイント：htmlのフォントサイズが`16px`なら、`2rem`は`32px`になる。

### 3. `em`（エム）
- 意味：親要素のフォントサイズを基準にした相対単位。
- 特徴：親のフォントサイズが変わると影響を受けるから、入れ子構造でサイズが変わりやすい。
- 例：「`font-size: 1.5em;`」は親の文字サイズの1.5倍。

### 4. `%`（パーセント）
- 意味：親要素のサイズの割合で指定する単位。
- 特徴：親のサイズに対して相対的に変わる。文字のサイズや幅・高さにも使える。
- 例：親要素が`1000px`の指定の場合
    - `width: 50%;`
    要素の幅は `1000px`の`50%`で`500px`になります。
    - `padding: 50%;`または`margin: 50%;`の指定の場合
        - 上下左右すべて親要素の幅を基準にして計算されます。
        - したがって、幅`1000px`の親要素がある場合：
            - `padding-top`: 親の幅 `1000px` の `50%` = `500px`
            - `padding-bottom`: 親の幅 `1000px` の `50%` = `500px`
            - `padding-left`: 親の幅 `1000px` の `50%` = `500px`
            - `padding-right`: 親の幅 `1000px` の `50%` = `500px`

### 5. `vw`（ビューポート幅）
- 意味：画面の幅（ビューポート幅）の1％。
- 特徴：ブラウザの幅に応じて大きさが変わる。
- 例：「`width: 50vw;`」は画面幅の半分の幅。

### 6. `vh`（ビューポート高さ）
- 意味：画面の高さ（ビューポート高さ）の1％。
- 特徴：ブラウザの高さに応じて大きさが変わる。
- 例：「`height: 100vh;`」は画面の高さいっぱいにする。

### 7. `auto`
- 意味：ブラウザやCSSのルールに任せて自動調整する。
- 特徴：明示的にサイズを指定しない時や、要素の自然なサイズを使いたいときに使う。
- 例：「`width: auto;`」は要素の内容や親要素に合わせて幅を決める。

# 幅設定
| プロパティ          | 意味                     | 特徴                  |
| -------------- | ---------------------- | ------------------- |
| `width: 100%`  | **親要素の幅に対して100%**      | 親のサイズにぴったり合わせる      |
| `width: 100vw` | **画面の幅（ビューポート幅）の100%** | 親に関係なく、**画面全体に広がる** |

# `width`と`max-width`
## 1)`%`指定
| **指定方法**                         | **意味・挙動**                                    | **親要素が小さい場合**           | **親要素が大きい場合**                     | **レスポンシブ対応**     |
| -------------------------------- | -------------------------------------------- | ----------------------- | --------------------------------- | ---------------- |
| `width: 100%;`                   | 常に親要素の幅の100%。親が大きくなれば無限に広がる。                 | 親の幅に合わせて縮む              | 親の幅に合わせて広がる（場合によっては画面からはみ出す）      | △（伸びすぎる可能性がある）   |
| `max-width: 100%;`               | 幅はコンテンツなどで決まり、**最大**でも親の幅の100%を超えない。画像などに最適。 | 親の幅に合わせて縮む              | 親の幅より小さければそのまま。大きくても親の幅までで止まる     | ○（縮むだけの柔軟な対応）    |

## 2)`px`指定
| **指定方法**                         | **意味・挙動**                                    | **親要素が小さい場合**           | **親要素が大きい場合**                     | **レスポンシブ対応**     |
| -------------------------------- | -------------------------------------------- | ----------------------- | --------------------------------- | ---------------- |
| `width: 300px;`                  | 固定幅。親が小さくても縮まない。                             | 親より大きくなると**はみ出す**可能性がある | 常に300px                           | ×（柔軟性なし）         |
|`max-width: 300px;`| コンテンツの幅で決まりつつも、**最大**幅は300pxまで。              | 親が小さければそれに合わせて縮む        | コンテンツが300px未満ならそのまま。超えても300pxで止まる | ○（widthと併用でより有効） |


- `width`と`max-width`の組み合わせも可
    - 下記の例は、親要素いっぱいに広がるものの、最大値は`500px`までとする指示です。
```CSS
width: 100%;
max-width: 500px;
```