コーディングするときの「vw,vh」って?「pxや%」を代替する方法

デザインの勉強をしようと、他のサイトを検証機能を使ってみていたときのこと。

「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  */
}

 

頭ではなんとなく理解できたかもしれませんが、実際に手を動かして確認してみてください。

それでは、最後まで読んでいただきありがとうございました!

コメント

Copied title and URL