vhやvw単位で大きく変わる！CSSデザインについて解説

vwやvhは、ウェブデザインの際に使用される単位で、幅や高さを表します。

なじみのない方には分かりづらい単位ですが、知っておくことで、便利なシーンも出てくるでしょう。

本記事では、vwとvhについて詳しく解説していきますので、ぜひ参考にしてください。

vw、vhとは

vw(ビューポートの幅)とvh(ビューポートの高さ)は、ウェブデザインにおいて画面サイズに基づく単位です。

これらはビューポート（ブラウザウィンドウの可視領域）の幅や高さのパーセンテージを指し、レスポンシブデザインにおいて重要な役割を果たします。

例えば、width: 50vwはビューポートの幅の50%を意味し、画面サイズが変更されるとそのサイズも動的に変わります。

これにより、さまざまなデバイスや画面サイズに対応した柔軟なレイアウトを実現できます。

vh：ビューポートの高さ

vhは、Viewport Heightの略で、ビューポートの高さに基づいています。

1vhはビューポートの高さの1%に相当します。

例えば、50vhはビューポートの高さの50%を意味するのです。

この単位は、画面の高さに基づいて要素のサイズを動的に調整するのに非常に便利です。

ウェブページの全画面セクションや、高さがビューアの画面サイズに依存するデザインにしばしば使用されます。

vw：ビューポートの幅

vwは、Viewport Widthの略で、ビューポートの幅に基づいた単位です。

1vwはビューポートの幅の1%を表し、50vwはビューポートの幅の50%を意味します。

これは、ウェブページのレイアウトを設計する際に、ビューポートの幅に基づいて要素の幅を調整するのに適しています。

ビューポートを基準にした単位

ビューポートを基準にした単位は、CSSでウェブページのレイアウトを設計する際に使用される相対単位です。

これらの単位は、ウェブページを表示しているビューポート（ブラウザの表示領域）のサイズに基づいています。

ビューポートの単位とパーセント指定の違い

ビューポート単位（vw、vh）とパーセント（%）指定の主な違いは、参照する基準点です。

vwやvhはビューポート（ブラウザの表示領域）のサイズに基づいて計算されるのに対し、パーセント指定は親要素のサイズを基準にします。

例えば、width: 50%は親要素の幅の50%を指し、width: 50vwはビューポートの幅の50%を意味します。

この違いにより、ビューポート単位は画面全体に対する相対的なサイズ指定に適しており、特にフルスクリーンレイアウトやレスポンシブデザインに有効です。

対応ブラウザ

ビューポート単位（vw, vh, vmin, vmax）のブラウザ対応については、主要なブラウザで広範囲にわたるサポートが提供されています。

以下は、いくつかの主要なブラウザとそのバージョンに関する対応状況です。

Chrome	バージョン26以降でサポートされています
Edge	バージョン16以降でサポートされています​
Safari	バージョン6.1以降でサポートされています​
Firefox	バージョン19以降でサポートされています
Opera	バージョン15以降でサポートされています​

モバイルブラウザに関しても、以下のように広範なサポートがあります。

Chrome for Android	サポートされています
Safari on iOS	バージョン8以降でサポートされています
Samsung Interne	サポートされています
Opera Mobile	バージョン73以降でサポートされています
UC Browser for Android	サポートされています
Android Browser	バージョン4.4以降でサポートされています
Firefox for Android	サポートされています

ただし、Opera Miniではこれらの単位はサポートされていません​​。

これらのデータから、現代のウェブ開発においては、ほとんどのユーザーがこれらのビューポート単位をサポートするブラウザを使用していると考えられます。

レスポンシブデザインにおいてこれらの単位を活用することは、広範なブラウザ互換性を保持しつつ、柔軟かつ効果的なレイアウトを実現するための有効な手段です。

vw、vhを使用する際の注意点

vwとvhを使用する際には、いくつかの注意点があります。

具体的には以下のとおりです。

解説していきます。

取得するサイズにはスクロールバーやアドレスバーも含まれる

「取得するサイズにはスクロールバーやアドレスバーも含まれる」という見出しは、CSSのビューポート単位がどのように計算されるかに関する重要な情報を提供します。

しかし、実際にはこの見出しは少し誤解を招く可能性があります。

ビューポート単位（vw、vh、vmin、vmax）は、ブラウザのビューポート、つまり見えているウェブページの領域のサイズに基づいて計算されます。

しかし、これらの単位の計算には通常、スクロールバーやアドレスバーのサイズは含まれません。

つまり、ビューポート単位はブラウザの内部的な表示領域に基づくため、外部要素（スクロールバーやアドレスバーなど）はそのサイズの計算に影響を与えないことが一般的です。

この特性は、特にvh（ビューポート高さ）単位において重要で、画面の実際の表示可能領域（スクロールバーなどを除いた領域）の高さに基づいて要素のサイズを設定する際に考慮する必要があります。

ビューポートの単位の使用例

ビューポート単位（vw、vh）を使用すると、デバイスや画面サイズに関わらず一貫したレイアウトを提供できます。

ここでは、以下の場合について解説していきます。

ぜひ参考にしてください。

フォントのサイズにビューポートの単位を使う

ビューポート単位を使用してフォントサイズを設定するとき、主な目的はウェブページのフォントサイズをビューアのデバイスサイズに基づいて調整することです。

これにより、異なるデバイスや画面サイズでコンテンツが一貫して読みやすくなります。

例えば、vw (Viewport Width) 単位を使用してフォントサイズを設定することで、画面の幅に基づいてフォントサイズが動的に変更されます。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

この例では、h1要素のフォントサイズをビューポート幅の5%、p要素のフォントサイズを2%に設定しています。

これにより、画面サイズが変更されると、テキストのサイズも比例して変わります。

このアプローチは特にレスポンシブウェブデザインにおいて有用で、さまざまなデバイスや画面サイズに対して適切な読みやすさを提供します。

ただし、極端に小さい画面や大きい画面ではフォントサイズが不適切になる可能性があるため、メディアクエリを併用して最小サイズや最大サイズを設定することが推奨されます。

スクリーンいっぱいのコンテンツにビューポートの単位を使う

ビューポート単位を使用して画面全体を覆うコンテンツを作成する場合、vh（ビューポートの高さの単位）とvw（ビューポートの幅の単位）が非常に役立ちます。

これらの単位を使用することで、コンテンツがビューアのブラウザウィンドウに完全にフィットするように調整できます。

これはフルスクリーンのランディングページ、画像ギャラリー、またはビデオプレゼンテーションを作成する際に特に有効です。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

この例では、.fullscreen-content クラスが適用された div 要素がビューポートの幅と高さを完全に埋めるように設定されています。

これにより、コンテンツは常に画面いっぱいに表示されます。

さらに、h1 と p 要素のフォントサイズもビューポートの幅に基づいて調整されています。

これにより、画面サイズに関わらずコンテンツが適切に表示されます。

フッタにビューポートの単位を使う

フッターにビューポート単位を使用すると、さまざまな画面サイズで一貫した表示を実現できます。

たとえば、footer { height: 10vh; }と設定すると、フッターの高さは常にビューポートの高さの10%になります。

これにより、画面サイズが変わってもフッターの高さが適切に調整され、レスポンシブなデザインが容易になります。

ただし、vhを使用する場合は、特にモバイルデバイスでの表示を考慮し、十分な空間が確保されるように注意が必要です。

See the Pen
Untitled by 田村大斗 (@ntxuvnvh-the-lessful)
on CodePen.

このサンプルでは、フッターの高さがビューポートの高さの10%になるように設定しています。

また、フッターのテキストが中央に配置されるように調整し、ページ全体のレイアウトがバランスよくなるようにコンテンツ領域の最小高さを90vhに設定しています。

これにより、フッターが画面の下部に固定され、様々な画面サイズで適切に表示されるようになります。

ビューポートの単位で現在の計算値要素をチェック

開発者はビューポート単位を使って現在の計算値要素をチェックすることができます。

これは、特にデバッグやレスポンシブデザインの微調整に役立ちます。

開発者ツールを使用して特定の要素の現在のサイズをvwやvhで表示し、どのように画面サイズの変更に応じて要素がスケールされるかを確認できます。

これにより、異なるデバイスやビューポートサイズでのレイアウトの振る舞いを正確に理解し、より効率的なレスポンシブデザインを行うことが可能になります。

アスペクト比の要素

ビューポート単位は、アスペクト比を保持するための要素にも有用です。

例えば、ビデオや画像コンテナにvwとvhを使用することで、異なる画面サイズでの表示においてもアスペクト比を維持することができます。

これは、メディアコンテンツが切り取られたり歪んだりするのを防ぐために重要です。

object-fitプロパティと組み合わせることで、コンテンツのスケーリングや配置をさらに精密にコントロールすることが可能になります。

これらの見出しに基づいた内容は、vwとvhの使い方の基本的な理解を提供し、ウェブデザイナーや開発者がこれらの単位を効果的に活用するためのガイドラインを示しています。

ビューポートの単位を使う時に便利なツール

ウェブ開発において、ビューポート単位（vw、vh）を扱う際に便利なツールがいくつか存在します。

例えば、ビューポートサイズのリアルタイムプレビューを提供するブラウザ拡張機能や、さまざまなデバイスサイズでのレイアウトテストを支援するレスポンシブデザインテスティングツールなどです。

これらのツールを利用することで、デザインのレスポンシブ性を素早く確認し、異なるビューポートサイズでの表示に関する問題を効率的に特定し解決することができます。

また、CSSの単位変換を行うオンラインツールもあり、これを使ってpxからvwやvhへの変換を簡単に行うことができます。

まとめ

vw（ビューポートの幅）とvh（ビューポートの高さ）は、レスポンシブウェブデザインにおける重要なツールです。

これらの単位を使用することで、異なるデバイスや画面サイズに対応する柔軟なレイアウトを作成することが可能になります。

ビューポート単位は、特に全画面コンテンツの表示、フォントサイズの動的調整、アスペクト比の維持など、多くの用途で有効です。

ただし、ブラウザ間の挙動の違いや、スクロールバーやアドレスバーを含むビューポートサイズの計算には注意が必要です。

これらの単位を適切に利用することで、より使いやすく、美しいウェブサイトを設計できます。

これらの説明は、vwとvhを使ったウェブデザインの基本をカバーしており、開発者やデザイナーがこれらの単位をより効果的に使用するための洞察を提供します。