Units

3. CSSの単位

CSSには様々な単位があります。px（絶対値）だけでなく、
%, em, rem, vw, vh などの相対単位を使いこなすことがレスポンシブデザインの鍵です。

🎮 単位の比較 ウィンドウ幅: --px
width: 200px
width: 50%
width: 30vw
width: 20rem
/* 絶対単位 */
.box-1 { width: 200px; }    /* 常に200px */

/* 親要素に対する割合 */
.box-2 { width: 50%; }      /* 親の50% */

/* ビューポートに対する割合 */
.box-3 { width: 30vw; }     /* 画面幅の30% */

/* ルートフォントサイズに対する割合 */
.box-4 { width: 20rem; }    /* 16px * 20 = 320px */

単位リファレンス

単位 種類 基準 用途
px 絶対 1ピクセル border, 小さい余白
% 相対 親要素 幅、高さ
em 相対 親のfont-size コンポーネント内余白
rem 相対 :root のfont-size フォント、余白（推奨）
vw 相対 ビューポート幅 フルワイド要素
vh 相対 ビューポート高 ヒーローセクション

clamp() 関数

clamp(min, preferred, max) で、最小・最大を設定した流動的な値を定義できます。 

/* フォントサイズを16px〜24pxの間で可変 */
h1 {
  font-size: clamp(16px, 4vw, 24px);
}

/* コンテナ幅を300px〜1200pxの間で可変 */
.container {
  width: clamp(300px, 80%, 1200px);
}

📌 覚えておきたいポイント

  • rem は予測可能でアクセシブル（ブラウザの文字サイズ設定を尊重）
  • em は入れ子で累積するので注意
  • vw/vh はスクロールバーを含む場合がある
  • clamp() でメディアクエリなしのレスポンシブが可能
  • border は px でOK（1pxは1pxであるべき）