vw・vh・vmin・vmaxの違いとは？CSSのビューポート単位をコード例付きで分かりやすく解説

CSSでレスポンシブデザインを実装するとき、px、%、rem、em だけではなく、vw、vh、vmin、vmax というビューポート単位を使う場面があります。これらの単位は、ブラウザの表示領域を基準にサイズを決めるため、画面幅や画面高さに応じて自然に変化するデザインを作りやすいという特徴があります。特に、ファーストビューの大きな見出し、画面いっぱいのセクション、背景装飾、正方形のビジュアル、レスポンシブな余白設計などでは、ビューポート単位を理解しているかどうかで実装の安定性が大きく変わります。

一方で、vw、vh、vmin、vmax は名前が似ているため、何となく使ってしまうと表示崩れの原因になります。vw は画面幅、vh は画面高さ、vmin は画面の短い方、vmax は画面の長い方を基準にします。この基準の違いを理解せずに文字サイズや余白、背景装飾に使うと、スマートフォンでは小さすぎる、パソコンでは大きすぎる、100vhで下部のボタンが隠れる、100vwで横スクロールが出るといった問題が起こりやすくなります。本記事では、それぞれの違いと使いどころを、実務で使えるコード例とあわせて詳しく解説します。

1. ビューポート単位の基本

まずは、vw、vh、vmin、vmax を理解する前提として、ビューポート単位そのものの考え方を整理します。これらはすべて「ブラウザの表示領域」を基準にするCSS単位ですが、参照する方向や基準が異なります。通常の px や % とは考え方が違うため、最初に基本を押さえておくと、後の使い分けが分かりやすくなります。

1.1 ビューポートとは何か

ビューポートとは、ユーザーがブラウザ上でWebページを見ている表示領域のことです。スマートフォンであれば画面内の表示領域、パソコンであればブラウザウィンドウの表示領域がビューポートになります。CSSのビューポート単位は、この表示領域を基準にしてサイズを計算するため、ユーザーの端末やブラウザサイズによって値が動的に変化します。たとえば、画面幅が広いパソコンでは vw の値が大きくなり、縦に長いスマートフォンでは vh の値が大きくなります。

この仕組みは、レスポンシブデザインと非常に相性が良いです。なぜなら、固定サイズではなく画面サイズに合わせて自然にサイズを変えられるからです。ただし、ビューポート単位は画面そのものを基準にするため、親要素のサイズには影響されません。親要素の幅に合わせたい場合は %、画面全体の幅や高さに合わせたい場合は vw や vh、というように目的を分けて考える必要があります。

.viewport-box {
  width: 50vw;
  height: 50vh;
  background: #eef5ff;
}

1.2 ビューポート単位と%の違い

% は親要素を基準にしてサイズが決まる単位です。たとえば、親要素の幅が800pxで子要素に width: 50%; を指定すると、子要素の幅は400pxになります。一方、vw は親要素ではなくビューポート幅を基準にします。画面幅が1200pxであれば、親要素が800pxでも 50vw は600pxになります。この違いを理解していないと、親要素の中に収めたいはずの要素が画面基準で広がってしまい、はみ出しや横スクロールの原因になります。

実務では、通常のカード、本文、フォーム、ボタンなどは親要素に合わせて伸縮させることが多いため、% や max-width の方が扱いやすい場合が多いです。一方で、中央寄せの本文エリアの中から背景だけを画面幅いっぱいに広げたい場合や、親要素の制約を超えてフルブリード表現を作りたい場合には vw が便利です。つまり、% は「親の中での割合」、vw は「画面全体に対する割合」と覚えると判断しやすくなります。

.parent {
  width: 800px;
}

.percent-child {
  width: 50%;
}

.viewport-child {
  width: 50vw;
}

1.3 pxやremとの違い

px は固定的なサイズ指定に向いています。画面幅が変わっても基本的に同じ大きさを維持するため、細かい線、アイコンの最小サイズ、UIの安定した部品などに使いやすい単位です。rem はルート要素の文字サイズを基準にするため、文字サイズや余白の一貫性を保ちやすく、アクセシビリティやデザインシステムとの相性も良いです。一方で、vw や vh は画面サイズに連動して変化するため、固定的な安定感よりも、画面に合わせた動的な変化を作るための単位と考えると分かりやすくなります。

ただし、ビューポート単位だけに頼ると、極端な画面サイズで問題が起こりやすくなります。たとえば、見出しに font-size: 6vw; を指定すると、スマートフォンでは小さすぎ、大型ディスプレイでは大きすぎる可能性があります。そのため、実務では clamp() を使って、最小値、可変値、最大値をセットで指定することが多くなります。これにより、画面幅に応じて自然に変化しながら、読みやすい範囲を保てます。

.heading {
  font-size: clamp(32px, 5vw, 72px);
  line-height: 1.15;
}

1.4 ビューポート単位を使う目的

ビューポート単位を使う目的は、画面サイズに応じて自然に変化する表現を作ることです。たとえば、ファーストビューを画面の高さに合わせたいとき、見出しを画面幅に合わせて大きくしたいとき、円形のビジュアルを画面内に収めたいとき、背景のぼかし装飾を画面全体に大きく広げたいときなどに役立ちます。固定値だけでは画面ごとの差が大きくなり、細かいメディアクエリが増えてしまう場面でも、ビューポート単位を使うことでシンプルに書ける場合があります。

しかし、ビューポート単位は万能ではありません。本文の文字サイズ、フォーム入力欄、ナビゲーション、ボタンなど、操作性や可読性が重要なUIでは、画面サイズに合わせて無制限に変化させるより、一定の範囲内に収めることが重要です。そのため、ビューポート単位は「変化させたい要素」に使い、「安定させたい要素」には rem、px、%、max-width、clamp() を組み合わせるのが実務的です。

.hero {
  min-height: 100vh;
}

.hero-title {
  font-size: clamp(36px, 7vw, 88px);
}

.hero-decoration {
  width: 80vmax;
  height: 80vmax;
}

2. vwとは何か

vw はビューポート幅を基準にする単位です。画面の横幅に応じてサイズを変えたいときに使いやすく、見出し、左右余白、フルワイド背景、横方向のビジュアル表現などでよく使われます。ここでは、vw の基本的な意味、使いやすい場面、注意点を詳しく見ていきます。

2.1 vwは画面幅の1%を表す

vw は viewport width の略で、1vw はビューポート幅の1%を意味します。たとえば、画面幅が1000pxの場合、1vw は10pxになります。画面幅が390pxのスマートフォンであれば、1vw は3.9pxです。つまり、vw を使うと画面幅が広くなるほどサイズが大きくなり、画面幅が狭くなるほどサイズが小さくなります。この性質を利用すると、画面幅に応じて自然に変化する見出しや余白を作れます。

ただし、vw はあくまで画面幅に比例して変化するため、使う場所を間違えると極端なサイズになりやすいです。たとえば、本文に font-size: 2vw; を指定すると、スマートフォンではかなり小さく、大型モニターでは大きくなりすぎることがあります。そのため、vw は単独で使うよりも、clamp() と組み合わせて範囲を制御する方が実務では安全です。

.title {
  font-size: 6vw;
}

.title-safe {
  font-size: clamp(32px, 6vw, 72px);
}

2.2 vwは見出しサイズに向いている

vw は、メインビジュアルやランディングページの大きな見出しに向いています。画面幅が広くなるほど文字を大きくできるため、パソコンでは迫力のある見出しを表示し、スマートフォンでは画面に収まるように自然に小さくできます。特に、ブランドコピー、キャンペーン見出し、トップページのファーストビューなど、画面幅に応じて印象を変えたい部分では有効です。

ただし、見出しに vw をそのまま指定すると、表示環境によって読みやすさが不安定になります。小さいスマートフォンでは文字が小さすぎ、大きなディスプレイでは1行が巨大になりすぎる可能性があります。そのため、font-size: clamp(32px, 6vw, 80px); のように、最小値と最大値を設定しておくと、レスポンシブな変化と可読性を両立できます。

.hero-title {
  font-size: clamp(32px, 6vw, 80px);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

2.3 vwは左右余白にも使える

vw は左右の余白設計にも使えます。スマートフォンでは余白を小さめにし、パソコンでは余白を広めにすることで、画面サイズに応じた自然なレイアウトを作れます。たとえば、セクションの左右余白に padding-inline: 5vw; を指定すると、画面幅の5%が余白になります。これにより、小さな画面ではコンテンツを広く使い、大きな画面では余白をしっかり確保できます。

ただし、大型ディスプレイでは 5vw が大きくなりすぎる場合があります。画面幅が1920pxの場合、5vw は96pxになります。デザインによっては問題ありませんが、余白が広がりすぎて間延びすることもあります。そのため、実務では padding-inline: clamp(16px, 5vw, 80px); のように、最小余白と最大余白を決めると安定します。

.section {
  padding-inline: clamp(16px, 5vw, 80px);
  padding-block: clamp(48px, 8vw, 120px);
}

2.4 100vwの使い方に注意する

100vw はビューポート幅の100%を意味します。つまり、画面幅いっぱいに要素を広げる指定です。フルワイドの背景や、親要素の最大幅を超えて画面いっぱいに広がるセクションを作りたい場合には便利です。しかし、通常のレイアウトで width: 100vw; を多用すると、横スクロールの原因になることがあります。ブラウザによってはスクロールバーの幅も含めて計算されるため、画面幅を少し超えてしまう場合があるからです。

通常の要素を親要素いっぱいに広げたいだけなら、width: 100%; を使う方が安全です。100vw は「親要素の幅ではなく、画面全体の幅を使いたい」という明確な理由がある場合に限定して使うとよいです。特に、中央寄せの本文エリアから背景だけを画面いっぱいに広げるような表現では、100vw と margin-left: calc(50% - 50vw); を組み合わせる方法が使われます。

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 80px 24px;
  background: #f5f7fb;
}

3. vhとは何か

vh はビューポート高さを基準にする単位です。ファーストビューやフルスクリーン風のレイアウト、画面中央配置、モーダル、スプラッシュ画面など、高さを画面に合わせたい場面でよく使われます。ただし、スマートフォンではブラウザUIの影響を受けやすいため、使い方には注意が必要です。

3.1 vhは画面高さの1%を表す

vh は viewport height の略で、1vh はビューポート高さの1%を意味します。画面高さが800pxであれば 1vh は8px、100vh は800pxになります。この単位を使うと、画面の高さに合わせてセクションを作れるため、ファーストビューを画面いっぱいに見せたい場合に便利です。たとえば、トップページの最初のセクションに min-height: 100vh; を指定すると、少なくとも画面の高さ分の領域を確保できます。

vh は、縦方向の印象をコントロールしたいときに役立ちます。特に、画面の中央にキャッチコピーとボタンを置くようなLPでは、min-height: 100vh; と display: grid; place-items: center; を組み合わせることで、シンプルに中央配置を作れます。ただし、コンテンツ量が増える可能性がある場合は、height ではなく min-height を使う方が安全です。

.first-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

3.2 vhはファーストビューに使いやすい

ファーストビューでは、ユーザーがページを開いた瞬間に見える領域を印象的に設計する必要があります。vh を使えば、セクションの高さを画面に合わせられるため、画像、見出し、CTAボタンをバランスよく配置しやすくなります。特に、キャンペーンサイト、採用サイト、サービス紹介ページなどでは、最初の画面でメッセージを強く伝えるために vh がよく使われます。

ただし、height: 100vh; と固定してしまうと、見出しや説明文が長くなったときに中身がはみ出す場合があります。日本語から英語、英語から日本語のように翻訳で文字量が変わるサイトや、CMSで担当者が文章を更新するサイトでは、この問題が起こりやすくなります。そのため、実務では min-height: 100vh; を基本にし、上下に十分な padding を持たせると崩れにくくなります。

.hero {
  min-height: 100vh;
  padding: clamp(48px, 8vw, 120px) 24px;
  display: flex;
  align-items: center;
}

3.3 スマートフォンの100vh問題

スマートフォンでは、ブラウザのアドレスバーや下部ナビゲーションが表示されたり隠れたりします。そのため、100vh が実際に見えている領域と一致しない場合があります。たとえば、height: 100vh; を指定したセクションの下部にCTAボタンを配置すると、ブラウザUIに隠れて押しにくくなることがあります。これは、モバイル向けのレスポンシブ実装でよく起こる問題です。

この問題を軽減するために、最近では dvh、svh、lvh という新しいビューポート単位も使われます。特に dvh は dynamic viewport height の略で、ブラウザUIの表示状態に応じた動的な高さを扱いやすくなります。実務では、古い環境へのフォールバックとして 100vh を先に書き、その後に 100dvh を書くと、対応環境では dvh が適用されます。

.mobile-hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

3.4 vhはモーダルや中央配置にも使える

vh はページ全体のファーストビューだけでなく、モーダルやログイン画面のような中央配置にも使えます。たとえば、ログインフォームを画面中央に置きたい場合、親要素に min-height: 100vh; を指定して、FlexboxやGridで中央寄せにすると、シンプルで分かりやすい実装になります。画面高さに合わせて余白が調整されるため、固定の上余白を使うよりも自然です。

ただし、モーダルやフォームでは、入力欄が増えたりエラーメッセージが表示されたりすると高さが変わります。height: 100vh; で固定すると、内容が多い場合にスクロールしづらくなることがあります。そのため、min-height、max-height、overflow-y: auto; を組み合わせて、画面内に収まりつつ、必要な場合はスクロールできるようにしておくと安全です。

.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}

4. vminとは何か

vmin は、ビューポートの幅と高さのうち、短い方を基準にする単位です。画面内に収めたい正方形、円形、ロゴ、中央ビジュアル、ゲームUI、装飾パーツなどに向いています。vw や vh よりも、画面の向きに左右されにくいサイズ指定ができる点が特徴です。

4.1 vminは短い方の1%を表す

vmin は、画面幅と画面高さを比較し、短い方を基準にします。たとえば、画面幅が1200px、画面高さが800pxの場合、短い方は800pxなので 1vmin は8pxになります。スマートフォンで画面幅が390px、画面高さが800pxの場合は、短い方が390pxなので 1vmin は3.9pxになります。このように、常に短辺を基準にするため、要素が画面からはみ出しにくいという特徴があります。

この性質は、正方形や円形の要素を作るときに非常に便利です。たとえば、width: 50vmin; height: 50vmin; と指定すると、画面の短い方の50%を基準にした正方形ができます。画面が横長でも縦長でも、短い方に合わせてサイズが決まるため、画面内に収まりやすくなります。

.square-visual {
  width: 50vmin;
  height: 50vmin;
  background: #ddeeff;
}

4.2 vminは円形デザインに向いている

円形の装飾やプロフィール画像、ロゴマーク、中央のビジュアル要素には vmin が向いています。vw を使うと横長画面で大きくなりすぎることがあり、vh を使うと縦方向の高さに影響されすぎることがあります。一方で vmin は短辺を基準にするため、画面内に収めることを優先した安定したサイズ指定ができます。

たとえば、ファーストビューの中央に大きな円形グラフィックを置く場合、width: 60vmin; height: 60vmin; とすれば、縦長のスマートフォンでも横長のパソコンでも、比較的バランスよく表示できます。さらに clamp() を組み合わせることで、小さすぎる・大きすぎる問題を防げます。

.circle-visual {
  width: clamp(180px, 60vmin, 620px);
  height: clamp(180px, 60vmin, 620px);
  border-radius: 50%;
  background: radial-gradient(circle, #9fdcff, #1e5799);
}

4.3 vminは画面回転に強い

スマートフォンやタブレットでは、ユーザーが画面を縦向きから横向きに変えることがあります。vw だけを使っていると、横向きになった瞬間に幅が大きくなり、要素が縦方向にはみ出す場合があります。vmin は常に短い方を基準にするため、画面の向きが変わっても要素が極端に大きくなりにくいです。このため、画面内に必ず収めたい要素では vmin が有効です。

たとえば、ゲームのスタート画面、アプリのスプラッシュ画面、中央に配置するロゴ、正方形のアートワークなどでは、画面回転によって見た目が大きく崩れると印象が悪くなります。vmin を使えば、画面の短辺に合わせてサイズが調整されるため、縦向きでも横向きでも比較的安定した表示を作れます。

.center-logo {
  width: clamp(96px, 24vmin, 220px);
  height: clamp(96px, 24vmin, 220px);
  object-fit: contain;
}

4.4 vminを通常の本文幅に使うと不自然になることがある

vmin は短辺を基準にするため、通常の本文エリアやカード一覧の横幅に使うと不自然になることがあります。たとえば、パソコンの横長画面でブラウザの高さが低い場合、短辺は高さになります。その結果、本文幅が画面幅ではなく画面高さに引っ張られ、横に広い画面なのに本文が狭く見えることがあります。これは、文章を読むためのレイアウトとしては不自然です。

本文エリアでは、vmin よりも max-width や min() を使って、読みやすい最大幅を設定する方が自然です。たとえば、width: min(100% - 32px, 760px); とすると、スマートフォンでは左右余白を確保しながら画面幅に収まり、パソコンでは読みやすい最大幅に制限できます。vmin は本文ではなく、形を保ちたいビジュアル要素に使うと理解すると失敗しにくくなります。

.article-bad {
  width: 80vmin;
}

.article-good {
  width: min(100% - 32px, 760px);
  margin-inline: auto;
}

5. vmaxとは何か

vmax は、ビューポートの幅と高さのうち、長い方を基準にする単位です。大きな背景装飾、ぼかし、グラデーション、巨大な円形オブジェクトなど、画面全体を覆うような表現に向いています。一方で、本文やボタンなどの実用的なUIに使うと大きくなりすぎる可能性があるため、使いどころを限定することが重要です。

5.1 vmaxは長い方の1%を表す

vmax は、画面幅と画面高さを比較し、長い方を基準にします。たとえば、画面幅が1200px、画面高さが800pxの場合、長い方は1200pxなので 1vmax は12pxになります。スマートフォンで画面幅が390px、画面高さが800pxの場合は、長い方が800pxなので 1vmax は8pxになります。つまり、vmax は画面の大きい辺に合わせてサイズが決まるため、要素が大きくなりやすい単位です。

この性質は、大きな背景表現を作るときに役立ちます。たとえば、画面外にはみ出す巨大な円や、背景全体に広がるぼかし装飾を作る場合、vmax を使うと縦長画面でも横長画面でも十分な大きさを確保できます。逆に、通常のテキストやボタンに使うと、画面によっては想定以上に大きくなり、UIとして扱いにくくなります。

.big-shape {
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
}

5.2 vmaxは背景装飾に向いている

vmax は、画面全体に広がるような背景装飾に向いています。長辺を基準にするため、横長のパソコン画面でも、縦長のスマートフォン画面でも、大きな装飾を維持しやすくなります。背景のぼかし円、グラデーション、光のようなエフェクト、画面外から伸びる装飾図形などは、多少はみ出しても問題ないため、vmax と相性が良いです。

たとえば、ヒーローセクションの右上に巨大なぼかし円を置く場合、width: 90vmax; height: 90vmax; と指定すれば、画面サイズに関係なく大きな装飾を保てます。さらに position: absolute;、filter: blur()、opacity を組み合わせることで、コンテンツの背後に自然な背景表現を作れます。ただし、装飾が文字の可読性を下げないように透明度や位置を調整することが重要です。

.hero::before {
  content: "";
  position: absolute;
  width: 90vmax;
  height: 90vmax;
  border-radius: 50%;
  background: rgba(120, 180, 255, 0.25);
  filter: blur(80px);
  top: -40vmax;
  right: -40vmax;
}

5.3 vmaxをUIに使うと大きくなりすぎる

vmax は長い方の辺を基準にするため、ボタン、フォーム、ナビゲーション、本文などに使うと、画面サイズによっては大きくなりすぎることがあります。たとえば、ボタンの余白に padding: 2vmax 4vmax; を指定すると、パソコンでは余白がかなり大きくなり、スマートフォン横向きでも不自然なサイズになる可能性があります。UIは見た目だけでなく操作性が重要なので、過度に大きく変化する単位は慎重に使う必要があります。

実務では、UI要素には rem、px、clamp()、vw を控えめに組み合わせる方が安定します。特にボタンやナビゲーションは、押しやすさと見た目のバランスを保つ必要があるため、最小値と最大値を決めることが重要です。vmax は背景や装飾に限定し、ユーザーが直接操作する要素には使いすぎない方が安全です。

.button-bad {
  padding: 2vmax 4vmax;
}

.button-good {
  padding: clamp(12px, 1.2vw, 18px) clamp(20px, 2vw, 32px);
}

5.4 vmaxは画面外に広がる表現に使いやすい

vmax の強みは、画面外に広がる大きな表現を作りやすいことです。背景装飾やビジュアル演出では、要素が完全に画面内に収まる必要はありません。むしろ、画面外から大きな円やグラデーションが入り込むことで、奥行きや雰囲気を作れることがあります。このような表現では、短辺基準の vmin よりも、長辺基準の vmax の方が迫力を出しやすくなります。

ただし、vmax を使った装飾は、レイアウト全体に影響しないようにする必要があります。装飾要素に position: absolute; を使い、親要素に overflow: hidden; を指定しておくと、不要なスクロールを防ぎやすくなります。また、装飾はクリックやタップを邪魔しないように pointer-events: none; を指定すると安全です。

.section {
  position: relative;
  overflow: hidden;
}

.section::after {
  content: "";
  position: absolute;
  width: 110vmax;
  height: 110vmax;
  border-radius: 50%;
  right: -55vmax;
  bottom: -55vmax;
  background: radial-gradient(circle, rgba(255, 180, 120, 0.3), transparent 60%);
  pointer-events: none;
}

6. vw・vh・vmin・vmaxの違い

ここまで各単位を個別に見てきましたが、実際の実装では「この場面ではどれを選ぶべきか」で迷うことが多いです。ここでは、vw、vh、vmin、vmax の違いを、基準と用途の両面から整理します。

6.1 vwは横方向、vhは縦方向に連動する

vw と vh の違いは、基準にする方向です。vw は画面幅に連動し、vh は画面高さに連動します。たとえば、見出しサイズや左右余白のように横幅に合わせて変化させたいものには vw が向いています。一方で、ファーストビューの高さや中央配置のように、縦方向の画面サイズを使いたいものには vh が向いています。この違いを理解すると、使いどころを判断しやすくなります。

たとえば、ヒーローセクションでは、セクション全体の高さには min-height: 100vh; を使い、見出しサイズには font-size: clamp(36px, 7vw, 88px); を使うように、役割ごとに単位を分けると自然です。高さは画面の縦方向、文字サイズは画面の横幅に合わせることで、スマートフォンでもパソコンでもバランスを取りやすくなります。

.hero {
  min-height: 100vh;
}

.hero-title {
  font-size: clamp(36px, 7vw, 88px);
}

6.2 vminは短辺、vmaxは長辺に連動する

vmin と vmax の違いは、画面の短い方を基準にするか、長い方を基準にするかです。vmin は短辺を基準にするため、要素を画面内に収めたいときに向いています。正方形、円形、ロゴ、中央ビジュアルなど、縦横どちらかにはみ出してほしくない要素で使いやすいです。反対に、vmax は長辺を基準にするため、大きく広がる背景装飾や画面外にはみ出すビジュアル表現に向いています。

この2つは、似ているようで目的が大きく違います。vmin は「安全に収める」ための単位、vmax は「大きく広げる」ための単位と考えると分かりやすくなります。実務では、アイコンや円形ビジュアルに vmin、背景の巨大なぼかしやグラデーションに vmax を使うと、単位の特徴を活かしやすくなります。

.safe-circle {
  width: 40vmin;
  height: 40vmin;
  border-radius: 50%;
}

.large-bg {
  width: 90vmax;
  height: 90vmax;
  border-radius: 50%;
}

6.3 文字サイズにはclamp()と組み合わせる

vw、vmin、vmax は文字サイズにも使えますが、単独で指定すると極端な画面サイズで読みづらくなることがあります。特に vw は見出しに使いやすい一方で、本文にそのまま使うと小さすぎる・大きすぎる問題が出やすいです。そのため、文字サイズにビューポート単位を使う場合は、clamp() を組み合わせるのが基本です。

clamp() は、最小値、推奨値、最大値を指定できるCSS関数です。たとえば、clamp(28px, 5vw, 64px) と書けば、画面幅に応じて 5vw で変化しつつ、28pxより小さくならず、64pxより大きくなりません。これにより、レスポンシブな変化と可読性を両立できます。

.page-title {
  font-size: clamp(28px, 5vw, 64px);
  line-height: 1.2;
}

.body-text {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.8;
}

6.4 単位は目的から選ぶ

ビューポート単位を選ぶときは、単位名から考えるのではなく、要素の目的から考えることが重要です。横幅に合わせたいなら vw、高さに合わせたいなら vh、画面内に収めたいなら vmin、大きく覆いたいなら vmax という判断が基本になります。目的が明確であれば、どの単位を使うべきか迷いにくくなります。

たとえば、ファーストビューを作る場合でも、すべてを vw や vh で書く必要はありません。セクションの高さは 100dvh、見出しは clamp() と vw、中央アイコンは vmin、背景装飾は vmax のように、要素ごとに役割を分けることで、柔軟で保守しやすいCSSになります。

.hero {
  min-height: 100dvh;
}

.hero-title {
  font-size: clamp(36px, 7vw, 88px);
}

.hero-icon {
  width: 18vmin;
  height: 18vmin;
}

.hero-bg {
  width: 85vmax;
  height: 85vmax;
}

7. 実務で使いやすい組み合わせ

ビューポート単位は、単独で使うよりも、clamp()、min()、max()、%、rem、CSS Grid、Flexboxと組み合わせることで使いやすくなります。ここでは、実務で安定しやすい代表的な組み合わせを紹介します。

7.1 vwとclamp()で見出しを作る

大きな見出しには、vw と clamp() の組み合わせが非常に便利です。vw によって画面幅に応じた自然な変化を作り、clamp() によって最小値と最大値を制御できます。これにより、スマートフォンでは読みやすいサイズを確保し、パソコンでは十分に大きく印象的な見出しを作れます。

たとえば、トップページのメインコピーでは、画面幅に応じて見出しを大きくしたい一方で、スマートフォンで小さくなりすぎたり、大型ディスプレイで巨大になりすぎたりするのは避けたいです。このような場合に font-size: clamp(32px, 6vw, 72px); と書くと、レスポンシブな変化とデザインの安定性を両立できます。

.main-copy {
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

7.2 vhとdvhでファーストビューを安定させる

ファーストビューには vh がよく使われますが、スマートフォンでは 100vh の挙動に注意が必要です。ブラウザのアドレスバーや下部UIによって、実際の表示領域と 100vh がずれることがあるためです。これを改善するために、100vh と 100dvh を併用する方法が使われます。先に 100vh を書き、次に 100dvh を書くことで、対応ブラウザでは dvh が適用され、非対応環境では vh が残ります。

この組み合わせは、ファーストビュー、ログイン画面、LPのメインセクションなどで特に有効です。高さを画面に合わせながら、スマートフォンでもボタンや重要なテキストが隠れにくくなります。さらに padding を組み合わせることで、コンテンツが画面端に張り付かず、余裕のあるレイアウトを作れます。

.hero-section {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 80px);
}

7.3 vminとclamp()で正方形要素を調整する

正方形や円形の要素には vmin が向いていますが、画面サイズによっては小さすぎたり大きすぎたりする場合があります。そのため、clamp() と組み合わせることで、より安定したサイズ指定ができます。たとえば、アイコンやロゴに width: clamp(64px, 12vmin, 120px); を指定すると、小さい画面でも64px以上、大きい画面でも120px以下に収まります。

この方法は、プロフィール画像、特徴アイコン、サービスカード内の装飾、アプリのスプラッシュロゴなどに使いやすいです。短辺を基準にした自然な変化を作りながら、最小値と最大値で視認性を守れるため、デザインの安定感が高まります。特に複数端末で見た目を揃えたい場合に有効です。

.feature-icon {
  width: clamp(64px, 12vmin, 120px);
  height: clamp(64px, 12vmin, 120px);
  border-radius: 24px;
  display: grid;
  place-items: center;
}

7.4 vmaxで背景装飾を作る

背景装飾には vmax が便利です。画面の長辺を基準にするため、縦長画面でも横長画面でも大きな装飾を維持しやすく、画面外まで広がるような表現を作れます。たとえば、大きなぼかし円、グラデーションの光、斜めに広がる背景図形などでは、vmax を使うことで、画面サイズに左右されにくい迫力のあるビジュアルを作れます。

ただし、背景装飾はコンテンツを邪魔しないように設計する必要があります。親要素に position: relative; overflow: hidden; を指定し、装飾要素には position: absolute; pointer-events: none; を設定すると、レイアウトへの影響やクリック操作への干渉を防げます。vmax は強い表現ができる単位なので、使う場所を背景や装飾に限定すると扱いやすくなります。

.bg-orb {
  position: absolute;
  width: 90vmax;
  height: 90vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
}

8. よくある失敗と注意点

ビューポート単位は便利ですが、使い方を間違えるとレスポンシブ対応の崩れにつながります。特に、文字サイズ、100vh、100vw、vmaxのUI利用はトラブルが起きやすいポイントです。ここでは、実務でよくある失敗と改善方法を整理します。

8.1 vwだけで本文サイズを決めてしまう

本文に vw だけを使うと、画面幅によって文字サイズが大きく変わりすぎます。スマートフォンでは文字が小さすぎて読みにくくなり、大型ディスプレイでは本文が大きくなりすぎて読みづらくなる場合があります。本文は長時間読む要素なので、見出しのように大きく変化させるより、一定の読みやすさを保つことが重要です。

本文サイズは rem を基本にし、必要に応じて clamp() を使うと安定します。たとえば、font-size: clamp(16px, 1.2vw, 18px); とすれば、画面幅に応じて少しだけ変化しながら、16pxより小さくならず、18pxより大きくなりません。見出しには大きめの変化、本文には控えめな変化という使い分けが実務では重要です。

.body-text-bad {
  font-size: 2vw;
}

.body-text-good {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.8;
}

8.2 height: 100vhでコンテンツが隠れる

height: 100vh; を使うと、要素の高さが画面高さに固定されます。そのため、コンテンツが多い場合に中身がはみ出したり、下部のボタンが見切れたりすることがあります。特にスマートフォンでは、ブラウザUIの影響で実際の表示領域が変わるため、100vh が意図通りに見えないことがあります。これはファーストビューやログイン画面でよく起こる問題です。

改善するには、height ではなく min-height を使い、必要に応じて 100dvh を併用します。min-height であれば、最低限の高さを画面分確保しながら、コンテンツが増えた場合には自然に伸びます。さらに上下に padding を入れることで、コンテンツが画面端に詰まりすぎることも防げます。

.hero-bad {
  height: 100vh;
}

.hero-good {
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: 48px;
}

8.3 width: 100vwで横スクロールが出る

width: 100vw; は画面幅いっぱいの指定ですが、スクロールバーの幅まで含んで計算される場合があります。その結果、要素が画面より少しだけ広くなり、横スクロールが発生することがあります。見た目ではほとんど分からなくても、スマートフォンで横に少し動いてしまうページは、この 100vw が原因になっていることがよくあります。

通常のセクションやコンテンツを親要素いっぱいに広げたいだけなら、width: 100%; を使う方が安全です。100vw は、親要素を超えて画面幅いっぱいに背景を広げたい場合など、明確な目的がある場合だけ使うべきです。横スクロールが発生したときは、まず width: 100vw; を指定している要素がないか確認すると原因を見つけやすくなります。

.section-bad {
  width: 100vw;
}

.section-good {
  width: 100%;
}

8.4 vmaxをUI要素に使いすぎる

vmax は画面の長辺を基準にするため、大きく変化しやすい単位です。背景装飾には便利ですが、ボタン、ナビゲーション、フォーム、本文などのUI要素に多用すると、画面によってサイズが不自然になります。特にパソコンの横長画面やスマートフォンの縦長画面では、想定より大きくなりすぎることがあります。

UI要素には、ユーザーが読みやすく、押しやすく、迷わず操作できる安定したサイズが必要です。そのため、vmax を使うよりも、rem、px、clamp()、控えめな vw を組み合わせる方が安全です。vmax は、あくまで背景や装飾用の単位として使うと、レスポンシブデザインの中で扱いやすくなります。

.nav-bad {
  gap: 3vmax;
}

.nav-good {
  gap: clamp(16px, 2vw, 32px);
}

9. 実装例で理解する

ここでは、vw、vh、vmin、vmax を実際のUIにどう組み込むかを見ていきます。単位ごとに役割を分けることで、画面サイズに応じて自然に変化しながら、保守しやすいCSSになります。

9.1 ヒーローセクションの例

ヒーローセクションでは、高さ、見出し、余白、背景装飾をそれぞれ別の基準で設計すると自然です。セクションの高さには 100dvh、見出しには clamp() と vw、余白には clamp()、背景装飾には vmax を使うことで、スマートフォンでもパソコンでもバランスの良いファーストビューを作れます。すべてを同じ単位で指定するのではなく、要素の役割に合わせて単位を選ぶことが重要です。

このような設計にすると、スマートフォンではコンテンツが画面内に収まりやすく、パソコンでは大きく印象的な見た目になります。また、背景装飾は vmax で大きく広げつつ、文字サイズは clamp() で制御するため、ビジュアルの迫力と可読性を両立できます。LPやサービスサイトのトップページで使いやすい実装パターンです。

<section class="hero">
  <div class="hero__content">
    <p class="hero__label">CSS Viewport Units</p>
    <h1 class="hero__title">vw・vh・vmin・vmaxを理解する</h1>
  </div>
</section>

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 80px);
}

.hero::before {
  content: "";
  position: absolute;
  width: 85vmax;
  height: 85vmax;
  border-radius: 50%;
  background: rgba(80, 140, 255, 0.18);
  filter: blur(80px);
  top: -40vmax;
  right: -35vmax;
}

.hero__title {
  position: relative;
  font-size: clamp(36px, 7vw, 88px);
  line-height: 1.1;
}

9.2 カードUIの例

カードUIでは、カード全体の横幅を vw で固定するより、CSS Gridや親要素の幅に任せる方が安定します。一方で、カード内のアイコン、余白、見出しサイズには、clamp()、vw、vmin を組み合わせると自然なレスポンシブ対応ができます。特に、アイコンのように正方形を保ちたい要素には vmin が向いています。

カードは複数並ぶことが多いため、ひとつひとつのサイズをビューポート基準で強く指定しすぎると、レイアウト全体が崩れやすくなります。グリッドで列数を管理し、カード内部の余白やアイコンサイズだけを可変にすることで、保守しやすく、画面幅に合わせた自然なカードUIを作れます。

<div class="card">
  <div class="card__icon">CSS</div>
  <h2 class="card__title">Viewport Units</h2>
  <p class="card__text">画面サイズに応じて自然に変化するUIを作れます。</p>
</div>

.card {
  padding: clamp(20px, 4vw, 40px);
  border-radius: 24px;
  background: #ffffff;
}

.card__icon {
  width: clamp(56px, 12vmin, 96px);
  height: clamp(56px, 12vmin, 96px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef5ff;
}

.card__title {
  font-size: clamp(22px, 3vw, 36px);
}

9.3 CTAセクションの例

CTAセクションでは、ユーザーに行動してもらうために、見出しの読みやすさ、ボタンの押しやすさ、余白のバランスが重要です。画面幅が狭いスマートフォンでは、余白を取りすぎるとスクロール量が増え、画面幅が広いパソコンでは、余白が少なすぎると窮屈に見えます。そのため、clamp() と vw を組み合わせて、余白と文字サイズを自然に変化させると効果的です。

CTAボタンは、画面サイズに合わせて余白を少し変化させつつ、押しやすいサイズを保つ必要があります。padding に clamp() を使えば、スマートフォンでも小さくなりすぎず、パソコンでも大きくなりすぎないボタンを作れます。CTAは成果に直結する要素なので、ビジュアルの迫力だけでなく、操作性も重視して設計することが大切です。

<section class="cta">
  <h2 class="cta__title">レスポンシブ設計を見直しましょう</h2>
  <a class="cta__button" href="#">無料で相談する</a>
</section>

.cta {
  padding-block: clamp(56px, 10vw, 120px);
  padding-inline: clamp(20px, 5vw, 80px);
  text-align: center;
}

.cta__title {
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.25;
}

.cta__button {
  display: inline-flex;
  margin-top: 32px;
  padding: clamp(14px, 1.5vw, 20px) clamp(24px, 4vw, 48px);
  border-radius: 999px;
}

9.4 背景装飾の例

背景装飾では、vmax を使うと画面サイズに関係なく大きな図形を維持しやすくなります。たとえば、画面外にはみ出す巨大な円、ぼかし、グラデーションなどは、画面の長辺を基準にした方が迫力を保ちやすいです。vmax は通常のUIには強すぎる場合がありますが、背景として使うとデザインに奥行きを出せます。

ただし、背景装飾がコンテンツの読みやすさを邪魔しないようにする必要があります。親要素に overflow: hidden; を設定し、装飾要素には pointer-events: none; を指定すると、不要なスクロールやクリック干渉を防げます。また、透明度やぼかしを調整し、文字とのコントラストが下がりすぎないように注意します。

.page-bg {
  position: relative;
  overflow: hidden;
}

.page-bg::after {
  content: "";
  position: absolute;
  width: 100vmax;
  height: 100vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 120, 0.3), transparent 60%);
  right: -50vmax;
  bottom: -50vmax;
  pointer-events: none;
}

10. 実務での判断基準

最後に、実務で vw、vh、vmin、vmax を選ぶときの判断基準を整理します。単位の意味を覚えるだけではなく、要素の目的、読みやすさ、操作性、保守性まで含めて選ぶことが大切です。

10.1 横幅に連動させたいならvw

画面幅に合わせてサイズを変えたい場合は vw が向いています。大きな見出し、左右余白、横方向に広がるビジュアル、フルワイド表現などでは、vw を使うことで画面幅に応じた自然な変化を作れます。ただし、vw は画面幅に比例して大きくなり続けるため、文字サイズや余白に使う場合は clamp() で最小値と最大値を決めるのが安全です。

特に、見出しに vw を使う場合は、スマートフォンで読めるサイズを下限にし、パソコンで大きくなりすぎないサイズを上限にする必要があります。単に font-size: 6vw; とするより、font-size: clamp(30px, 5vw, 72px); のように書く方が、実務では安定します。

.responsive-heading {
  font-size: clamp(30px, 5vw, 72px);
}

10.2 高さに連動させたいならvh

画面高さに合わせたい場合は vh が向いています。ファーストビュー、ログイン画面、モーダル、中央配置のセクションなどでは、vh を使うことで画面の高さを活かしたレイアウトを作れます。ただし、スマートフォンでは 100vh が実際の表示領域とずれることがあるため、100dvh の併用を検討するとよいです。

また、コンテンツ量が増える可能性がある場合は、height ではなく min-height を使うことが重要です。height: 100vh; では中身がはみ出す可能性がありますが、min-height: 100vh; なら最低限の高さを確保しながら、必要に応じて自然に伸びます。これは、運用後に文章が増えるサイトでも安全な書き方です。

.fullscreen-area {
  min-height: 100vh;
  min-height: 100dvh;
}

10.3 画面内に収めたいならvmin

正方形や円形、中央ビジュアル、ロゴ、アイコンなど、画面内に収めたい要素には vmin が向いています。短辺を基準にするため、縦長でも横長でも大きくなりすぎにくく、画面回転にも比較的強いです。特に、形を保ちたい要素や、はみ出してほしくないビジュアル要素で使いやすい単位です。

ただし、vmin は通常の本文幅やカード一覧の幅には向かない場合があります。短辺が画面高さになると、横に広い画面でも要素が小さくなることがあるからです。vmin は「画面に収めたい形のある要素」に使い、文章や通常のレイアウトには max-width や % を使うと自然です。

.safe-visual {
  width: clamp(120px, 45vmin, 480px);
  height: clamp(120px, 45vmin, 480px);
}

10.4 大きく覆いたいならvmax

画面全体を大きく覆いたい背景装飾や、画面外まで広がるグラデーションには vmax が向いています。長辺を基準にするため、縦長画面でも横長画面でも大きな表現を維持できます。背景のぼかし円、巨大な装飾、視覚的な奥行きを出すグラフィックなどに使うと効果的です。

一方で、vmax は大きくなりやすいため、本文、ボタン、フォーム、ナビゲーションなどの実用UIにはあまり向いていません。UIはユーザーが直接読む・押す・入力する要素なので、安定したサイズが必要です。vmax は背景や装飾専用として使うと、レスポンシブデザインの中でも扱いやすくなります。

.cover-decoration {
  width: 120vmax;
  height: 120vmax;
  border-radius: 50%;
}

おわりに

vw、vh、vmin、vmax は、すべてビューポートを基準にしたCSS単位ですが、それぞれ参照する基準が異なります。vw は画面幅、vh は画面高さ、vmin は画面の短い方、vmax は画面の長い方を基準にします。この違いを理解すると、レスポンシブデザインでどの単位を選ぶべきか判断しやすくなります。単位の名前だけで覚えるのではなく、「横幅に連動させたいのか」「高さを使いたいのか」「画面内に収めたいのか」「画面全体を覆いたいのか」という目的から選ぶことが重要です。

実務では、vw は見出しや横方向の余白、vh はファーストビューや中央配置、vmin は正方形や円形の要素、vmax は大きな背景装飾に向いています。ただし、ビューポート単位は画面サイズに応じて大きく変化するため、単独で使いすぎると表示崩れの原因になります。特に文字サイズ、余白、ボタン、フォームなどのUI要素では、clamp() を使って最小値と最大値を設定し、読みやすさと操作性を守ることが大切です。

ビューポート単位を正しく使えるようになると、細かいメディアクエリを増やしすぎずに、画面サイズに応じて自然に変化するWebデザインを作りやすくなります。px、rem、%、vw、vh、vmin、vmax を目的ごとに使い分けることで、見た目の美しさだけでなく、保守性、可読性、操作性にも優れたレスポンシブデザインを実現できます。