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

@niketcha

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

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

vw/vhとは?

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

vwViewport Widthブラウザの幅に対する割合
vhViewport Heightブラウザの高さに対する割合

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

Sponsored Link

%指定じゃだめなの?

幅の場合

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

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

高さの場合

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

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

対応ブラウザ

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

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

-ウェブサイト構築, css

コメントを残す

お名前もメールも入力は任意です。お気軽に指摘や質問などしていただけると嬉しいです。

Gravatarに登録すると、お好きな画像をアバターに設定できます。

Copyright© ニケッチャニッキ , 2017-2019 All Rights Reserved.