• Home
  • Web制作
  • 【CSS入門】vh・vwを使いこなす！画面サイズ対応の最強ユニットを徹底解説

【CSS入門】vh・vwを使いこなす！画面サイズ対応の最強ユニットを徹底解説

schedule
Tags: CSS

はじめに： なぜvhとvwが重要なのか？

Webサイトを閲覧するデバイスは、パソコンだけではありません。スマートフォン、タブレットなど、様々な画面サイズのデバイスが登場しています。そのため、あらゆるデバイスで快適に閲覧できるWebサイト作りが、これまで以上に重要となっています。

そこで活躍するのが、CSSの 「vh」 と 「vw」 というユニットです。vhはビューポートの高さを、vwはビューポートの幅を基準とした単位で、これらを使うことで、画面サイズに合わせた柔軟なデザインが可能になります。

この記事では、vhとvwの基本から応用、注意点まで徹底解説いたします。これらのユニットをマスターして、ユーザーフレンドリーなWebサイト制作に役立ててください。

vh・vwって何？ 具体的な使い方を解説！

vhとvwは、それぞれ ビューポート（Viewport） の 高さ（Height） と 幅（Width） を表す単位です。ビューポートとは、ブラウザ上で実際にWebサイトが表示されている領域のことです。

  • vh: ビューポートの高さを100等分した値
  • vw: ビューポートの幅を100等分した値

例えば、「height: 50vh」と指定すると、要素の高さがビューポートの高さ50%になります。「width: 80vw」と指定すると、要素の幅がビューポートの幅の80%になります。

vh・vwを使うメリット

従来のピクセル（px）指定と比べて、vhとvwには下記のようなメリットがあります。

  • メリット1： 画面サイズに柔軟に対応できる vhとvwは、ビューポートのサイズを基準とするため、画面サイズが変わっても要素のサイズ比率を維持できます。そのため、様々なデバイスでアクセスしても、レイアウトが崩れる心配がありません。

  • メリット2： コードがシンプルになる pxで指定する場合、画面サイズごとに異なる値を設定する必要がありました。しかし、vhとvwを使うことで、画面サイズに関係なく、簡潔なコードでデザインを指定できます。

vh・vwを使った活用事例

vhとvwは、以下のような場面で特に役立ちます。

  1. 背景画像を画面いっぱいに表示 background-size: cover;と組み合わせて、ビューポート全体を覆う背景画像を設定できます。

    body {
  background-image: url("sample.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh; 
}

  2. 画面いっぱいの高さを持つ要素 ヒーローエリアや、画面全体を使ったモーダルウィンドウなどを実装する際に便利です。

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

  3. 画面幅に応じた文字サイズ調整 大きい画面では大きく、小さい画面では小さく、といったように、画面幅に応じて文字サイズを調整できます。

    h1 {
  font-size: 4vw; 
}

vh・vwを使う上での注意点

便利なvhとvwですが、使用時には以下の点に注意が必要です。

  • 注意点1： スクロールバーの表示領域に注意 vhは、スクロールバーが表示される領域も含めた高さを基準とするため、要素の高さが想定よりも短くなる場合があります。

  • 注意点2： 横スクロールが発生する可能性 vwを要素の幅に設定する場合、画面幅よりも要素の合計幅が大きくなってしまい、横スクロールが発生する可能性があります。要素の幅や余白を調整し、横スクロールが発生しないように注意が必要です。

まとめ： vh・vwで快適なWeb体験を提供しよう！

vhとvwは、画面サイズに柔軟に対応できる、現代のWebサイト制作に欠かせないユニットです。これらの特徴を理解し、適切に活用することで、ユーザーにとってより快適なWeb体験を提供できるでしょう。ぜひ、今回の内容を踏まえて、実際にWebサイト制作にvhとvwを取り入れてみてください。

関連記事