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

最終更新日:2018年06月02日  (初回投稿日:2015年08月25日)

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

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から比較的自由に指定できるようになって便利になりました。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.