CSSにViewport単位で、vw、vh、vmin、vmaxという単位があります。
今回は、レスポンシブデザインが一般的になってきたからこそ多用されるようになった「vw、vh、vmin、vmax」の単位の使い方を紹介していきます。
vw、vhとは
vwとは、"Viewport Width"を略したもので、ビューポートの幅に基づき、1vwはビューポートの幅の1％に相当します。
vhとは、"Viewport Height"を略したもので、ビューポートの高さに基づき、1vhはビューポートの高さの1％に相当します。
つまりビューポートの横幅1000pxであった場合10vwは100pxになり、高さが1000pxであった場合10vhは100pxになります。
ビューポートとは、WEBサイトの表示領域のことを言います。簡単に言えば、表示されているブラウザの広さを言います。
vmin、vmaxとは
vminとは、Viewport Minimumを略したもので、ビューポートの高さと幅の小さい方の寸法に基づき、高さが幅より小さかった場合、1vminはビューポートの高さの1%に相当します。同様に、幅の方が小さかった場合、1vminはビューポートの幅の1％に相当します。
vmaxとは、Viewport Maximumを略したもので、ビューポートの高さと幅の大きい方の寸法に基づき、高さが幅より大きい場合、1vmaxはビューポートの高さの1%に相当します。同様に、幅の方が大きかった場合、1vmaxはビューポートの幅の1％に相当します。
ビューポートの幅が1500px、高さが1000pxの場合、ビューポートでは幅のほうが高さより大きいため、10vminは高さの10%の100pxと10vmaxは幅の10%の150pxになります。
使用方法
vw、vh
実際にvw、vhを使用して表したのが下記になります。
See the Pen VwpdEod by Jun Yamagami (@Jun-Yamagami) on CodePen.
100vwは、表示横幅いっぱいに広がっているのがわかります。
100vwに対して半分になっているのが50vwになります。
1vwは、表示横幅の1％となるので、かなり小さくなります。
100vhでは、スクロールすると画面いっぱいに表示されているのがわかると思います。
100vhに対して高さが半分になっているのが50vhになります。
1vhは、表示高さの1％になるのでかなり小さくなります。
vmin、vmax
vmin、vmaxは、下記のように表しています。
See the Pen ExWRdLN by Jun Yamagami (@Jun-Yamagami) on CodePen.
どちらも数値を同じ10ですが、サイズが異なっているのがわかると思います。
ビューポートが高さより横幅のほうが大きくなっているため、大きさに違いが出ます。
上記の右上からcodepenを開いてから表示領域を変えると、大きさが変わります。
縦横の比率を1：1にすると、同じ大きさになります。
実際どんなときに使うのか
vw、vh、vmin、vmaxの使い所は、「大きいサイズのコンテンツ」です。
- ヘッダ画像
- ページ全体の背景画像
- アイキャッチ画像
- 挿入動画
などの画面いっぱいに広がるものです。
ブラウザのウィンドウサイズで変えることができるので、vw、vh、vmin、vmaxを使うとレスポンシブが有効的です。
%との違い
ここまで読んで、%と変わんないと感じている方へ、%との違いをvwを使って説明します。
親要素の幅が80%になっていたとき、子要素がwidth:100%でもwidth:80%に対してwidth:100%になります。
下記の場合、親要素がwidth:80%になっているので、子要素がwidth:100%でも、画面幅の80%になります。
一方、width:100vwは親要素が80%だったとしても、「ブラウザのビューポートの幅に対する割合」になるので、親要素の影響を受けなくなります。
See the Pen poeKQBr by Jun Yamagami (@Jun-Yamagami) on CodePen.
まとめ
WEBサイトを見れる端末が増えたことにより、レスポンシブデザインが必要となり、それを実現するために使いやすい単位です。
レスポンシブの対応は、今のWEBサイトでは必須なので、今回のvw、vh、vmin、vmaxを使うようにしましょう。
