【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>

CSS

div {

width: 80vw;

height: 100vh;

}

#view1 { background: red; }

#view2 { background: blue; }

#view3 { background: green; }

#view4 { background: yellow; }

HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

HTML

こういった感じで、vwとvhで指定した通りの大きさになりましたね。
viewportは幅600px・高さ500pxなので、divの大きさは480pxｘ500pxとなっているはずです。

このように親要素やHTML構造に左右されず、確実に画面のやviewportのサイズに合わせてくれるのがvwとvhってやつです。
レスポンシブサイトなどで画面の幅によってサイト内のコンテンツのサイズが変わるような場合には本当に便利な指定方法なので、ぜひとも活用していきましょう！

ちなみにこのvw、vhはサイズの他にもfont-sizeなどにも使用できます。
文字サイズに指定すれば、画面幅に応じて読みやすい文字の大きさに調整してくれるので、こちらも非常にうれしい効果を得ることができますね！

まとめ

WEBデザインを勉強されている方は最初のうちはPCでのサイト構築がメインだとは思いますが、今の時代を考えるとスマホにも対応したデザインも勉強するべきですよね。

その際にレスポンシブサイトを作るのならば今回紹介したvwやvhは絶対に覚えておきたい方法になります。このほかにもレスポンシブに対応したCSSテクニックがありますので、まだWEBデザインを勉強途中の人は、スマホでの表示も意識しながら勉強を進めてみてくださいね。

vh・vh

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル