こんにちは！今日は CSS の vh・svh・dvh の違いについて、サクッと解説していきます！
特にスマホのブラウザって、スクロールするとアドレスバーが消えたり出たりするから、それに合わせて画面の高さが変わっちゃうんですよね。このせいで vh を使うとレイアウトがズレることがあるんです…。
そこで登場するのが svh や dvh！それぞれの特徴を見てみましょう。
vh（Viewport Height）
👉 画面の高さ = 100vh
一見これでOKっぽいけど、スマホでは スクロールすると高さが変わる ことがある…。
よくある問題
例えば、以下のように 100vh で高さを指定した要素があったとします。
cssCopyEdit.full-screen {
height: 100vh;
background: lightblue;
}
スマホで表示すると、スクロールした時にアドレスバーが消えて高さが伸びる ことがあり、レイアウトが崩れることも💦。
svh（Small Viewport Height）
👉 アドレスバーが見えてるときの最小の高さを基準にするvh だと高さが変わっちゃう問題を解決するために、svh が使えます。
cssCopyEdit.safe-full-screen {
height: 100svh;
}
これを使うと、アドレスバーが出てる時の高さを基準にしてくれる ので、画面サイズが変わらないのがポイント！
dvh（Dynamic Viewport Height）
👉 今の画面の高さに合わせてリアルタイムで変わる！dvh は vh の進化版みたいなもので、スクロールして アドレスバーが出たり消えたりしても自動で調整 してくれます！
cssCopyEdit.dynamic-full-screen {
height: 100dvh;
}
これなら、スクロール時に高さが勝手に変わってズレることがなくなるので、スマホでも快適なレイアウトが作れます✨。
結局どれを使えばいいの？
| 単位 | 特徴 | 使いどころ |
|---|---|---|
vh | 画面の高さを基準にするけど、スクロール時に変わる | PC向け or 高さが変わってもOKな時 |
svh | 最小の高さを基準にする | スマホでレイアウト崩れを防ぎたい時 |
dvh | 動的に高さを調整してくれる | スクロールで高さが変わるレイアウトを作りたい時 |
スマホ対応を考えるなら svh や dvh を活用するのがベスト！
特に、スマホのフルスクリーン表示を意識するなら dvh がオススメ！
CSS の新しい単位をうまく使って、スマホでも快適なデザインを作りましょう！ 🚀