ご機嫌いかがでしょうか。アマカラです。
今回はサイト制作の中で少し困ったことについて解決したことを皆さんと
共有したいと思います。
今回は例えで作ったスマホ画面を使いながら説明したいと思います。
アドレスバーがファーストビューを邪魔する件
皆さんサイトのトップページを開いたときの、ファーストビュー画面を調整するときどうしているでしょうか？
私はcssで100vhを設定しておりました。
・vh(Viewport Height)とは・・・viewportの高さ 1vhはviewportの高さの1%に相当する。viewportとは表示領域という意味で現在のブラウザの表示領域を表す。
つまり100vhとはブラウザの表示領域の高さ100%、ファーストビューにしたい要素に設定すればその要素の高さがブラウザに表示されている画面いっぱいいっぱいになってくれます。
私はこれでパソコンでもスマホでもファーストビューに設定したい画面を表示させることができるぞ！と思っていました。
こちらが例です。この背景色が青色の部分の高さに100vhを設定しています。
なのでこのページを開くと背景水色の部分の終わりまでがブラウザに表示されるはずです。
パソコンで見てみます。
良いですね。Chromeの検証ツールでスマホサイズに変更して見てみます。
完璧です。ではスマホの実機でも見てみます。
なにこれ
「ここまで映す」って文字が見えていない・・
最初私はパソコンだけで作業していたので全く気づきませんでした。
スマホのブラウザにはアドレスバーがあり、それを考慮できていませんでした。
オレでなきゃ見逃しちゃうね（？）
ということでこの解決方法なのですが、dvhというものを使います！！
・dvh(Dynamic Viewport)とは・・・アドレスバーなどの表示・非表示を考慮して設定されるviewport
このdvhを使い高さに100dvhを設定するとアドレスバーやツールバーなどを動的に考慮してブラウザの高さいっぱいになってくれます！簡単ですね。
実際先ほどの例の背景色水色の部分に100dvhを設定してスマホで確認してみます。
しっかり「ここまで映す」が見えています！
これでファーストビューを作ることができますね。
今回は以上になります。今後も定期的に学んだことを皆さん共有できたらと思います。
それではまた！