vw・vh・%について

要素をページの横幅いっぱいに配置

100vwと100%は同じ見え方する　∴100%でOK

要素をページの高さいっぱいに配置

高さは参照する高さが無ければ子要素に％で指定ができない

∴高さをブラウザ基準にする必要があるので100vh

■viewport

ブラウザで表示されている領域
■vw(viewport width)

widthをviewportの幅に対する割合で指定する単位。
1vw = ブラウザで表示されている幅の1%

■vh(viewport height)

heightをviewportの高さに対する割合で指定する単位。
1vh = ブラウザで表示されている高さの1%

■100%と100vhの違い
　100%は、親要素に対しての割合。
　100vhは、viewport(画面サイズ)に対しての割合。

■widthについて

widthは親要素にpxの指定がないと、「ブラウザの幅＝bodyの幅」になる

bodyの幅は見る端末やブラウザウィンドウの大きさによって変わってしまう

widthの親要素に指定がない状態での100%は、ブラウザ基準の100vwと同じ意味

∴要素のページの横幅いっぱいに配置する場合は100%でOK

■heightについて

heightは親要素にpxの指定がないと「値＝auto」になる

よって高さが自動で決まる。高さの決まり方は「height: auto」は文字や画像などの要素の中身の分だけの高さになり「親要素の高さ＝中身の高さ」となる。

参照する高さが無ければ子要素に％で指定ができないので、フルスクリーン背景のような要素は、vhでブラウザ基準の高さに指定する必要がある

・width: autoは基本的には横いっぱいに広がる

・height: autoは縦いっぱいには広がらない