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の作業がかなり時短できそうですね！
