CSSでボックスの幅や高さを指定する場合、パーセント（％）やピクセル（px）で指定することが多いと思います。しかしViewport(vw・vh)はフルスクリーン・レンスポンシブに適したCSSの単位です。今回はこのViewport (vw・vh)を解説して行きたいと思います。
- Viewportの基礎知識
- Viewport(vw・vh)の単位について
- パーセント(%)、ピクセルとの違い
- Viewportの使い方
Viewportとは？
まずはViewportに触れたいと思います。Viewportとは「表示領域」です。Webサイトにおいては、ブラウザの幅と高さがViewportに当たります。
Viewportは「ブラウザの幅と高さを基準にしている」ため、ブラウザのサイズが変更される度に値が変化して行きます。これがフルスクリーン・レンスポンシブに最適である理由です。
Viewport(vw・vh)の単位
Viewport(vw・vh)には4つの単位があります。それぞれ見て行きましょう。
| vw(viewport width) | Viewport(ブラウザ)の幅に対する割合 |
|---|---|
| vh(viewport height) | Viewport(ブラウザ)の高さに対する割合 |
| vmin(viewport minimum) | Viewport(ブラウザ)の幅と高さの値の小さい方に対する割合 |
| vmax(viewport max) | Viewport(ブラウザ)の幅と高さの値の大きい方に対する割合 |
例で見ていきましょう。
幅1200px、高さ800pxのブラウザサイズの場合
- 100vw = ブラウザの幅 = 1200px
- 1vw = ブラウザの幅 / 100 = 12px
- 1vh = ブラウザの高さ / 100 = 8px
- 1vmin = ブラウザの幅と高さの値の小さい方(800px) / 100 = 8px
- 1vmax = ブラウザの幅と高さの値の大さい方(1200px) / 100 = 12px
となります。
パーセント(%)、ピクセルとの違い
ここまで見てくると、パーセントと同じじゃない？と思う方もいるかと思います。しかしパーセントとvw・vhの大きな違いがあります。それは何を基準にしているか？という点です。
パーセントは親要素の幅に依存します。ブラウザの幅が1200pxでも親のボックスの幅が1000pxの場合は「100% = 1000px」となります。
vw・vhはブラウザの幅と高さを基準にします。親のボックスの幅が1000pxであっても、ブラウザの幅が1200pxであれば「100vw = 1200px」となります。
Viewportの使いどころ
やはり最大の使いどころとしてはメインビジュアルやコンテンツをフルスクリーンで表示する場合です。
vw・vhを使えば
height:100vh;
width:100vw;
と書くだけブラウザの幅と高さにボックスを合わせることができます。とても簡単です。
vhについては以前別の記事でも触れているので興味があれば見てみてください。
上の記事の中でvhを使ってフルスクリーンナビゲーションを作っています。下のリンクがそのサンプルです。ファーストビューをvhでブラウザの高さに合わせています。
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
