今日やった：webサイトで高さ指定を使う話

こんにちは、pocaccio(ポカッチオ)です。
CSSでレスポンシブデザインを作成するための覚書きなので、今回は短めに。

ご覧いただきありがとうございます。
CSSで画面いっぱいの高さ指定をする際には、おおよそ3つの要素があると思います。

：px(ピクセル)での指定
これが広く一般的なサイズ指定。

.pixel-height {
  height: 1800px;
}

利点は正確な制御が可能で、デザインの一貫性を保ちやすいですが、一方で 異なる画面サイズに適応しないため、小さな画面では大きすぎたり、大きな画面では小さすぎたりする可能性があります。
つまり、現在のWeb制作におけるレスポンシブへの対応は限られた範囲での使用が望ましいということです。

：％(パーセント)での指定
親要素に対する相対的な指定。

.percentage-height {
  height: 100%;
}

これもかなり一般的なサイズ指定かと思います。
利点は、親要素のサイズに応じて動的に変化するため、ある程度のレスポンシブ性を持つことで、基本的なレスポンシブへの対応や画面全体のwidth指定にはこれを使用することが多いと思います。
しかし、親要素の高さが明示的に設定されていない場合、期待通りに動作しないことや、親要素のサイズ変更に伴う予期せぬ動作が起こる可能性があるためレスポンシブでの確認は必須になります。

：vh(ビューポート)での指定
ビューポートに対する割合を指定。

.vh-height {
  height: 100vh;
}

これもレスポンシブ対応させるにあたって使用されやすい方法かと思います。
利点は絶対的なスクリーンサイズに直接関連して変化するため、デバイスに関係なく一貫したプロポーションを維持できるという点です。

ただ、欠点がかなり大きいため使用を忌避する場合があると思います。
それがモバイルデバイスへの対応。

モバイルデバイスには、検索バーやメニューバーなど上下に操作に必要な表示箇所が含まれています。
そして使用していれば必ず見ると思いますが、下方向へスクロールすると表示が消え、上方向へスクロールをすると再度表示されるUI/UXを設置しているため、操作と画面の見やすさ両方を兼ね備えています。

ですが、今回のレスポンシブな高さ指定にはその欠点が大きく関わってきます。

なので、今後の制作には2022年頃から急速に対応の幅を広げてきた「dvh」を使用しよう。
というのが今回のまとめです。

：dvh(ダイナミックビューポート)での指定

.dvh-height {
  height: 100dvh;
}

おそらく一番効果を発揮するのは、画面いっぱいに要素を表示させたい時だと思います。
正式名称はDVH(ダイナミックビューポートハイト)、同じくDVWもあり、3つ目の「vh」と参照対象はほぼ同じですが、モバイルデバイス特有の表示領域の変化に対応させた指定数値です。

ダイナミックの通り、まずは画面表示がされた際の数値を取得。
その後要素の追加による表示領域の変化があった際に再度数値の取得を行うことで、動的に画面高さの取得を行ってくれます。

現在の対応ブラウザは
・chrome ver.108~
・edge ver.108~
・safari ver.15.4~
・firefox ver.101~
と、主要なほぼ全てのブラウザには対応しています。
(ここではIEは無視します)

また、問題のモバイル端末ですが
・safari iOS15.4~
・chrome(Android) 126~
・Samsung internet 21~

と、こちらも2023年以降のOSブラウザには対応しており、iphone版のchromeアプリだけでなく、Xやinstagram等のアプリ内ブラウザでも対応確認はされています。

このように、対応ブラウザの拡大がされているためレスポンシブ対応の際にはかなり使い勝手が良くなってきたかと思われます。

上記、あくまで自分の覚書のため多少のご都合があるかもしれませんので、もし注意点や訂正があればコメントで教えていただけると助かります。

それでは、ここまでご覧いただきありがとうございました。
次回投稿もお待ち下さい。