CSSのvwとvhの単位で画面サイズに合わせる！レスポンシブな配置の技

ビューポート（表示領域）の幅や高さに比例して要素を揃える技術は、モバイルファーストなデザインでますます重要になっています。CSSのvwとvhという単位を理解して上手に使えば、デバイスの画面サイズに応じてレイアウトや文字、画像が自然に拡大・縮小し、ユーザー体験が格段に向上します。ここではvwとvhが何か、どう使うか、注意点から最新の動向まで丁寧に解説します。

CSS vw vh 単位 画面サイズって何？基礎から理解する

まずはCSS vwとvhの単位がどういうものか正確に理解することが出発点です。これらは画面サイズ、つまりビューポートに対する割合でサイズを指定できる相対単位です。vwは表示領域の幅の1％、vhは高さの1％を表します。それゆえ、画面サイズが変わると要素のサイズも自動で変化します。
またvminとvmaxという補助的な単位もあり、幅と高さのうち小さい方または大きい方を基準にすることで、縦長・横長どちらの画面にも柔軟に対応できます。
このような単位を使うことで、画面の向きやウィンドウサイズに応じてレイアウトが崩れないレスポンシブなデザインが可能です。

vwとvhとは？ビューポートに基づいた割合指定

vw（Viewport Width）はビューポートの幅の1％であり、100vwは画面幅いっぱいを意味します。たとえば画面幅が1000pxなら、1vwは10pxになります。
vh（Viewport Height）はビューポートの高さの1％を表し、画面の高さいっぱいを表すのが100vhです。画面の高さが800pxなら1vhは8pxとなります。これらは画面サイズが変わるたびに自動で計算が変わるため、ウィンドウのリサイズや縦横の切り替えに強い指定方法です。

vminとvmaxとの違いと使いどころ

vminはビューポートの幅と高さのうち、小さい方の1％を基準とします。画面が縦長なら幅、横長なら高さが基準になることが多くなります。
vmaxはその逆で、大きい方を基準に1％を取る単位です。これにより、横幅を優先したいデザインや、縦方向に重視したいデザインなど、画面比率に応じて柔軟にレイアウトを調整できます。

％、pxなどとの違い：絶対単位との比較

pxは絶対的なサイズ指定であり、画面サイズに左右されません。％は親要素に対する割合であり、親のサイズが変わると一緒に変化します。
それに対してvw/vhはビューポート自体に対する割合であり、親要素に依存しないため、全体レイアウトを画面全体に対して整える場合に非常に便利です。その反面、要素が予期せずはみ出すことがあるため注意が必要です。

画面サイズに応じてvw・vhを活用する実践テクニック

ここからは実際にレスポンシブなデザインを作る際に使える実践的なテクニックを紹介します。vwとvhを使って、画面サイズに応じたレイアウトやタイポグラフィー、背景などを柔軟に制御する方法について詳しく掘り下げていきます。

フルスクリーンセクションを作る

Heroセクションなどで画面全体を使いたい場合、幅に100vw、高さに100vhを使うのが基本です。
ただし、幅を100vwに設定するとスクロールバーの影響で横スクロールが発生することがあるため、幅は100％にして高さに100vhを使うという組み合わせが一般的です。こうすることで見た目が崩れにくくなります。

タイポグラフィーのレスポンシブ化

見出しや本文のフォントサイズをvwやvhで指定すると、画面幅や高さに応じて文字サイズが動的に変化します。
たとえば5vwなら画面幅の5％の大きさ、3vhなら画面の高さの3％となります。これによりデスクトップとモバイルで文字サイズがバランスよく調整され、読みやすさを損なわないレイアウトを実現できます。

背景画像やマージン・パディングの調整

背景画像をビューポートいっぱいに表示したり、マージン・パディングをvw/vhで設定すると、余白感や余裕感を画面サイズに合わせて変化させることができます。
例えば左右の余白を5vwずつ取ると、画面が広いほど余白が広くなり狭いほど絞られるため、コンテンツが画面内で心地よく配置されます。

CSS vw vh 単位 画面サイズで起きやすい注意点と回避策

便利な一方で、vwとvhを使う際には画面サイズの変化やブラウザのUIの影響など、思わぬ落とし穴があります。ここではよく起こる問題とその回避策を最新の仕様やブラウザ挙動を交えて解説します。

モバイルでアドレスバーの表示・非表示によるvh値の変化

スマホブラウザではアドレスバーやツールバーがスクロールに応じて出たり隠れたりすることがあります。従来のvh指定では表示中／非表示中の高さを変化させるため、要素が隠れたりレイアウトが上にずれるなどの現象が発生します。
最新ではdvhやsvh、lvhといった動的・小さい・大きいビューポートに基づく単位が追加されていて、それらを使えばアドレスバーに遮られない見え方を保つことができます。

スクロールバーの幅とvwの問題

デスクトップでvwを使うと、スクロールバーの幅を含んだり含まなかったりする仕様の違いで実際の表示がずれることがあります。100vwで設定すると横スクロールが出るケースもあります。
この場合は幅に100％を使ったり、overflowを制御することで問題を回避できます。

互換性の問題と古いブラウザ対応

主要ブラウザはvw/vh/vmin/vmaxについてほぼ完全に対応していますが、IE旧バージョンや古いモバイルブラウザではvmaxが動かなかったり、vhの計算でcalcを含むと仕様どおりにならないことがあります。
デザインが広く表示される可能性がある環境では、フォールバックとして%やpxを併用するか、モダンなCSS機能を使う前提で設計することが重要です。

CSS vw vh 単位 画面サイズを活かす最新仕様とブラウザサポート状況

単位の仕様は徐々に進化しており、最新のブラウザでは新しいビューポート関連単位が使えるようになっています。ここでは最新仕様とブラウザの対応状況、そしてどのような場面で新仕様を使うべきかを解説します。

svh、lvh、dvhとは何か

svhはビューポートの「small viewport height」の略で、アドレスバーなどが表示されたときに見えている部分全体の高さを基準にします。
lvhは「large viewport height」でアドレスバーが非表示の時の大きな高さを基準にし、dvhは動的に現在見えているビューポート高さを追従します。これらを使えば、アドレスバーが浮いたり沈んだりする動きにも柔軟に対応できます。

ブラウザのサポート状況と互換性チェック

ほとんどのモダンブラウザでvw/vh/vmin/vmaxは問題なく使えます。svh/lvh/dvhについても主要なブラウザでサポートが進んでおり、最新のスマホOS／ブラウザでは正常に表示されることが多いです。
とはいえ古いOSやブラウザ、あるいは組み込み環境では新しい単位が未対応であるケースがあるため、実際に対象ユーザーでの確認が欠かせません。

パフォーマンスやアクセシビリティの観点からの注意

viewport単位を多用しすぎると、リサイズやスクロールで再計算が頻繁に起こるためパフォーマンスに影響が出ることがあります。特にモバイル端末でレンダリングコストが高くなる場合があります。
また文字サイズが小さくなりすぎると読みづらくなるため、最小フォントサイズをremやemで制限したり、メディアクエリで制御したりすることがアクセシビリティの確保につながります。

CSS vw vh 単位 画面サイズ活用の実例コード集

具体的なコード例を見せることで、どのように組み込むかイメージがつきやすくなります。ここでは典型的なHeroセクション、タイポグラフィー、レイアウトのパターン別にコード例を示します。

Heroセクションでの全画面表示

以下は画面いっぱいに広がるHeroセクションの例です。幅には100％、高さには100dvhを使ってアドレスバーやUI要素の影響を抑えています。

レスポンシブな見出しと本文テキスト

見出しや本文の文字サイズを画面幅に応じて変化させる例です。

このようにすると、大きなスクリーンでは見出しが目立ち、小さな画面では読みやすさを確保できます。

グリッドレイアウトでの余白調整とカードサイズ

一覧表示などカードを複数並べるレイアウトでは、余白やアイテムの幅・高さをvw/vhで柔軟に指定するとバランスが保てます。

画面幅が狭くなるとカードが折り返し、余白も調整されるためきれいに表示されます。

CSS vw vh 単位 画面サイズに基づく設計戦略とベストプラクティス

ヴィューポート単位をただ使うだけでなく、設計全体の戦略として取り入れると効果が倍になります。ここでは設計手順、メディアクエリとの併用、テスト・メンテナンスの方法などについて解説します。

モバイルファースト設計との統合

レスポンシブデザインを始めるならまずモバイルを想定したレイアウト設計から始めるのが基本です。小さな画面に見合ったデザインでvw/vhを適用し、そこから画面が広くなるにしたがって余白やフォントサイズ、要素の配置を調整していきます。
モバイルでの見え方を意識することで余計な崩れを防ぎ、大画面でのバランスもとれたデザインが可能になります。

メディアクエリとの併用で微調整する方法

vw/vhだけで完全に対応するのは難しいケースもあります。特に画面サイズ・比率の極端な変化がある端末では、メディアクエリで特定の範囲における別スタイルを定義することが有効です。
例として768px以下ではvwで文字サイズを指定、それ以上ではremまたは固定px併用というスタイルが考えられます。

ユーザーテストとビューポート変化への検証

設計時には複数のデバイスやエミュレータで動作確認を行うことが欠かせません。ブラウザのUI表示状態、縦横の切り替え、ソフトウェアキーボード表示時などのビューポート変化がどのように要素に影響するかをテストしてください。
またパフォーマンス計測を含め、レスポンシブかつ滑らかな表示を保てているかを確認することが大切です。

まとめ

CSSのvwとvhの単位は、表示領域に基づいて要素のサイズや配置が自動で変化する柔軟な方法です。vminやvmax、そして新たに加わったsvh、lvh、dvhなどの応用単位を活用すれば、アドレスバーなどのUI変化にも対応可能になります。
ただしvw/vhを使う際にはスクロールバーやモバイルUI、互換性の違いなど注意点がいくつかあります。メディアクエリやフォールバックを組み込む設計戦略と、実際のデバイスでのテストが不可欠です。
適切に使えば、画面サイズに合わせたレスポンシブな配置が可能となり、ユーザー体験が大きく向上します。