CSSフレームワークを使おう

■第44話：ダイナミックビューポートユニットで更にレスポンシブに

（最終更新日：2023.11.19）

「ダイナミックビューポートで更に自在に操る」

従来のビューポート（vw, vhなど）は、ページの読み込み時の画面表示サイズに基づいて固定されていた。 しかし、操作に伴いスマートフォンの表示領域内にアドレスバーやナビゲーションバーが表示されると、ユーザーインターフェースが隠れてしまうということがあった （特にiOSだと、vw, vhを使うと隠れてしまった）。 今回紹介するダイナミックビューポートユニットは、CSSにおける新しいサイズ単位の一種で、 自分が決めた領域のビューポートサイズ（見えている領域）に基づいて動的に変化する。 これにより、可変な部分が有っても、見せたい部分を見せることができるデザインすることが可能になった。

ちなみに、2023年11月現在では、Chrome、Edge、Firefox、Safariといった主要なブラウザで対応している。

１.ダイナミックビューポートユニットの概要と利点

ダイナミックビューポートは、画面の表示領域に合わせて大きさを制御するものである。 Dynamic Viewportとそれに関連する単位を以下にまとめた。

1. Large Viewport：lvw, lvh, lvmin, lvmax
2. Small Viewport：svw, svh, svmin, svmax
3. Dynamic Viewport：dvw, dvh, dvmin, dvmax

Large Viewportは可変領域が最大限広がった時（アドレスバーやナビゲーションバーが見えない時）のサイズを基準として、 Small Viewportは、可変領域が最大限縮こまった時（アドレスバーやナビゲーションバーが見える時）のメインの領域がどれくらいの大きさかを基準にして、大きさなどを変化させるものである。 つまり、Small Viewportに合わせると、可変領域によって、コンテンツが隠れて見えないということが無くなる。 Large ViewportとSmall Viewportのlvh、svhの例を以下に示す。どのサイズに合わせて表示するかは、これで分かるはずだ。

今回は、Large ViewportとSmall Viewportの使い方については説明しない。 より使い勝手の良いDynamic Viewportについてだけ、使い方を説明する。 Dynamic Viewportは、上記のような可変領域の変化に合わせて表示領域を変えることができる。 スマートフォンの場合だと、dvhを使えば可変領域の変化によって、表示領域が見えなくなるということが解消できるだろう。 dvmaxとdvminはおそらく余り使うことがないので、次項ではdvhを中心に説明する。

２.実装方法と応用例

実装方法としては、画面いっぱい表示したい画像に対してCSSで「height: 100dvh;」と指定すれば、 高さいっぱいに画面を広げることができる。スマートフォンなどで、最初にインパクトがある画像をいっぱいに表示し、 スライドして内容を見せる手法などで使える。

今回は、本Webページのヘッダー画像に対して「height: 100dvh;」を適用したものを下に記す。 ダイナミックビューポートで画面いっぱいに広がる柔軟性を示すため、 ブラウザでアプリとしてインストールして表示（アドレスバー無）した場合と、ブラウザで表示した場合（アドレスバー有）の２種類を比較した。

高さを100dvhにした効果があって、アプリ化したものはアドレスバーがない分大きく、 Webページだとアドレスバー分小さく画面いっぱいに表示することができた。 「height: 100dvh;」を使えば、このようなWebでの表示領域以外の可変領域の幅も考慮して、大きさを規定することができる。

細かい部分かもしれないが、全体が見える、見えないはユーザーの使いやすさに直結するので、意外と大事だ。 dvhだけでこの設定ができるのは非常に便利である。

３.まとめ

今回は、ダイナミックビューポートについて解説した。 細かい部分と感じるかもしれないがデバイスによる表示ズレ、アドレスバー、ナビゲーションバーによる位置ズレというものは、 ユーザーに対する印象を大きく変えてしまう。

魂は細部に宿る。デザインにこだわったサイトを作りたいという方は是非、今回のテクニックを活用してみよう。

▼参考図書、サイト

   【CSS】ビューポート単位が新しく追加されました。　　Qiita
   CSSのビューポート単位(svh, lvh, dvh)でUI表示に合わせたスタイルを適応させる　　Free Style