CSSのビューポート単位 vh/vw と % の違いを徹底解説！使い分けのポイントも紹介

2024-05-23

CSSにおけるvh/vwと%の違い：わかりやすい解説

これらの単位はそれぞれ異なる特性を持っており、適切な使い分けが重要となります。そこで今回は、vh/vwと%の違いについて、わかりやすく解説します。

各単位の定義

vh: ビューポートの高さを100%としたときの1%を表します。つまり、1vhはブラウザウィンドウの高さの1%に相当します。
%: 親要素の幅または高さを100%としたときの1%を表します。

単位の比較

単位	基準	例	メリット	デメリット
vh	ビューポート高さ	要素の高さをブラウザウィンドウの高さの50%に設定: `height: 50vh;`	スマートフォン/PC問わず、一貫した高さを設定できる	アドレスバーの高さを考慮しないため、状況によっては意図した高にならない場合がある
vw	ビューポート幅	要素の幅をブラウザウィンドウの幅の80%に設定: `width: 80vw;`	スマートフォン/PC問わず、一貫した幅を設定できる	アドレスバーの幅を考慮しないため、状況によっては意図した幅にならない場合がある
%	親要素	親要素の幅の50%の幅を持つ要素: `width: 50%;`	親要素との比率でサイズが決まるため、レイアウトが崩れにくい	スマートフォン/PCによって表示サイズが異なる場合がある

使い分けるポイント

vh/vwは、ブラウザウィンドウのサイズに依存して要素のサイズを変化させたい場合に適しています。レスポンシブデザインで、様々な画面サイズに柔軟に対応するレイアウトを作成する際に役立ちます。
**%**は、親要素との比率を維持して要素のサイズを変化させたい場合に適しています。例えば、ヘッダーやフッターなどのナビゲーション要素を常に一定の割合で表示したい場合などに便利です。

その他

vh/vwは比較的新しい単位であり、一部の古いブラウザでは対応していない場合があります。
calc関数と組み合わせて、より柔軟なサイズ設定を行うこともできます。

まとめ

vh/vwと%はそれぞれ異なる特性を持つ単位であり、状況に応じて適切な単位を使い分けることが重要です。それぞれのメリットとデメリットを理解し、目的に合った単位を選択することで、より効果的なWebデザインを作成することができます。

上記に加えて、以下の点にも注意しましょう。

アドレスバーの影響: アドレスバーが表示/非表示になると、vh/vwの値が変化するため、注意が必要です。固定レイアウトと併用する場合は、アドレスバーの影響を受けない方法を検討する必要があります。
デバイスごとの表示: スマートフォンやタブレットなどのデバイスでは、画面解像度やブラウザの設定によって、実際の表示サイズが異なる場合があります。シミュレータなどを活用して、様々なデバイスでの表示を確認することが重要です。

これらの点を踏まえ、**vh/vwと%**を上手に使いこなすことで、よりユーザーにとって見やすく使いやすいWebサイトを作成することができます。

要素の高さをブラウザウィンドウの高さの50%に設定

<div class="box">
  コンテンツ
</div>

.box {
  height: 50vh;
}

要素の幅をブラウザウィンドウの幅の80%に設定

<div class="box">
  コンテンツ
</div>

.box {
  width: 80vw;
}

このコードは、.box クラスを持つ要素の幅をブラウザウィンドウの幅の80%に設定します。ブラウザウィンドウのサイズが変化しても、要素の幅がそれに合わせて調整されます。

親要素の幅の50%の幅を持つ要素

<div class="parent">
  <div class="box">
    コンテンツ
  </div>
</div>

.parent {
  width: 1000px; /* 親要素の幅を1000pxに設定 */
}

.box {
  width: 50%; /* 親要素の幅の50%の幅を持つ */
}

このコードは、.parent クラスを持つ親要素の中に、.box クラスを持つ要素を作成します。.box 要素の幅は親要素の幅の50%に設定されるため、常に親要素の半分の幅になります。

calc関数と組み合わせて要素のサイズを設定

<div class="box">
  コンテンツ
</div>

.box {
  width: calc(50vw - 20px); /* ブラウザウィンドウ幅の50%から20pxを引いた値 */
  height: calc(30vh + 50px); /* ブラウザウィンドウ高の30%に50pxを足した値 */
}

このコードは、.box クラスを持つ要素の幅と高さを、calc関数を使用して算出しています。calc関数を使用することで、より柔軟なサイズ設定が可能になります。

これらのサンプルコードを参考に、vh/vwと%を上手に使いこなして、様々なWebデザインを作成してみてください。

CSSのビューポート単位以外にも、要素のサイズや位置を指定する方法はいくつかあります。以下に、代表的な方法をご紹介します。

最も基本的な単位で、1pxは画面上の1ドットを表します。絶対的なサイズを指定したい場合に適しています。

例：

width: 100px; /* 幅を100ピクセル */
height: 50px; /* 高さを50ピクセル */

現在のフォントサイズを基準とした相対的な単位です。1emは、現在のフォントサイズの1行分の高さを表します。本文などのテキスト要素のサイズを指定する場合によく使用されます。

font-size: 16px; /* フォントサイズを16ピクセルに設定 */
p {
  font-size: 1.2em; /* 段落のフォントサイズを現在のフォントサイズの1.2倍に設定 */
}

ルートemとも呼ばれ、ブラウザのデフォルトフォントサイズ（通常16px）を基準とした相対的な単位です。emと同様に、本文などのテキスト要素のサイズを指定する場合によく使用されます。remは、異なるデバイス間でフォントサイズが一貫して表示されるように設計されています。

html {
  font-size: 10px; /* ブラウザのデフォルトフォントサイズを10ピクセルに設定 */
}

p {
  font-size: 1.2rem; /* 段落のフォントサイズをデフォルトフォントサイズの1.2倍に設定 */
}

百分率(%)

親要素の幅または高さを100%としたときの1%を表します。親要素との比率でサイズが決まるため、レイアウトが崩れにくいというメリットがあります。

.container {
  width: 100%; /* 親要素の幅を100%に設定 */
}

.box {
  width: 50%; /* 親要素の幅の50%の幅を持つ */
}

flexboxは、要素を柔軟にレイアウトするためのレイアウトモードです。行方向または列方向に要素を並べたり、要素間の間隔を調整したりすることができます。レスポンシブデザインで複雑なレイアウトを作成する場合によく使用されます。

.container {
  display: flex; /* flexboxレイアウトを適用 */
  flex-direction: row; /* 要素を横方向に並べる */
}

.box {
  flex: 1; /* すべての要素が利用可能なスペースを均等に分配 */
}

gridは、要素を行と列のグリッドに配置するためのレイアウトモードです。flexboxよりも高度なレイアウト機能を提供しており、複雑なレイアウトをより簡単に作成することができます。

.container {
  display: grid; /* gridレイアウトを適用 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 列を自動的に作成し、最小幅200px、最大幅画面幅の1/1に設定 */
}

.box {
  grid-column: 1 / 3; /* 1番目から3番目の列にまたがるように配置 */
  grid-row: 2; /* 2番目の行に配置 */
}