デザインの勉強をしようと、他のサイトを検証機能を使ってみていたときのこと。
「vw」や「vh」というはじめて見る単位が使われています。いったいどういったモノなのか、勉強がてらまとめていきます。
✔️widthやpaddingをpxではなく%で使われていましたが、どうやらこの％の代わりに使われているようです。
結論：vh,vwはウィンドウサイズによって決定される
まずは前提としての知識が下の通り。
- vh：Viewportの高さの1/100
- vw：Viewportの幅の1/100
例えば、%の場合、なにを基準にして幅や高さが決まるか覚えていますか？
・
・
・
・
答えは親要素です。
ではいったい、vhやvwはなにを基準にして幅と高さを決めているのでしょうか。
答えは、「スクリーンサイズに対する割合」です。具体的にどうやって使うのか見ていきましょう。
|
1
2
3
4
|
<body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/izawa.jpg" /> </body> |
|
1
2
3
4
5
|
img { display: inline-block; width: 10vw;} |
vwの基準は0から100の範囲で、iphone X のビューポート幅をピクセルで表すと 375px。
10vw はその 1/10 ということで37.5px が img の幅です。
% となにが違うの？
確かに%を使ってもvh,vwを使っても同じ効果を得られそうです。
しかし、決定的な違いがあります。それは、%を使うときは親要素を基準にしたモノになってしまうことです。
例えば、親要素のwidthが600pxで50%を指定していたら300pxになりますよね。つまり、ビューポートの幅が基準にならないということ。
|
1
2
3
4
5
|
img { display: inline-block; margin: auto; width: 10vh; /* ビューポートが 1000px なら画像の幅は 100px */} |
頭ではなんとなく理解できたかもしれませんが、実際に手を動かして確認してみてください。
それでは、最後まで読んでいただきありがとうございました！
