CSS3で追加された単位”vh”がレイアウトに超役立つ!

2016年1月にIE10までのサポートが打ち切られて、HTML5やCSS3がいよいよ本格的にホームページ開発の中核を担える土壌が整ってきました。HTML5やCSS3は今まで以上にリッチメディアの活用が柔軟に行えるようになり、インタラクティブなホームページをよりスマートに記述することが可能です。

しかし、ホームページ制作を仕事にしているならともかく「個人でちょっとしたページを作りたいだけだし…」とあまり新しい要素に触れたがらない方も少なからずいるでしょう。そう思っているならば、それはもったいない!HTML5では要素に合わせたタグが大量に追加され、CSS3には「こうしたかった!」を実現できる機能が追加されたりしているのです。今回はそんなあまたある追加項目の中でもまさに痒い所に手が届くCSS3で追加された単位””vh””を紹介します。これを使えばかつてはフレームセットを使っていたようなレイアウトも1ソースで実現することも可能です!

単位vhは””viewport height””の略です。viewportというのはブラウザの表示領域だと思ってもらえればOKです。それの高さという意味の単位です。100vh=viewportいっぱいの高さ、つまりviewportの高さに対するパーセンテージを指定できる単位です。そうです、これを使えば「どの環境で、どんなに内容が少なくても、このボックスは画面の高さいっぱいに表示させたい!」という希望を「height: 100vh;」というたった1行で実現することが出来ます。昔はJavaScriptとかを総動員していたのを考えると…ありがたい進化です。

これを使った例として、冒頭で述べたフレームセット風のレイアウトを作ってみます。

現在は廃止の方向で進んでいるFRAMESETでは、上下2画面を実現するときに「ROWS=””100,*””」という具合に片方だけ指定して、もう片方を残りの画面いっぱいに表示することが出来ました。さすがに自動的に画面いっぱいとまでは行きませんが、2つのボックスを縦に並べて、その2つのボックスの高さを足して100vhになるよう指定すれば画面の縦幅いっぱいにボックスを敷き詰めることが出来ます。