【CSS】viewportとは？vw・vhの使い方やスマホで100vhが崩れる原因を解説

viewportとは、ブラウザでWebページを表示している領域のことです。CSSではvwやvhを使って、viewportを基準にサイズを指定できます。しかし、「CSSのvwと%は何が違うの？」「スマホで100vhが思った高さにならないのはなぜ？」と迷う方も多いはずです。

この記事では、viewportの基本、meta viewport、vw・vhの使い方、スマホで100vhが崩れる原因まで解説します。

viewportとは？

viewportとは、ブラウザでWebページが表示されている領域のことです。PCならブラウザの表示領域、スマホならスマホ画面の表示領域をイメージすると分かりやすいです。

CSSでいうviewportは、画面幅や画面高さを基準にサイズを決めるときの土台になります。

CSSではvw・vhでviewportを使う

CSSでは、viewportを基準にした単位としてvwやvhがあります。

単位	意味	例
vw	viewport幅の1%	100vwは画面幅いっぱい
vh	viewport高さの1%	100vhは画面高さ分
dvh	動的なviewport高さの1%	スマホのアドレスバー変化に対応しやすい

meta viewportが必要な理由

スマホ対応では、HTMLのhead内にmeta viewportを書くのが基本です。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTMLに記述するこの1行には、それぞれ以下のような重要な意味（役割）があります。

設定値（バリュー）	役割・意味
width=device-width	Webページの横幅を、アクセスされた「デバイスの画面幅」とぴったり同じにする設定です。これがないと、スマホで開いてもPC用の広い幅（一般的に980pxなど）で認識されてしまいます。
initial-scale=1.0	ページが最初に読み込まれたときの「ズーム倍率を1倍（等倍）」にする設定です。スマホで開いた瞬間に、サイトが勝手に縮小されたり拡大されたりするのを防ぎます。

この設定を行うことで初めてブラウザ側が「これはスマホの画面サイズに合わせて正しく表示すべきページなんだな」と認識し、CSSで指定するvwやvhがデバイスの画面サイズを正しく基準にできるようになります。

meta viewportがないとスマホ表示が崩れやすい

meta viewportがないと、スマホでもPCサイトのような広い幅として表示され、文字が小さく見えたり、メディアクエリが思った通りに効かなかったりします。

スマホ対応でCSSを確認する前に、HTML側にmeta viewportが入っているか必ず確認しましょう。

vwと%の違い

vwと%はどちらも横幅指定で使われますが、基準が違います。

単位	基準	使う場面
%	親要素	親の中で幅を調整したい
vw	viewport幅	画面幅を基準にしたい

100vwは横スクロールの原因になることがある

width: 100vw;は画面幅いっぱいの指定ですが、スクロールバーの幅まで含んで横にはみ出ることがあります。

.full-section {
  width: 100vw;
}

では、なぜwidth: 100vw;を指定すると横スクロールバーが出てしまうのでしょうか？理由は主に2つあります。

原因1：スクロールバーの横幅が含まれてしまうため

100vwは「ブラウザの画面幅（スクロールバーの幅も含む）」を基準に計算されます。そのため、ページに縦スクロールバーが表示されている場合、100vw（画面幅） ＋ 縦スクロールバーの幅となり、その分だけ全体の横幅が右側にはみ出してしまいます。

原因2：パディング（padding）やマージン（margin）の罠

実務で非常によくある罠が、要素にwidth: 100vw;を指定した上で、さらに左右の余白（paddingやmargin）、あるいは枠線（border）を設定しているケースです。

/* 横スクロールが発生してしまう危険なコード例 */
.full-section {
  width: 100vw;
  padding: 20px; /* 内側の余白の分、さらに外側へ押し出される */
  border: 5px solid #333; /* 枠線の分もはみ出る */
}

CSSの標準的な仕様では、width: 100vw;に対してさらにパディングやボーダーの数値が「外側」に足されてしまうため、確実に画面幅をオーバーして横スクロールが発生します。（※box-sizing: border-box;を指定していても、100vwの場合はスクロールバー問題があるため完全には防げません）

横幅いっぱいにしたい場合、まずはwidth: 100%;を検討し、viewport基準が必要な場面だけvwを使うと安全です

.full-section {
  width: 100%;
}

100vhがスマホで崩れる原因

height: 100vh;は、画面の高さ分の要素を作る指定です。ファーストビューや全画面のヒーローでよく使われます。

.hero {
  min-height: 100vh;
}

しかし、スマホではブラウザのアドレスバーや下部バーの表示・非表示によって、見た目の高さが変わることがあります。

スマホではdvhを検討する

最近のブラウザでは、動的なviewport高さに対応しやすいdvhが使えます。

なお、dvh（動的サイズ）のほかにも、アドレスバーが一番大きく表示されている状態を基準にするsvh（Short）や、アドレスバーが格納されて画面が一番広く見える状態を基準にするlvh（Large）という単位もありますが、実務のスマホ崩れ対策としては、状況に応じて自動で伸縮してくれるdvhを使うのが最もおすすめです。

.hero {
  min-height: 100dvh;
}

実務では、対応ブラウザを確認しつつ、次のようにフォールバックを用意することがあります。

.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

スマホで100vhを使うと、アドレスバーの影響で下部が隠れたり、余白が出たりすることがあります。実機確認が重要です。

viewportとメディアクエリの違い

viewport単位とメディアクエリは、どちらもレスポンシブ対応で使いますが、役割が違います。

機能	役割	例
viewport単位	画面幅・高さを基準にサイズを決める	width: 80vw;
メディアクエリ	条件に応じてCSSを切り替える	@media (max-width: 768px)

組み合わせて使う実務例

画面幅に合わせて見出しサイズを変えたい場合、viewport単位と上限値を組み合わせることがあります。

.hero-title {
  font-size: clamp(28px, 6vw, 56px);
}

この指定では、最小28px、最大56pxの範囲で、画面幅に合わせて文字サイズが変わります。

viewport単位は連続的なサイズ調整、メディアクエリはレイアウトの切り替えに向いています。

viewportを使うときの実務チェックリスト

確認項目	見るポイント	対策
meta viewport	HTMLのheadにあるか	width=device-widthを指定する
横スクロール	100vwではみ出ていないか	width: 100%も検討する
スマホ高さ	100vhが崩れていないか	100dvhを検討する
文字サイズ	viewport単位だけで小さくなりすぎないか	clamp()で最小・最大を決める
実機確認	スマホのバー表示で崩れないか	実機または複数幅で確認する

公式ドキュメントも確認する

viewportやviewport単位の仕様を正確に確認したい場合は、公式情報も参考になります。

• MDN Web Docs Viewport concepts
• MDN Web Docs CSS length
• MDN Web Docs Viewport meta tag

まとめ：viewportはレスポンシブの基準になる

この記事では、CSSのviewportについて解説しました。

viewportは、ブラウザでページが表示されている領域です。CSSではvwやvhを使って、画面幅・高さを基準にサイズ指定できます。スマホ対応では、まずHTMLにmeta viewportを入れることが大切です。そのうえで、横幅には%とvw、高さにはvhやdvhを使い分けましょう。

特に100vwによる横スクロール、100vhによるスマホ表示崩れは実務でよくあるトラブルです。レスポンシブ対応では、コードだけでなく実際の表示確認まで行いましょう。