目次
- はじめに：100vhを使ったらスマホでレイアウトが崩れた
- そもそも100vhとは何か
- なぜ100vhはスマホで問題になるのか
- スマホ特有の挙動
- よくある100vh問題の具体例
- 応急処置①：min-height を使う
- ポイント
- 応急処置②：100vhを少し小さくする
- 根本解決①：dvh・svh・lvhを使う
- dvh（dynamic viewport height）
- svh（small viewport height）
- lvh（large viewport height）
- どの単位を使うべきか
- フォールバック対応（古いブラウザ）
- JavaScriptで対応する方法（最終手段）
- 100vhを使わない方がよいケース
- スマホ対応で意識すべき基本ルール
- 初心者向けおすすめ設定
- まとめ：100vh問題は「スマホ特有の仕様」
はじめに：100vhを使ったらスマホでレイアウトが崩れた
CSSで画面いっぱいの高さを指定したいとき、
多くの人が次のように書きます。
.section {
height: 100vh;
}PCでは問題ないのに、
- スマホで高さが大きすぎる
- 下に余白ができる
- 画面からはみ出してスクロールできてしまう
といった現象が起きることがあります。
これがいわゆる 「CSSの100vh問題」 です。
この記事では、
100vhがスマホで崩れる理由と正しい対処法を
初心者向けにわかりやすく解説します。
そもそも100vhとは何か
vh は viewport height の略で、
- 1vh = 画面の高さの1%
を意味します。
height: 100vh;は
「画面の高さいっぱいにする」
という意図で使われます。
なぜ100vhはスマホで問題になるのか
原因は
スマホブラウザの表示仕様 にあります。
スマホ特有の挙動
- アドレスバーが表示・非表示で高さが変わる
- 100vhは「最大時の画面高さ」で計算される
- 実際に見えている領域と一致しない
その結果、
- 要素が画面より大きくなる
- 不要な縦スクロールが発生する
という問題が起こります。
よくある100vh問題の具体例
.hero {
height: 100vh;
}この指定は、
- PC：問題なし
- スマホ：高さが余る・はみ出す
という状態になりやすいです。
特に
ファーストビューやヒーローエリアで
問題が目立ちます。
応急処置①：min-height を使う
まず試したい簡単な対策です。
.hero {
min-height: 100vh;
}ポイント
- コンテンツ量に応じて高さが伸びる
- はみ出しにくくなる
ただし、
完全な解決ではありません。
応急処置②：100vhを少し小さくする
.hero {
height: 90vh;
}この方法で
問題が目立たなくなることもありますが、
場当たり的な対処です。
根本解決①：dvh・svh・lvhを使う
現在のCSSでは、
スマホ対応のために新しい単位が用意されています。
dvh（dynamic viewport height）
.hero {
height: 100dvh;
}- 表示中の画面高さに追従
- アドレスバーの変化を考慮
- 現在もっともおすすめ
svh（small viewport height）
height: 100svh;- アドレスバー表示時の最小高さ
lvh（large viewport height）
height: 100lvh;- アドレスバー非表示時の最大高さ
どの単位を使うべきか
初心者の方は、
次だけ覚えておけば大丈夫です。
height: 100dvh;これが
100vh問題の最も安全な解決策です。
フォールバック対応（古いブラウザ）
すべての環境で安全に使う場合は、
次のように書きます。
.hero {
height: 100vh;
height: 100dvh;
}対応しているブラウザでは
後ろの指定が優先されます。
JavaScriptで対応する方法（最終手段）
どうしてもCSSだけで対応できない場合は、
JavaScriptを使う方法もあります。
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);.hero {
height: calc(var(--vh) * 100);
}ただし現在は
dvhが使えるため、
JS対応は基本不要です。
100vhを使わない方がよいケース
次の場合は、
100vh自体を避ける方が安全です。
- コンテンツ量が可変
- テキストが多い
- スマホでの可読性を優先したい
この場合は、
padding + min-heightの組み合わせがおすすめです。
スマホ対応で意識すべき基本ルール
100vh問題を避けるための考え方です。
- heightよりmin-heightを検討する
- 100vhをそのまま使わない
- 可能なら100dvhを使う
初心者向けおすすめ設定
迷ったら、
次の指定を使ってください。
.hero {
min-height: 100dvh;
}多くのスマホ環境で
安定します。
まとめ：100vh問題は「スマホ特有の仕様」
CSSの100vh問題は、
- スマホのアドレスバー仕様が原因
- PCでは気づきにくい
- 正しい単位を使えば解決できる
という特徴があります。
これからは、
- 100vh → 100dvh
- height → min-height
という意識を持つだけで、
スマホ表示のトラブルは大きく減ります。
初心者の方は、
100vhはそのまま使うと危険
という点だけでも覚えておきましょう。