%とvwの違い

1. % の場合

• 基準：親要素の幅（width プロパティにおける場合）

• 例：.child { width: 50%; }
  → 親要素の幅の 50% になる

• ポイント：

  • 親コンテナのサイズに依存

  • レイアウト構造（ネスト）が深いほど、基準も連鎖的に変わる

2. vw の場合

• 基準：ビューポート（ブラウザ表示領域）の幅

• 1 vw = ビューポート幅の 1%

• 例：.box { width: 20vw; }
  → ブラウザ表示領域の幅の 20% になる

• ポイント：

  • ページ全体の横サイズに対して一定

  • ネスト構造に影響されず、常に画面幅基準