画面いっぱいまで広がるヒーローイメージ（アイキャッチイメージ）をよく見かけませんか？

キャンペーンサイトやコーポレートサイトで使われることが多いですね。

どのデバイスで見ても対応できるように、ヒーローイメージの外枠はheight: 100vh;を設定すると丸く収まると思っていましたが、昨今それでは対応できなくなりました。

今回は、レスポンシブデザインにおいて画面いっぱいまで要素を広げるCSSをご紹介します。

ヒーローイメージにはsvhを使おう

ページにアクセスしたときにコンテンツが画面いっぱいに広がり、スクロールすると後続コンテンツが見えてくる。

このようなデザインを実装したいときは外枠の要素にheight: 100svh;を設定しましょう。
CSSは下記のとおりです。

.hero-image {
  height: 100svh;
}

デモはこちらからご確認ください。

なぜvhじゃなくてsvhなのか？

iOS Safariなどでは、ビューポートのサイズが可変になります。
ファーストビュー（ページアクセス）時とスクロール時でブラウザの表示領域（高さ）が変わります。
iOS Safariではブラウザコントロールバーが非表示になり、URL欄も小さくなるため、そのビューポートが広がります。

svhはビューポートの高さが最小のとき、つまりファーストビューの高さを示します。

ビューポートの高さの最大値を示すのがlvhです。

vhはそれぞれのユーザーエージェントによる、デフォルトのビューポートサイズが採用され、デフォルトのビューポートは大抵ラージビューポートと同じサイズになるので100vh = 100lvhとなり、ファーストビューからはみ出してしまいます。

vhとsvhの違いは何か、下図を見るとわかりやすいかと思います。

ブラウザ対応状況

svh（lvh、dvh含む）は2022年11月末にGoogle Chrome（ver.108）が対応したことで、主要ブラウザ（Chrome、Edge、Safari、Firefox）では問題なく使えるようになりました。

まとめ

ヒーローイメージなどファーストビューの画面いっぱいに広げるコンテンツにはvhではなくsvhを使いましょう。

svhの他にはdvhなどもありますが、それはまた別の機会に説明します。