100vhとは？Webデザインで必須の画面高さ指定テクニック

Webデザインにおいて「100vh」という表記を目にしたことはありませんか？このCSSの単位は、モダンなWeb制作で画面の高さを制御する際に重要な役割を果たします。本記事では、初心者でも理解できるように100vhの基本概念から実践的な使い方まで詳しく解説します。

1. vh単位の基本概念

vh（Viewport Height）は画面の表示領域（ビューポート）の高さを基準にする相対単位です。1vh=ビューポート高の1%を意味し、100vhを指定するとデバイスの画面全体の高さに要素がフィットします。

.full-screen {
  height: 100vh;
}

2. 100vhの主な使用例

• ヘッダー領域の高さ固定
• フルスクリーン画像表示
• スクロール連動アニメーション
• モーダルウィンドウの中央配置

3. レスポンシブデザインでのメリット

デバイスごとの画面高さに対応可能なため、スマートフォン・タブレット・PC全てで統一した表示を実現できます。メディアクエリとの組み合わせで、より柔軟なレイアウト制御が可能です。

4. 注意すべき挙動と対策

モバイルブラウザではアドレスバーの表示/非表示によって100vhの計算値が変動する問題があります。対策として以下の方法が有効です：

/* CSSカスタムプロパティを活用 */
:root {
  --vh: 1vh;
}

.element {
  height: calc(var(--vh, 1vh) * 100);
}

5. ベストプラクティス

• スクロールが必要なコンテンツではmin-heightを使用
• モバイル対応時はJavaScriptで動的調整
• flexbox/gridとの組み合わせで柔軟な配置
• ブラウザ互換性の確認（IE11は部分対応）

100vhを適切に使用することで、視覚的にインパクトのあるデザインやユーザビリティの向上が可能になります。ただし、実際のプロジェクトではデバイスごとの挙動を必ず確認し、必要に応じて代替策を実装することが重要です。