2016年11月20日(日)

CSS3のビューポートユニットでRWDを簡単に実現する方法

• 0
• 0
• 0
• 0

CSS3 の Values and Units モジュールという、CSSのプロパティに設定できる値や単位を定義している仕様の中から、以前に「calc()」を紹介したことがあります。今回は、「vw」と「vh」の紹介をしていきたいと思います。

ビューポートユニットとは？

「vw」と「vh」は、CSS Values and Units モジュールの中のViewport Units という項で紹介されています。ビューポートは、Webサイトを表示しているブラウザの表示領域のことを意味します。つまり、ビューポートユニットというのは、ブラウザの表示領域に対して、どのくらいの幅または高さにしたいか、ということを指定することができるものです。レスポンシブWebデザインが当然となっている現在ですが、％指定をしてもどうしても親要素のサイズに影響されて、思うようにいかないというケースも多々あるのではないかと思います。そんな時は、ぜひビューポートユニットを使ってみてください。

記述方法

記述のルールはとてもシンプルです。pxや%などでサイズを指定するのと同様に、vwやvhを使ってください。おそらく、すでに勘付いている方も多いと思いますが、vwはビューポートの横幅、vhはビューポートの高さを基準として、単位としてはビュー...