2016/09/18 2016/09/18

【CSS】まだpxと%で指定してるの？新時代のサイズ指定『vw・vh指定法』！！

やぁ、アクセサリーは苦手なユトピ(@yutopi60pa)だよ。

今回はCSSのサイズの新しい指定方法について解説していくよ！といっても僕もまだちゃんと理解できていないので、勉強しながら記事を書いていきまよん。

CSSでwidthやheightなどを使うときに数値の指定は大体がpxとか%で指定することが多いですよね？
レスポンシブデザインなんかでは%での指定が多いかもしてれませんね。

そんなサイズの指定方法に新たに加わりました！そのクレイジーな面々はこいつらだ！！

「vh」「vh」

おまえは誰だ！

解説していきます。

vh・vh

「vh」「vh」とは、画面サイズやviewportのサイズを基準に、サイズを算出してくれる指定方法です。
※実は新しく追加されたとかいいながら2014年だったりする。すんまへん土下座

なんのこっちゃ。

例えば大きな画像を画面いっぱいに表示したいとしましょう。
その場合大体がwidth:100%やheight:100%と指定します。ですがこれですとHTMLの構造にもよりますが、親要素の大きさに左右されたりしてうまく画面いっぱいに表示されないことが多々あります。

こうなるとHTMLの構造から見直してCSSの設定も行わなければならないので、非常に面倒くさいことになります。
他にもレスポンシブサイトだと様々な画面の大きさに対応しながら、画像を全面表示するCSS指定をしなければなりませんよね。

こんな面倒くさい作業を一手に解決してくれるのが今回紹介する2つの指定方法です。

それじゃこの2つはどういう意味なのかを紹介しましょう。

vw・・・viewport widthの略。viewportの幅に対する割合
vh・・・viewport heightの略。viewportの高さに対する割合

といった感じ。
なんのこっちゃなんのこっちゃ。

ホントなのこっちゃですよね。
viewportとはそのページが表示されている領域のこと。画面ならその画面全体がviewport、headタグのmetaタグでサイズを指定している場合はそのサイズの領域、iframeタグなどで表示している場合はiframeの領域がviewportですね。

一番わかりやすいのは画面の大きさを例にした場合です。

このように画面サイズが横1000px、縦800pxなら100vwは1000px、100vhは800pxになります。

width:80vwにしたら、1000pxの80%の幅ということで800px、height:50vhなら800pxの50%の高さなので400pxということになります。
あまり難しく考えることはなく、このような考え方に当てはめればすぐに理解できるようになります。

それでは実際にやってみましょう！最初はviewportを幅600px、高さ500pxでデモをやっていこうと思います。

※このでもはPCでご覧ください！

vw、vhを使ってみよう！

width: 80vw、height: 100vhを指定

CSS
div {
	width: 80vw;
	height: 100vh;
}
#view1 { background: red; }
#view2 { background: blue; }
#view3 { background: green; }
#view4 { background: yellow; }

HTML
	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=600, height=500">
		</head>
		<body>
			<div id="view1"></div>
			<div id="view1"></div>
			<div id="view1"></div>
			<div id="view1"></div>
		</body>
	</html>