#レイアウトの基本
今回は自分自身が学習し始めになかなか理解できなかったpxとvhの違いについて解説します。
一言でいうと、pxは固定値、vhは「viewport height」の略称で、相対的な高さを表します。
これだけ聞いても「どういうこと？」と思う方も多いと思います。
今回は高さ・・・つまりheightを例に紹介します。
height: 100px;
このようにすると100pxは固定値なので
今回の場合色をつけている部分になります。
ブラウザのサイズを変更しても100pxの幅は絶対に崩れません。
試しに
height: 200px;
こうすると
200pxが固定値として
ブラウザのサイズを変更しても200pxの幅は絶対に崩れません。
以上がpxについてです。
続いてvhについてですが、
height: 100vh;
このようにして確認してみると
ご覧のように画面全体に対して相対的に適用される。今回の場合100vhにしたので画面全面に適用されます。
この相対的の意味がわかりやすいように、画面を小さくしてみます。もちろんコードは一切いじりません。
すると画面自体は小さくなりましたが、画面全体に適用されているのが確認できると思います。
最後に
height: 50vh;
こちらを確認してみましょう。
このように画面全体に対して相対的に50vhなのでちょうど半分にのみ適用されます。
最後にまとめですが、
pxは固定値
vhは相対的な値
実際にビューをいじってみるとわかりやすいと思います！