CSS

【CSS】表示画面に対する パーセント幅を取得する【vw, vh】

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

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

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

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

例えば、横幅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%の長さの幅、という意味ですね!

使い過ぎには注意!

このvw、非常に便利ではありますが、使い過ぎには注意が必要だと筆者は考えています。

というのも本来は親要素に対しての幅しか指定できないというルールを破るため、HTMLやCSSの構造を無視することになってしまうからです。

そうすると意図しない表示崩れが起きる可能性がありますよね。

なので、どうしても代替手段が思い浮かばない時の最終手段として捉えておいた方がいいのではないかな、と思っています。


ともあれ、こんな機能がCSSに備わっていると知っておくことも重要です!

活用してみてください♪

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です