【CSS】vh・svh・dvh の違いって何?スマホの挙動に合わせた使い分け!

こんにちは!今日は CSS の vhsvhdvh の違いについて、サクッと解説していきます!

特にスマホのブラウザって、スクロールするとアドレスバーが消えたり出たりするから、それに合わせて画面の高さが変わっちゃうんですよね。このせいで vh を使うとレイアウトがズレることがあるんです…。

そこで登場するのが svhdvh!それぞれの特徴を見てみましょう。


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)

👉 今の画面の高さに合わせてリアルタイムで変わる!
dvhvh の進化版みたいなもので、スクロールして アドレスバーが出たり消えたりしても自動で調整 してくれます!

cssCopyEdit.dynamic-full-screen {
  height: 100dvh;
}

これなら、スクロール時に高さが勝手に変わってズレることがなくなるので、スマホでも快適なレイアウトが作れます✨。


結局どれを使えばいいの?

単位特徴使いどころ
vh画面の高さを基準にするけど、スクロール時に変わるPC向け or 高さが変わってもOKな時
svh最小の高さを基準にするスマホでレイアウト崩れを防ぎたい時
dvh動的に高さを調整してくれるスクロールで高さが変わるレイアウトを作りたい時

スマホ対応を考えるなら svhdvh を活用するのがベスト!
特に、スマホのフルスクリーン表示を意識するなら dvh がオススメ!

CSS の新しい単位をうまく使って、スマホでも快適なデザインを作りましょう! 🚀

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です