こんにちは、モンゴロイドのデザイナーです。
今回のテーマはCSSのvh/vwについてです。
CSSで主に使われるpxと%はおなじみですが、レスポンシブのサイトを制作する上では、Viewport単位であるvh/vwがとても便利です。
ちなみに、モンゴロイドのトップページでも使用しています！
Viewportの単位と意味の解説
Viewportの単位として、vh/vw/vmin/vmaxの4つがあります。
- vh：Viewportの高さの1/100。
- vw：Viewportの幅の1/100
- vmin：Viewportの幅と高さの小さい方の1/100。
- vmax：Viewportの幅と高さの大きい方の1/100。
この4つの単位から、今回は使い勝手の良いvh/vwを紹介します。
vh/vwの使い所
フルスクリーン
最近よく目にするファーストビューのフルスクリーンがありますが、
以前までは、jQueryでブラウザの高さを取得していたと思います。
[javascript]
$(function(){
var $window = $(window);
$(".box").css("height",$window.innerHeight());
$window.resize(function(){
$(".box").css("height",$window.innerHeight());
});
});
[/javascript]
ですが、今回紹介するvhを使用すれば、簡単に対応できてしまいます！
[css]
.box {
width: 100%;
height: 100vh;
}
[/css]
これだけで、対応できます！
デモサイト：https://www.mongoroid.com/wp/page/vh-vw/01.html
簡単に中央配置
レスポンシブ時に、要素を中央に配置したい時がありますよね！その場合に役に立ちます！！
marginプロパティは(100 – height)/2で設定します。
[css]
.head {
width: 80vw;
height: 60vh;
margin: 20vh auto;
}
[/css]
これだけで、OKです！
デモサイト：https://www.mongoroid.com/wp/page/vh-vw/02.html
ブラウザの対応状況
- Chrome v26.0 ~
- FireFox v19.0 ~
- Internet Explorer v9.0 ~
- Safari v6.1 ~
- Android v4.4 ~
IE9やAndroid4.4より古いブラウザなどは対応していませんが、
今ではあまり関係ないかもですね！
