ズボラ応援ブログ始めました

ブラウザサイズを基準に高さや幅を指定したいときにはvwやvhが使える!

画面いっぱいに画像を表示したいな~とか思ったとき、%で指定する手法がよく使われます。でもこの%は、親要素のサイズに対する割合を指定するものなので、うまく動作してくれないことがあります。

そんなときに使えるのがvwやvhという単位です。

vw/vhとは?

vwはViewport Width、vhはViewport Heightの略です。Viewportとはブラウザの画面サイズのことで、そのサイズに対する割合がvwやvhになります。

vw Viewport Width ブラウザの幅に対する割合
vh Viewport Height ブラウザの高さに対する割合

height:100vh;と指定すれば、画面の高さいっぱいに画像を表示したりできます。



%指定じゃだめなの?

幅の場合

パソコン用のウェブサイトは横幅を指定して作ることがほとんどなので、vwよりpxや%を使うことの方が多いと思います。

またvwはスクロールバーの部分も含めた幅が基準になるそうなので、高さがあるページの場合にはスクロールバーで隠れてしまいます。

高さの場合

高さはディスプレイによって様々だし、全画面で見るとも限らないので、指定せずに作る場合がほとんどだと思います。親要素の高さが指定されていなければ%の指定も使えない。そこで役に立つのがvhです。

またスマホやタブレットの場合は横幅が多種多様なので、レスポンシブ(画面サイズに応じて表示を変えること)のデザインを作るときにもvwやvhが役立ちます。

対応ブラウザ

数年前までは対応していないブラウザが結構あったみたいなのですが、今では約94%のシェアをカバーしているので、ほとんど問題なく使えるようです。

参考各ブラウザサポート状況

タイトルとURLをコピーしました