cssにおけるvw, vhの使いドコロ

こんにちは、いるかさんです！ みなさん！CSSの長さ指定で用いる単位 vw や vh は使っていますか？！
自分は全くつかっていません！！！普段はpxと%だけ使っています。

先日、社内のとあるプロジェクトで、vwとvhがたくさん使われていて、
「vw、vhだと画面サイズによってデザイン崩れない？」と聞いたところ、
「別に崩れないっぽいですけど、pxとvw,vhどっちがいいか判断つかないっす」とのことだったので、
この機会にいろいろ調べちゃおう企画を考えました(≧∇≦)b
(事前に調べてから使って欲しかったナー(T∀T))

各単位の概要

px単位

そのまま等倍pxで描画されます。

%単位

親要素の相対サイズで決定されます。
例えば、親要素が100pxの場合、子要素にwidth: 10%を指定すると、横幅は10pxとなります。

vw, vh単位

ビューポート(表示領域)の相対サイズで表示されます。
1vw = ビューポートの横幅の1%, 1vh = ビューポートの縦幅の1%
ポイントは、「親要素の相対サイズじゃない」ところです。
例えば、横幅1000pxの画面で、親の横幅が100pxの要素内に配置した子要素にwidthを指定する場合、
width: 10% とすると、10pxになりますが、width: 10vw とすると、100pxになります。
定義については、CSS Values and Units Module Level 3 を参照してください。
ついでに vmin, vmax もあります。

考察

vw、vhの落とし穴

vw、vhは、何も考えずに使っていると、いくつか落とし穴がありました。
使うときは、以下の点に注意しておきたいです。

解像度によっては小さすぎる、または大きすぎる表示になる

px＋%指定の場合と、vw＋vh指定の場合の例です。
ヘッダ表示が、解像度が小さい場合に、小さくなりすぎています。
(極端な例なので、現実的にこういう問題は起きない可能性もあります。)
他には、スクロール領域内のコンテンツが大きく表示されすぎる、ということもありそうです。
そういう場合は、その要素内だけはpxや%を利用するとよさそうですね。

縦横比率によって意図しないデザインになる

これはpx＋%指定でも同じですが、pxを使わない場合、この影響が顕著に出そうです。
逆を言えば、縦横比率があまり変わらないケースでは、あまり気にならなさそうです。

vw, vhはスクロールバーの幅を含む

vwやvhは、スクロールバーの幅を含みます。%指定は、スクロールバーの幅を含みません。 width: 100% は、もし縦スクロールバーが出ていれば、スクロールバーを除いた部分で横幅いっぱいになりますが、 width: 100vwは、縦スクロールバーも含めた横幅になるので、スクロールバーがかぶさって表示されることになります。 スクロールバーのCSSを定義していない場合、OSやブラウザによって幅が違ってくるので、
この点は注意しておかないと、意図しないデザイン崩れを引き起こします。

vw, vh の利点

• px指定等と違い、vminやvmaxが利用可能

ビューポートの縦幅や横幅を基準にした正方形を作るときに使えそうですね！
100vminみたいに指定して使います。

• 画面の縦幅いっぱいに表示させたい場合にvhが便利

画面の横幅いっぱいに表示させたい場合は、width: 100%でいいですが、
縦幅いっぱいに表示させたい場合は、height :100%だと表示されません。
height: 100vh だと、ちゃんと縦幅が固定されます。
これは、100%に限らず、割合で縦幅を固定させたい場合に有用です。
(px指定の場合は、ちゃんと縦幅が固定されます。)

まとめ

ということで、普段はvw, vh(とvmin, vmax)を使う機会はあんまりなさそうですが、 利点に挙げたような場面で知っておくと便利かな、ぐらいの感じでした。 普段使いにするには、スクロールバーの幅を含まない点が落とし穴ですね。

レスポンシブにデザインできる、という記事をちょこちょこ見かけましたが、 font-sizeに指定すると、画面の縦横で文字サイズが変わるのは微妙だし、 px指定でいいんじゃないかなーと感じました。