読了目安時間は約 3 分です。
レスポンシブ全盛の今、CSSで要素の幅や高さを指定するときの単位に px よりも % を使うことが増えたと思います。でも、もっと便利な単位がありました。vh,vw。いやー不勉強でした…ということで備忘録的にまとめたいと思います。
ブラウザの大きさを基準とする単位
vh,vwは、ブラウザ（ビューポートとも）の高さや幅に対する割合を示します。つまり、vhは高さ、vwは幅に対する単位です。
たとえば1vhは画面の高さの1%、100vwなら画面の幅100%になります。
画面いっぱいの画像ってインパクトありますよね。そういうときに使えます。いろんな画面に対応できるようになるので、レスポンシブサイトにはもってこいの単位です。
他にもvmax,vminという単位があります
vminは、画面の幅と高さのうち、値が小さい方に対する割合。
vmaxは、画面の幅と高さのうち、値が大きい方に対する割合です。
『%』じゃダメ？
これだけ見ると、%と変わらない気がしますが（僕もそう思ってました…）vh,vwのポイントは「ビューポートを基準としている」というところです。%は「親要素に対する割合」なんです。
だから<div>なんかで囲っていると、<div>の大きさの●%で計算されてしまいます。
たとえば1000pxの画面幅で、<div>で囲ったコンテナ要素が500px幅の場合、<div>内でwidthを50%と指定したら、250pxとなります。親要素の大きさに影響されたくない場面で、vh,vwが活躍します。
簡単に画面中央に配置できる
「どんな画面でも真ん中に要素を配置したい！」という場合にとても便利です。要素の高さが分かれば、上下のmarginの値を[(100 - height)/2]vhに設定するだけで表示できるんです。
たとえば要素のheightが50vhなら、marginは25vh という感じ。
意外とフォントサイズで使える？
フォントには不向きなように思えますが、意外と使えます。ちょっと前までは「スマホは○px、PCは△px」と細々指定していたと思いますが（私だけ？）●vwとすれば簡単です。
しかも、スマホで勝手に改行されて表示が崩れてしまう問題も解消できます。場合によっては小さすぎたり大きすぎたりすることもあると思うので調整は必要でしょうが、これはかなり便利！
コレは注意！
vh,vwは、スクロールバーを含めて計算します。なので100vwだと若干見切れているはずです。どうしても「見切れるのは嫌だ」という場合は、素直に%を使いましょう。
以上です。では、また。
