実際に使ってみないとわかりにくいCSSの “vw” “vh” って単位

CSSの横幅や高さで使われる単位の中にvw とか vh とか見たことないでしょうか？
今まで気にもしていなかったんだけどこれってなんなんだろう？と思って調べてみました。

Viewport-percentage lengths: the vw, vh, vmin, vmax units

ここに書いてあるとおりviewportの幅（width）と高さ（height）を表す単位みたいです。
と言っても意味がわからないので具体的に調べると
viewportの1/100の値がそれぞれ1vw、1vhってことなんですね。

画面サイズいっぱいのサイトを作る機会がもうすぐあるので丁度いい単位にたどり着きました。
100vwと100vhに指定すれば画面サイズと同じサイズに設定できるわけです。

これを使ってサイトが表示された時点のブラウザの縦幅を取得して
その分だけ画面いっぱいにヒーローイメージを表示してみましょう。

ブラウザを伸縮させるとリアルタイムに背景画像の縦幅が可変します。

それではコードを作っていきます。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>フルスクリーンで表示</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	  <section class="flexbox bg_photo01">
	    <h2>ブラウザの縦幅の分だけ</h2>
	    <h3>画面いっぱいに大きな画像が表示されるよ。</h3>
	  </section>
	  <section class="flexbox bg_photo02">
	    <p>2つ目の背景</p>
	    <p>です</p>
	  </section>
	  <section class="flexbox bg_photo03">
	    <p>いくつもセクションは作れるよ</p>
	    <p>便利。</p>
	  </section>
</body>
</html>

CSS

@charset "UTF-8";
body {
	padding: 0px;
	margin: 0px;
	overflow-x: hidden;
	overflow-y: scroll;
}
section {
  width: 100vw;
  height: 100vh;
}
@media screen and (max-width: 320px) and (max-width: 480px) {
  .box {
    width: 320px;
    height: 480px;
  }
}
.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.bg_photo01 {
  background-image: url(http://bistro.site/img/neko01.jpg);
  background-size: cover;
  background-position: center;
}
.bg_photo02 {
  background-image: url(http://bistro.site/img/neko02.jpg);
  background-size: cover;
  background-position: center;
}
.bg_photo03 {
  background-image: url(http://bistro.site/img/neko03.jpg);
  background-size: cover;
  background-position: center;
}
p {
	color: #FFF;
}

こんな感じにしてみました！
是非ブラウザを伸縮しまくってスクロールしてみてください。

Demo

flexboxを使ってるのでほとんどのブラウザは対応していると思います。
flexbox対応状況

Related Posts

HTML/CSS

Posted by bistro