css vhの使い方とスマホでの100vh問題を解決する完全ガイド

折原 慧ウェブデザインデイ 編集ライター

Webサイトのファーストビューを画面いっぱいに広げたいとき、多くの方が使うのが「vh」という単位です。ところが、パソコンでは完璧に見えていたレイアウトが、スマートフォンで見ると余白が出たり、コンテンツが切れてしまったりする経験はありませんか。

個人的にも、初めてheight: 100vhを使ったヒーローセクションを作ったとき、iPhoneで確認すると下部が微妙に見切れてしまい、原因がわからず苦労しました。

この記事では、vhの基本的な仕組みから、スマホで起きる厄介な問題、そして最新の解決策までを、実際の現場で使える形で整理してお伝えします。

vhとは画面の高さを基準にする単位のこと

vhは「viewport height（ビューポートの高さ）」の略です。

ビューポートとは、ブラウザでページが実際に表示されている領域のことを指します。この表示領域の高さを基準にして大きさを決めるのが、vhという相対単位です。

ルールはとてもシンプルです。1vhは、ビューポートの高さの1%に相当します。つまり、画面の高さが1000pxなら、1vhは10pxということになります。

この計算でいくと、100vhは画面の高さの100%、つまり画面全体の高さそのものになります。

もう少し具体的な例で見てみましょう。ブラウザの表示領域が800pxの高さだったとします。ここでheight: 50vhを指定した要素は、800pxの50%である400pxの高さになります。しかも、ウィンドウのサイズを変えると、その割合を保ったまま自動的に高さも変わっていきます。

vhの仲間たちと単位ごとの違い

vhは、画面の大きさを基準にする「ビューポート単位」というグループの一員です。同じ仲間には次のような単位があります。

vwは画面の幅を基準にする

vwは「viewport width」の略で、画面の幅を基準にします。1vwは画面幅の1%です。vhが高さ、vwが幅という関係で覚えておくとわかりやすいでしょう。

この2つを組み合わせてheight: 100vh; width: 100vw;と書けば、画面全体を覆う要素を作れます。

vminとvmaxは幅と高さの小さい方大きい方

vminは画面の幅と高さのうち小さい方を、vmaxは大きい方を基準にします。デバイスを縦横どちらに回転させても崩れにくいデザインを作るときに役立ちます。

vhと%とpxの決定的な違い

ここが混乱しやすいポイントです。

%は「親要素」を基準にしますが、vhは常に「画面全体」を基準にします。たとえば%で高さを指定した場合、親要素の大きさが変われば子要素も影響を受けます。一方でvhは、親が何であろうと画面の高さだけを見ます。

pxは絶対的な単位です。1pxは常に1pxで、画面サイズが変わっても自動では伸縮しません。動的に画面に合わせたいならvh、固定したいならpx、という使い分けが基本になります。

実際の使い方とよくあるパターン

vhがもっともよく使われるのは、画面いっぱいのセクションを作るときです。

全画面のヒーローセクション

ランディングページのファーストビューなどで定番のコードがこちらです。

.hero-section {
  height: 100vh;
}

これだけで、そのセクションがブラウザの高さいっぱいに広がります。ファーストビュー デザインを考える上で、画面を占有する演出は強い印象を残せます。

画面の半分だけ使う部分セクション

50vhなら画面の半分、30vhなら3割というように、数値を変えるだけで自由に高さを調整できます。上下で領域を分けるスプリットスクリーンのようなレイアウトとも相性が良いです。

レスポンシブ対応が自動で効く

vhは画面の高さを基準にするため、ウィンドウのサイズ変更やデバイスの回転に合わせて要素が自動的に調整されます。この特性が、レスポンシブデザインでvhが重宝される理由です。

スマホで100vhがおかしくなる本当の理由

ここからが、多くの方がつまずくポイントです。

パソコンでは完璧なのに、スマホでは100vhのセクションがはみ出したり、逆に余白が出たりします。これは決してあなたのコードのミスではありません。

原因は、スマホのアドレスバーやツールバーがスクロールによって出たり消えたりすることにあります。

従来のvhは、長い間「初期状態のビューポートの高さ」を基準にしてきました。つまり、アドレスバーが表示されている状態の高さを100vhと計算するのです。ところがユーザーがスクロールしてアドレスバーが消えると、実際に見える領域は広がります。この差が、レイアウトのズレとして現れるわけです。

dvh svh lvhという新しい解決策

このモバイル問題を解決するために、新しい3つのビューポート単位が登場しました。それがdvh、svh、lvhです。

dvhは今見えている高さに常に合わせる

dvhは「dynamic viewport height（動的ビューポート高さ）」の略です。100dvhは、その瞬間に実際に見えている領域の高さに合わせて再計算されます。スクロールしてアドレスバーが消えれば、それに応じて値も更新されるのです。

スマホの全画面レイアウトを正確に作りたいなら、まずこのdvhが第一候補になります。

svhは最小の高さを基準にする

svhは「small viewport height」の略です。アドレスバーが表示された状態、つまり見える領域が最も小さいときの高さを基準にします。値が固定されるため、はみ出しを確実に防ぎたいときに有効です。

lvhは最大の高さを基準にする

lvhは「large viewport height」の略で、アドレスバーが消えた状態の最も大きい高さを基準にします。従来の100vhに近い挙動をする固定値です。

安全に導入するためのフォールバック手順

新しい単位は便利ですが、古いブラウザでは認識されない可能性があります。そこで、従来のvhを先に書いておき、対応ブラウザだけがdvhを使う書き方が安心です。

.hero-section {
  height: 100vh;   /* 古いブラウザ用 */
  height: 100dvh;  /* 対応ブラウザ用 */
}

使うときに気をつけたいアクセシビリティ

vhを使うときに見落とされがちなのが、使い勝手への配慮です。

100vhの中にたくさんの文章を詰め込むと、文字を拡大したユーザーや大きな表示設定を使う方にとって、コンテンツが画面からあふれてしまうことがあります。

heightではなくmin-height: 100vhを使うと、内容が増えたときには自動的に高さが伸びるため、コンテンツが閉じ込められる事故を防げます。全画面を狙いつつ、はみ出しても安全にスクロールできる。この考え方が実務では重要になります。

よくある質問

100vhと100%は何が違うのですか

100%は親要素の高さを基準にするため、親に高さが指定されていないと機能しないことがあります。一方100vhは画面全体を基準にするので、親の状態に関係なく画面の高さいっぱいになります。

スマホのはみ出しはvhだけで直せますか

従来のvhだけでは根本的な解決は難しいのが正直なところです。dvhを併用するのが現在もっとも確実な方法です。従来のvhをフォールバックとして残しつつ、dvhで上書きする形をおすすめします。

dvhはどのブラウザで使えますか

比較的新しい単位のため、モダンブラウザの多くで対応が進んでいます。ただし念のため、従来のvhを先に書いておくフォールバックは必ず入れておくと安心です。導入前には実機での確認をおすすめします。

vhとvwを同時に使っても問題ありませんか

問題ありません。height: 100vh; width: 100vw;のように組み合わせれば、画面全体を覆う要素が作れます。ただしvwは縦スクロールバーの幅を含む場合があるため、横方向に微妙なはみ出しが出ることがある点は覚えておきましょう。

いつvhを使い、いつpxを使うべきですか

画面サイズに応じて伸縮させたい領域にはvh、常に一定のサイズを保ちたいボタンや枠にはpxが向いています。css 画像 中央寄せのような固定要素の配置ではpxが扱いやすい場面も多いです。目的に応じて使い分けてください。

まとめ

vhは、画面の高さを基準にする便利な単位です。1vhは画面の高さの1%、100vhで画面全体という仕組みさえ押さえれば、全画面レイアウトを自在に作れるようになります。

そして、スマホで起きるはみ出し問題は、dvhをはじめとする新しい単位で解決できます。まずは従来のvhにdvhを重ねるフォールバックから試してみてください。

単位の特性を理解して適切に選べるようになると、レイアウトで悩む時間はぐっと減っていきます。今日紹介した内容が、みなさんの制作の助けになれば嬉しく思います。