vw,vhを使ってみよう

vw,vhを使ってみよう

日曜に「ファンタスティック・ビーストと魔法使いの旅」を見てから、大人が主人公のファンタジーもいいなぁと考えているyanagimachiです。
私がおばあちゃんになるまでには、おじさん・おばさんやおじいちゃん・おばあちゃんが主人公のファンタジーなんか出てくるのでしょうか。

さて、最近たまーにvw,vhを使うことがあるので、復習を兼ねてメモしておこうと思います。

vw,vhってなに?

ビューポートに対する割合で決まる単位です。 例えばウインドウの高さ100%のsectionがほしいなーというときに使えます。そんなときは

section {
    height: 100vh;
}

と書きます。

サポートブラウザは?

Can I use... Support tables for HTML5, CSS3, etcで確認できます。 新規案件だと結構な割合で使えそうな気がするサポート範囲です。

詳しい使い方

vh編

最初に例に出したウインドウの高さ100%のsectionなどで使うことがあるかと思います。
いままではhtml,bodyにもheight:100%の指定が必要だったりjsが必要だったりしましたが、vhを使えばsectionだけに指定すればOKですね。

vw編

こちらはよく使われるのはフォントサイズではないでしょうか。
どの幅にしても、改行する箇所を変えずにすみます。
改行位置にこだわりがあったり、印刷出身のデザイナーさんの案件で使えそうです。

また、左右のpaddingが外側の要素にあるけど、ウインドウ幅の50%の幅にしたい!なんてときはいままでcalc + %(もしくは%のみ)で計算していましたが、vwを使うとぐっと簡単になりますね。
vwとcalcを一緒に使うとスライドショーなんかも使えるのではないかと思います。


ファンタスティック・ビーストの魔法のようにいろんなことが簡単になる!とまではいきませんが、vw/vhでcssやjsの作業がかなり時短できそうですね!

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ