昨日の私の記事の中で紹介したCSSプロパティに
height : 100vh;
上記のようなものがありました。
今回はこのプロパティについてです。
この vw や vh とは要素の幅や高さを指定する時に使用する単位です。
viewport width と viewport 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 というものもあるそうですが…こちらは使ったことがないので、今回は割愛します。
興味のある方は、ご自分で調べてみてください。
