【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>要素のサイズは表示領域ピッタリになります。

ソースはコチラです。

<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 が入ります)-->
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」を使っています。
「display: table」「display: table-cell」は displayプロパティの値です。
displayプロパティに関しては後日詳細を書きます。
(書きました。こちらです→【17-1】displayプロパティでボックスの表示形式を自由に変えよう
また、こちらに↓使い方をメモっていますので、ご興味ある方はご覧ください。
display:table-cell の親に display:table を指定しないと意味無い | *Web Design 覚え書き*

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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 31 - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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