こんにちは!今日は 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 の新しい単位をうまく使って、スマホでも快適なデザインを作りましょう! 🚀