皆さん、Webページのデザインを考えるとき、どのような「単位」でサイズを指定していますか？
CSSには、色々な単位が存在します。今回はその中でも主要なものを簡単にご紹介します！
1. px（ピクセル）
- 定義: 画面上の一つ一つの点を示す単位。
- 使いどころ: サイズや位置を固定で指定したい時に使います。
👉 ポイント: pxは最も一般的で直感的な単位！
2. em
- 定義: 親要素のフォントサイズを基準にした相対的な単位。
- 使いどころ: 親要素のフォントサイズに合わせて、サイズを自動調整したい時。
👉 ポイント: 親要素のフォントサイズが変われば、emで指定したサイズも変わります！
3. rem
- 定義: ルート要素（htmlタグ）のフォントサイズを基準にした相対的な単位。
- 使いどころ: 全体の基準となるフォントサイズに合わせて、一貫してサイズを調整したい時。
👉 ポイント: 基準となるフォントサイズ一つで、全体のサイズを一元的に管理できます！
4. %
- 定義: 親要素のサイズを基準にした相対的な単位。
- 使いどころ: 親要素に対して、何%のサイズや位置を取るかを指定したい時。
👉 ポイント: レスポンシブデザインを考える時に大活躍！
5. vh & vw
-
定義: 画面の高さ（
vh）と幅（vw）を基準にした単位。1vhは画面の高さの1%、1vwは画面の幅の1%。 - 使いどころ: 画面サイズに応じてサイズや位置を動的に調整したい時。
👉 ポイント: 画面サイズにフィットしたデザインを実現できます！
CSSの単位を用途ごとに比較
| 単位 | 定義 | 一般的な用途 |
|---|---|---|
| px | 画面上の一つ一つの点を示す単位。 | サイズや位置を固定で指定したい時。最も一般的な単位。 |
| em | 親要素のフォントサイズを基準にした相対単位。 | 親要素のフォントサイズに応じて、サイズや位置を調整したい場合。子要素が親のサイズに動的に合わせたい時。 |
| rem | ルート要素のフォントサイズを基準にした相対単位。 | 全体のデザインの基準となるフォントサイズに一貫して合わせたい時。 |
| % | 親要素のサイズを基準にした相対単位。 | 親要素に対して、子要素のサイズや位置を指定したい場合。特にレスポンシブデザインで用いる。 |
| vh | 画面の高さの1%を示す単位。 | 画面の高さに合わせて要素のサイズや位置を調整したい時。 |
| vw | 画面の幅の1%を示す単位。 | 画面の幅に合わせて要素のサイズや位置を調整したい時。 |