はじめに

某プログラミングスクールのカリキュラムで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%の違いを現役エンジニアが解説【初心者向け】

知らないと損！CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る

CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう