viewportの高さに対する割合といった感じ。なんのこっちゃなんのこっちゃ。ホントなのこっちゃですよね。viewportとはそのページが表示されている領域のこと。画面ならその画面全体がviewport、headタグのmetaタグでサイズを指定している場合はそのサイズの領域、iframeタグなどで表示している場合はiframeの領域がviewportですね。わかりやすいのは画面の大きさを例にした場合です。このように画面サイズが横1000px、縦800pxなら100vwは1000px、100vhは800pxになります。width:80vwにしたら、1000pxの80%の幅ということで800px、height:50vhなら800pxの50%の高さなので400pxということになります。難しく考えることはなく、このような考え方に当てはめればすぐに理解できるようになります。それでは実際にやってみましょう!最初はviewportを幅600px、高さ500pxでデモをやっていこうと思います。id="view1"></div></body></html>HTMLこういった感じで、vwとvhで指定した通りの大きさになりましたね。viewportは幅600px・高さ500pxなので、divの大きさは480pxx500pxとなっているはずです。このように親要素やHTML構造に左右されず、確実に画面のやviewportのサイズに合わせてくれるのがvwとvhってやつです。レスポンシブサイトなどで画面の幅によってサイト内のコンテンツのサイズが変わるような場合には本当に便利な指定方法なので、ぜひとも活用していきましょう!ちなみにこのvw、vhはサイズの他にもfont-sizeなどにも使用できます。文字サイズに指定すれば、画面幅に応じて読みやすい文字の大きさに調整してくれるので、こちらも非常にうれしい効果を得ることができますね!まとめWEBデザインを勉強されている方は最初のうちはPCでのサイト構築がメインだとは思いますが、今の時代を考えるとスマホにも対応したデザインも勉強するべきですよね。その際にレスポンシブサイトを作るのならば今回紹介したvwやvhは絶対に覚えておきたい方法になります。このほかにもレスポンシブに対応したCSSテクニックがありますので、まだWEBデザインを勉強途中の人は、スマホでの表示も意識しながら勉強を進めてみてくださいね。コメントをキャンセルメールアドレスが公開されることはありません。