【CSS】要素の幅や高さを指定する単位vw、vhとは

村上 著者:村上

【CSS】要素の幅や高さを指定する単位vw、vhとは

昨日の私の記事の中で紹介したCSSプロパティに

height : 100vh;

上記のようなものがありました。
今回はこのプロパティについてです。

 

この vw や vh とは要素の幅や高さを指定する時に使用する単位です。
viewport widthviewport height の略です。

ビューポートとは何かについては下記のサイトが参考になります。

実践!スマホサイトのviewport設定 – 第1回 viewportとはなにか?|CodeGrid
https://app.codegrid.net/entry/whats-viewport

ごく簡単に説明すると、ビューポートとは表示領域のことで、PCなどのデスクトップ環境では、ブラウザのウィンドウサイズにあたります。

そのため、例えば要素に

width: 100vw;

上記のように指定すると、このCSSを指定した要素の横幅は、ウィンドウの横幅100%となります。
ウィンドウ横幅 100%=100vw なので、width: 10vw; と変更すると、要素の横幅はウィンドウ横幅 1/10、つまり10%になります。
高さを指定したいときは、viewport height を使い、例えば height: 100vh; と記述すると、要素の高さはウィンドウの100%になります。

今まで通り、width: 100%; を使ってもいいのですが、これは親要素に対してのパーセンテージになるため、仮に親要素の幅が ウィンドウの50%の幅だった場合は、width: 100%;を指定しても、ウィンドウの横幅 50% にしか広がりません。
その点、vw、vh を使えば、親要素の影響なく、ウィンドウの画面サイズを基準に、幅や高さを指定することができます。

私は主に、スマートフォンの画面デザインの時に、calc() と一緒に下記のように使うことが多かったです。

height: calc(100vh - 100px);

上記のように指定すると、このプロパティを指定した要素の高さは、ブラウザの画面の高さから 100px だけ引いた高さになります。
そのため、わざわざJavaScriptで画面の高さを取得して、そこから 100px 引いて、そしてCSSの高さを再指定して…ということをしなくて済むので、かなりコードがすっきりしました…!

 

以上、要素の高さや幅を指定するビューポートの単位 vw、vh についてでした。
なお、他にも vmax や vmin というものもあるそうですが…こちらは使ったことがないので、今回は割愛します。
興味のある方は、ご自分で調べてみてください。

  • この記事いいね! (0)

著者について

村上

村上 administrator

2 件のコメント

【CSS】要素の幅や高さを指定する単位vmin、vmaxとは – 株式会社シーポイントラボ | 浜松のシステム開発会社投稿日:6:09 pm - 5月 25, 2018

[…] 【CSS】要素の幅や高さを指定する単位vw、vhとは https://cpoint-lab.co.jp/article/201804/【css】要素の幅や高さを指定する単位vw、vhとは/ […]

Kindleで画面内表示画像サイズを%指定する | IT技術情報局投稿日:2:51 pm - 10月 1, 2018

[…] 幅に対しての%指定、vhは高さに対しての%指定の意味。参考記事はこちら。 […]

現在コメントは受け付けていません。