Webサイトを作るとき、文字サイズや余白、幅などを指定するために「単位」を使います。
ここでは、よく使う6つの単位をわかりやすく整理します。
1. px（ピクセル）
意味：画面上の1点（ディスプレイのドット1つ分）。
特徴：絶対的な単位で、どの画面でも同じ見た目のサイズになります。
使いどころ：デザインをカンプどおりに再現したいとき。
2. rem（ルートem）
意味：ルート（html）のフォントサイズを基準にした相対単位。
特徴：親要素の影響を受けず、ページ全体の基準に対してサイズを指定できる。
ポイント：htmlのフォントサイズが16pxなら、2rem = 32px。
おすすめの使い方：文字サイズや余白など、全体で統一したスケールを保ちたいとき。
3. em（エム）
意味：親要素のフォントサイズを基準にした相対単位。
特徴：親のサイズが変わると、それに合わせて子要素も変化します。
注意点：ネスト（入れ子）が深い構造だと、意図せずサイズが大きくなることがあります。
4. %（パーセント）
意味：親要素のサイズに対する割合で指定する単位。
特徴：親の幅や高さに応じて柔軟に変化します。
ポイント：paddingやmarginなどにも使えるが、幅を基準に計算される点に注意。
【補足】
- 親が1000pxの場合、
width: 50%;→ 500px。 padding: 50%;とすると上下左右すべて「親の幅の50%」として計算される。つまりpaddingも500pxとなる。
5. vw（ビューポート幅）
意味：ブラウザの表示領域（ビューポート）の幅を基準にした単位。
特徴：画面幅に応じて変化し、レスポンシブ対応に向いています。
ポイント：100vwが画面の全幅。
6. vh（ビューポート高さ）
意味：ブラウザの表示領域（ビューポート）の幅を基準にした単位。
特徴：画面の高さに応じて変化し、レスポンシブ対応に向いています。
ポイント：100vhで画面の高さぴったりになります。
