%とvwの違い

1. % の場合

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

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

• ポイント：

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

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

2. vw の場合

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

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

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

• ポイント：

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

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

designist編集部

世界すべての人を Live Rich にするウェブメディア 『デザイニスト』。美的•情操文化をデザイナーや芸術家という領域だけでなく、企業活動や生活の隅々に至るまで浸透させることを目標としています。最新カメラ情報から制作チュートリアル、香港デモ、ライフデザインに関する様々な情報をお届け！@designistJP