実際に使ってみないとわかりにくい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

    
    フルスクリーンで表示
    
      

        
ブラウザの縦幅の分だけ

        
画面いっぱいに大きな画像が表示されるよ。

      

      

        
2つ目の背景

        
です

      

      

        
いくつもセクションは作れるよ

        
便利。

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