CSS ビューポート単位vw、vh、vmin、vmaxの完全ガイド：画面サイズに応じて動的に変動

レスポンシブデザインを実現する上で、画面サイズに応じて柔軟に対応できるCSSのビューポート単位は非常に便利です。

ビューポート単位とは？（vw、vh、vmin、vmax）

ビューポート単位は、ブラウザのビューポート(表示領域)のサイズに基づいて要素のサイズを指定できるCSS単位です。

画面サイズが変わると、自動的にサイズが調整されるため、レスポンシブデザインに最適です。

ビューポート単位（vw, vhなど）は、原則としてスクロールバーやモバイルのアドレスバーも幅を含みません。

主要なビューポート単位

.full-width {
  width: 100vw;/* 画面幅いっぱい */
}

.half-width {
  width: 50vw;/* 画面幅の半分 */
}

.full-width {
  width: 100vw;/* 画面幅いっぱい */
}

.half-width {
  width: 50vw;/* 画面幅の半分 */
}

.full-height {
  height: 100vh;/* 画面高さいっぱい */
}

.hero-section {
  height: 80vh;/* 画面高さの80% */
}

.full-height {
  height: 100vh;/* 画面高さいっぱい */
}

.hero-section {
  height: 80vh;/* 画面高さの80% */
}

.square {
  width: 50vmin;
  height: 50vmin;/* 常に正方形を維持 */
}

.square {
  width: 50vmin;
  height: 50vmin;/* 常に正方形を維持 */
}

.large-text {
  font-size: 10vmax;/* 画面の大きい方の10% */
}

.large-text {
  font-size: 10vmax;/* 画面の大きい方の10% */
}

実践的な使用例

h1 {
  font-size: calc(2rem + 2vw);
  /* 基本サイズ + 画面幅に応じた可変サイズ */
}

p {
  font-size: clamp(1rem, 2vw, 1.5rem);
  /* 最小1rem、理想2vw、最大1.5rem */
}

h1 {
  font-size: calc(2rem + 2vw);
  /* 基本サイズ + 画面幅に応じた可変サイズ */
}

p {
  font-size: clamp(1rem, 2vw, 1.5rem);
  /* 最小1rem、理想2vw、最大1.5rem */
}

.hero {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail {
  width: 30vmin;
  height: 30vmin;
  object-fit: cover;
}

.thumbnail {
  width: 30vmin;
  height: 30vmin;
  object-fit: cover;
}

.card {
  width: calc(100vw - 2rem);
  max-width: 600px;
  padding: 5vmin;
}

.card {
  width: calc(100vw - 2rem);
  max-width: 600px;
  padding: 5vmin;
}

注意点とベストプラクティス

/* 回避策 */
.container {
  width: 100%;
  max-width: 100vw;
}

/* 回避策 */
.container {
  width: 100%;
  max-width: 100vw;
}

/* 新しいビューポート単位を使用（対応ブラウザのみ） */
.section {
  height: 100dvh;/* Dynamic Viewport Height */
}

/* 新しいビューポート単位を使用（対応ブラウザのみ） */
.section {
  height: 100dvh;/* Dynamic Viewport Height */
}

/* 推奨 */
font-size: calc(1rem + 0.5vw);

/* 非推奨（ユーザー設定が反映されない） */
font-size: 3vw;

/* 推奨 */
font-size: calc(1rem + 0.5vw);

/* 非推奨（ユーザー設定が反映されない） */
font-size: 3vw;

ブラウザ対応状況

基本的なビューポート単位（vw、vh、vmin、vmax）は、現在のほとんどのモダンブラウザでサポートされています。

ただし、古いブラウザ（IE11以前など）では、フォールバック値を用意することをおすすめします。

.container {
  height: 500px;/* フォールバック */
  height: 50vh; /* 対応ブラウザで適用 */
}

.container {
  height: 500px;/* フォールバック */
  height: 50vh; /* 対応ブラウザで適用 */
}

lvh (Large Viewport Height)

lvh は、モバイルブラウザのUI（アドレスバーやツールバーなど）が完全に非表示になった状態の、最大の表示可能領域を基準とします。

• 100lvh = UIが隠れた時の、画面の高さいっぱい。
• 用途: ヒーローセクションなど、コンテンツの表示領域が最も広い状態の高さに固定したい場合に適しています。

svh (Small Viewport Height)

svh は、モバイルブラウザのUIが完全に表示された状態の、最小のコンテンツ表示領域を基準とします。

• 100svh = UIが表示されている時の、画面の高さいっぱい。
• 用途: 要素が画面からはみ出さず、UIが表示されても確実に収まるように、最小限の高さを固定したい場合に適しています。

dvh (Dynamic Viewport Height)

dvh は、モバイルブラウザのUIの表示・非表示に動的に連動し、現在のコンテンツ表示領域を基準とします。

• 100dvh = ユーザーが現在見ている表示領域の高さ。
• 用途: スクロールによってUIが隠れると、要素の高さがリアルタイムで追従して伸びます。記事で言及したように、従来の100vhが抱える変動問題を回避したい場合の、最も柔軟な代替手段です。

💡 従来の vh との使い分け

モバイルの高さを扱う際には、特別な理由がない限り、従来のvhではなく、lvh、svh、またはdvhのいずれかを使用することが現代のベストプラクティスです。

まとめ

ビューポート単位を適切に使用することで、より柔軟でレスポンシブなデザインを実現できます。

それぞれの単位の特性を理解し、用途に応じて使い分けることが重要です。

• vw/vh: 画面の幅/高さに応じたサイズ指定
• vmin/vmax: 画面の向きに依存しないサイズ指定
• calc()やclamp()との組み合わせ: より細かい制御

これらの単位をマスターして、ユーザー体験の良いウェブサイトを作成しましょう！