ビューポート単位：vw、vh、dvh

ビューポート単位は、ブラウザーのビューポート（ブラウザーウィンドウの表示領域）のサイズを基準とする単位です。利用可能な画面領域に合わせて拡大・縮小するレイアウトやタイポグラフィを実現できます。

1vw = ビューポート幅の1%です。100vwを指定するとビューポート幅全体を埋めます。パーセント指定に伴う問題を避けて、幅いっぱいの要素を作る場合に便利です。

1vh = ビューポート高さの1%です。100vhを指定するとビューポートの高さ全体を埋めます。全画面のヒーローセクションやモーダルでよく使われます。

モバイルブラウザーでは、スクロール中にブラウザーUI（アドレスバー）が表示・非表示になるため、ビューポートの高さが変化します。100vhがブラウザーのUI領域を含めるかどうかが一貫しない場合があり、コンテンツの一部が隠れる原因になります。

dvh（dynamic viewport height）は、ブラウザーUIの調整後に実際に表示されている高さを反映するよう動的に更新されます。これにより、モバイルにおける100vhの問題を解決できます。

CSSには、svh（small viewport height — 常にブラウザーUIを除外）とlvh（large viewport height — UIが非表示の場合の高さ）も用意されています。これらを使うと、モバイルでのビューポートの動作を細かく制御できます。

font-sizeにvwを使うと、画面に合わせて拡大・縮小する文字を作成できます。

100vwにはデスクトップのスクロールバーの幅も含まれます。これを不用意に使うと、横方向にはみ出す原因になります。ブロック要素ではwidth: 100%を優先し、特定の用途に限ってvwを使用してください。

1vmin = ビューポートの小さいほうの寸法（幅または高さ）の1%です。1vmax = 大きいほうの寸法の1%です。向きの変化に応じて適応する正方形のコンテナに便利です。

高さのバリエーションと同様に、CSSには幅に対応するsvw、lvw、dvwがあります。動的なバリエーション（dvw、dvh）はモバイルで特に便利です。

ビューポート単位でよく使われるパターン：

• min-height: 100dvh — モバイルでも安全な全画面セクション
• height: 100svh — 固定UIパネル
• font-size: clamp(1rem, 2.5vw, 2rem) — 流動的な見出し
• width: min(800px, 90vw) — 安全な幅のコンテナ

全画面のモバイルセクションでは、なぜvhよりdvhが推奨されるのでしょうか。

vwとvhは、それぞれビューポートの幅と高さの1%です。モバイルではブラウザーUIの影響により、vhは信頼できません。動的でモバイルの表示領域に正確な全画面レイアウトにはdvhを使用します。vminとvmaxは、ビューポートの小さいほうまたは大きいほうの寸法に応じて変化します。