はじめに
某プログラミングスクールのカリキュラムでRailsでアプリケーション作成中、背景画像のようなフルスクリーン表示の要素について、viewportを考慮してサイズ設定をする状況になりました。
.hoge {
width: 100vw;
height: 100vh;
}
と記述したのですが、模範解答は
.hoge {
width: 100%;
height: 100vh;
}
見え方は一緒なのに、この違いは何故…と気になり色々検索。
要素をページの高さいっぱいに配置する場合は100vhを使い、
要素のページの横幅いっぱいに配置する場合は100%を使うのが多い
という内容の解説をいくつか目にしました。
何故使い分けるのかが気になり、調べてみました。
考察・検証
まずはおさらいから。
viewport
ブラウザで表示されている領域のことを指します。
パソコンに限らず、スマートフォンやタブレットからもブラウザを閲覧する現代では、viewportを意識したページの見た目作りが重要となります。
vw(viewport width)
widthをviewportの幅に対する割合で指定する単位。
1vw = ブラウザで表示されている幅の1%
vh(viewport height)
heightをviewportの高さに対する割合で指定する単位。
1vh = ブラウザで表示されている高さの1%
ここまで来ると、フルスクリーン表示の要素はCSSをvwとvhで指定したくなるのですが、「フルスクリーン要素のwidthは%、heightはvhを使うのが一般的」と言われるのは何故でしょうか？
〜なるほどな解説を見つけました〜
CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう
ここで改めて注意したいのが、100%と100vhの違いです。
100%は、親要素に対しての割合。
100vhは、viewport(画面サイズ)に対しての割合。
widthについて
bodyまで一切pxで幅が指定されていないと、ブラウザの幅＝bodyの幅になります。つまり見る端末によって、またブラウザウィンドウの大きさによって、bodyの幅が変わるのです。
上記引用から、widthは親要素にpxが全く指定されていないと、ブラウザの幅がbody要素の幅になることが分かります。
つまり、この場合のbody要素(親要素)に対する100%のwidthは、ブラウザ基準の100vwと同じ意味になるということです。
結果として、フルスクリーン背景要素のwidth100%は100vwと同じ見え方になるから、「widthは%」でもこの場合は良いということだと考えられます。
heightについて
とくにCSSで指定しない限り、要素のheightの値はautoとなり、高さが自動で決まります。
基本的に横いっぱいに広がるwidth: autoと異なり、height: autoは縦いっぱいには広がりません。文字や画像などの要素の中身の分だけの高さになります。
中に子要素が入れば、その分だけ高さは大きくなります。
上記引用から、「親要素の高さ＝中身の高さ」ということが分かります。
つまり、参照する高さが無ければ子要素に％で指定ができません。
結果、フルスクリーン背景のようなの要素については、vhで高さをブラウザ高さ基準に指定する必要がある、ということだと考えられます。
こちらの解説から、今回の場合
要素のページの横幅いっぱいに配置する場合
→100vwと同じ見え方になるので100%要素をページの高さいっぱいに配置する場合
→高さをブラウザ基準にしないといけないので100vh
という意味だったのだとスッキリしました。
終わりに
まだまだ初学者なので、知識を定着させるためにも
こういうものだという「作法」だけで覚えず、作法の元の「仕組み」から理解することを意識し続けたいと思います。
少しでも参考になれば幸いです。
最後まで読んでいただき、誠にありがとうございました。
追記
2020/10/31
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
こちらの記事では、widthの%指定について
「vw」はビューポートの幅に基づいてそのサイズを決定します。このビューポートの幅というのは、ブラウザのスクロールバーを含んだサイズで計算されます。
もしページが長く、スクロールバーが表示されているのであれば、ビューポートの幅はhtml要素の幅より大きくなります。
そのため、もし要素に「100vw」を設定すると、その要素はhtmlとbodyより大きいサイズになってしまいます。
というように、スクロールバーがあった場合のズレを防ぐためにも
widthは%での指定が良いと解説しています。
より納得しました…！
参考記事
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
CSSで要素の高さを指定する100vhと100%の違いを現役エンジニアが解説【初心者向け】