【CSS】表示画面に対するパーセント幅を取得する【vw, vh】｜ProgLearn｜エンジニアのためのプログラミング情報メディア

みなさん、こんにちは。どんぶラッコです。

こんなことを思ったことはないでしょうか？

名無しさん

要素の幅をパーセントで指定する時、親要素に対する比率じゃなくて、画面に対する比率を使いたいんだよなあ

…何を言っているかわからない？

例えば、横幅400pxで指定した div 要素の中で width:90% を指定してみたとします。

<div class="container">
  container (400px * 400px)
  <div class="box-1">
    width: 90%
  </div>  
</div>

.container{
  background-color: #eee;
  width: 400px;
  height: 400px;
}

.box-1{
  background-color: red;
  width: 90%;
}

すると、こんな表示になりますよね。

親要素が400pxであれば、その表示に対して90%の幅で表示されますよね。

それを、このように、親要素関係なく、表示画面幅に対して90%の幅で表示したい！ということです。

そんな時に登場するのがこのvw, vh です。

vw, vh とは？

5.1.2. Viewport-percentage Lengths: the vw, vh, vmin, vmax units の章に記載があります。

https://www.w3.org/TR/css-values-3/#viewport-relative-lengths

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, any scrollbars are assumed not to exist.
https://www.w3.org/TR/css-values-3/#viewport-relative-lengths

viewport-percentageの長さは「最初の内包ブロック(initial containing block)」と関連があります。最初の内包ブロックの高さや幅が変更されると、viewport-percentageの値も変化します。しかし、スクロールバーは存在しないものとして扱われます。

ざっくり翻訳するとこんなところでしょうか。

initial containing block とは viewport のことだと読み変えればいいでしょう。つまり、HTMLのコンテンツを表示するウィンドウ幅のことです。

<meta name="viewport" content="width=480">

みたいに指定すると、initial containing block の定義は 480pxになります。

では、実際に vw を使って記述してみましょう。

See the Pen vw, vh のテスト by cha1ra (@cha1ra) on CodePen.

<div class="container">
  container (400px * 400px)
  <div class="box-1">
    width: 90%
  </div>
  <!-- 追記する -->
  <div class="box-2">
    width: 90vw
  </div>
</div>

.container{
  background-color: #eee;
  width: 400px;
  height: 400px;
}

.box-1{
  background-color: red;
  width: 90%;
}

/*  追記する  */
.box-2{
  background-color: yellow;
  width: 90vw;
}

width: 90vw が当該の部分です。 100vw がviewport100%の長さの幅、という意味ですね！