どうも、べ〜やんです。
今回は、CSSで使用される単位のvw、vhを紹介します。
目次
Viewport ビューポート
vwやvhは、Viewport Width、Viewport heightの略で、Viewportとは表示領域のことです。
Viewportにはvw、vh、vmin、vmaxの4種類があります。
例えば、表示領域の横幅は100vwになります。10vwは表示領域の横幅の10分の1です。
つまり、表示領域の大きさに対する割合を示す単位になります。なので1%と1vwは同じです。
使い方
では、%との違いを確認しながら使い方を紹介します。
%もvw、vhも割合を示す単位ですが、%は親要素を基準にし、vwとvhは常に表示領域のみを基準とします。
今回は、二つのコンテンツを作りました。
ひとつは親要素が表示領域の50%の大きさで(青い部分)、子要素はwidth: 10%;に指定(赤い部分)
もうひとつは親要素は同じく表示領域の50%の大きさで(青い部分)、子要素はwidth: 10vw;に指定(赤い部分)
See the Pen pooxRVP by beeyan (@orientado) on CodePen.
子要素の大きさに注目してください。
width: 10%;では表示領域の50％の親要素の10分の１の幅です。
width: 10vw;では親要素の幅に関係なく、表示領域の10分の１の幅です。
vwでは横幅を基準にして、vhでは縦幅を基準にします。
width: 10vh;などとすれば、横幅を縦幅の割合に応じて指定できます。
Viewportは表示領域いっぱいに背景画像を配置する場合などで使うと便利です。
おわりに
今回は、CSSで使用される単位のvw、vhを紹介しました。
%とvw、vhをうまく使い分けたいですね。
