【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について

前回の「サイズの単位」の続きです。

vw, vh, vmin, vmax は CSS3 から新しく加わった単位です。
これは、viewport（ビューポート）を基準にした相対単位です。

vw	viewport width の略。1vw = ビューポートの幅の 1/100（100vwで横幅いっぱい）
vh	viewport height の略。1vh = ビューポートの高さの 1/100（100vhで高さ全部）
vmin	viewport minimum の略。1vmin = ビューポートの高さか幅の小さいほうの 1/100
vmax	viewport max の略。1vmax = ビューポートの高さか幅の大きいほうの 1/100

対応ブラウザはコチラをごらんください→Can I use... Support tables for HTML5, CSS3, etc
モダンブラウザはだいたい対応しているようです。IEは9から、Android Browser は4.4から対応。

ビューポートってなんだろう？

vw, vh, vmin, vmax のそれぞれの冒頭の「v」は「Viewport」の頭文字。
ビューポートとは、ブラウザの表示領域のことです。

PC用のブラウザならウィンドウサイズ。
タブレットやスマホは、デバイスごとに決められた表示領域があって、機種によって表示領域が違うので「Viewport」という概念が必要になったんでしょうね。

vw や vh の範囲はどんなもんかを調べていたら、有益なコンテンツを見つけました。
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位... | コリス
コリスさんが翻訳・解説してくださっている元のサイトはこちらです。
Viewport vs Percentage Units | bitsofco.de

これによると、vw は html要素の幅よりも大きい、スクロールバーも含む表示領域なんだって。

body要素のサイズ　＜　html要素のサイズ　＜　ビューポートのサイズ
ビューポートはスクロールバーも含む領域。
html要素はスクロールバーを含まない領域。
body要素は、margin:0 にすれば、html要素とピッタリ同じに。

なので、ボックスをウィンドウ幅いっぱいに指定したい時、
vw を使うとbody や html 要素より幅が大きくなって表示に不具合が出るそうで、
vwでなく 100% を使うほうがイイんだそうです。
body要素に width:100vw でなく width: 100% を指定したほうがイイということ。
ウィンドウの高さいっぱいにしたい時こそ vh を使うべきなんだそうです。
body要素に width:100vh を指定すれば、最適ってこと。

vhを使ったレスポンシブレイアウトのサンプル

サンプルを作ってみました。各<section>要素が画面いっぱいになるレイアウトです。

クリックで開きます。

PCでウィンドウサイズを変えたり、スマホなどのデバイスで縦持ち横持ちにしても、<section>要素のサイズは表示領域ピッタリになります。

サンプルの HTMLソース（抜粋）はこちら

<header id="sc0">
  <div id="hGroup">
    <h1>TITLE</h1>
    <p>text</p>
    <a href="#sc1"><img src="img/arrwd.png"></a>
  </div>
</header>
<section id="sc1">
  <div class="scGroup">
    <a href="#sc0"><img src="img/arrwt.png"></a>
    <h1 class="ttl">Section 1</h1>
    <p>text</p>
    <a href="#sc2"><img src="img/arrwd.png"></a>
  </div>
</section>
<!--以下略（同様に Section2〜3 が入ります）-->

サンプルの CSSソース（抜粋）はこちら

header,section {
    margin:0;
    width: 100%;    /*body要素に対して横幅100％。当然bodyはmargin:0にしています*/
    height: 100vh;  /*100vh でビューポートの高さいっぱいに*/
    display:table;  /*親要素にdisplay:table*/
    border-spacing:2em 0;
    text-align:center;}
header div#hGroup,
section div.scGroup {
    display:table-cell;    /*子要素にdisplay:table-cell*/
    vertical-align:middle} /*vertical-align:middleで縦方向のセンター*/
/*header*/
header {color:#fff; background:#000 url(../img/bg.jpg) center center /cover no-repeat}
/*section*/
section {color: #666;}
section#sc1 {background:#9f0}
section#sc2 {background: #000; color:#fff}
section#sc3 {background: #7ad3f3}

ちなみに、このサンプルでは、各<section>の内容を、縦方向センターにしています。
通常 margin などでは、横方向のセンター合わせはできるけど、縦方向はできません。
そこで、ブロック要素をあたかもテーブルセルのように扱うことができる「display:table-cell」を使っています。
テーブルセルにすると「vertical-alignプロパティ」が効くようになるので、縦方向センターができるんです。

「display: table」「display: table-cell」は displayプロパティの値です。
displayプロパティに関しては、
【17-1】displayプロパティでボックスの表示形式を自由に変えよう をご覧ください。

また、こちらに↓使い方をメモっていますので、ご興味ある方はご覧ください。
display:table-cell の親に display:table を指定しないと意味無い | ＊Web Design 覚え書き＊

vertical-alignプロパティに関しては、
【32】インラインの縦方向の整列を決める vertical-alignプロパティをご覧ください。

vmin, vmaxを使ったレスポンシブレイアウトサンプル

vmin はビューポートの高さか幅のどちらか小さいほうをチョイスして基準にします。
vmax はビューポートの高さか幅のどちらか大きいほうをチョイス。
自動的に選んでくれるので便利です。

ってことは、ボックスの height と width に同じ vmin の値を指定すれば「正方形」のボックスができるはず。
ということで、サンプルを作ってみました。

クリックで開きます。

ソースはサンプル上にあります。

これ、PCビューでは正方形、スマホでは正方形は見にくいので長方形に調整しました。

デバイスによってCSSを切り替えるために、CSSのメディアクエリを使いました。
まず、スクロールしやすいように <section>要素の padding を 10vmin に調整。
そして、デバイスの横持ち（landscape）の場合は、幅を 80vmax に、横持ち（portrait）なら高さを 70vmax にしています。
vmax を使えば大きいほうの長さを使うので、こういうとき便利です。

@media only screen and (max-width: 670px) and (orientation:landscape) {
  html {-webkit-text-size-adjust:100%;}
  section {width:80vmax; height:60vmin; padding:10vmin;}
}
@media only screen and (max-width: 376px) and (orientation:portrait) {
  section {height:70vmax; width:70vmin; padding:10vmin;}
}

次回予告

いかがでしたか？　vh や vmin, vmax は、スマホなどのデバイスに最適ですね。

次回は、CSSの「色」と「透明度」を見てみましょう。
要素の色や透明度を決めるのもCSSです。
特に「透明度」はCSS3から比較的自由に指定できるようになって便利になりました。