かんたんCSS vw,vh,vmin,vmax: 端末サイズ単位の使い方

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
css3 image
イラストACの画像をもとに加工しています。

CSS3からvw,vh,vmin,vmaxが追加されました。

これは、新しい相対値(倍率)指定ですが、%との違いが分からない人もいると思います。

また、どこで使うのか分からない人のために、ソースコードのサンプルを入れながら、かんたんに分かりやすく説明します。

絶対値指定のpx、相対値(倍率)指定の%

px(ピクセル)は、PC, タブレット, スマホの画面の単位です。

画面に表示する単位なので、値を指定すると確実にそのサイズで表示されます。

一方%は、親の要素のサイズに影響されます。『親の要素の○○%』という指定を行うからです。

vw,vh,vmin,vmaxは、%指定がグレードアップしたもの

vw,vh,vmin,vmaxは、CSS3から導入された新しい相対値指定の単位です。

これらの基準はビューポート(viewport)で、ブラウザでWebページが表示されている部分のサイズです。

ブラウザのメニューとかはサイズに入りません。ページが表示されるところだけです。

タブレットやスマホなら、ほとんど端末のサイズにもなります。

この4つの単位を表にまとめました。

単位意味
vwviewport width
ビューポートの幅を基準にした相対サイズ
vhviewport height
ビューポートの高さを基準にした相対サイズ
vminviewport min
ビューポートの幅と高さで小さい方を基準にした相対サイズ
vmaxviewport max
ビューポートの幅と高さで大きい方を基準にした相対サイズ

ビューポートと同じサイズは100です。10vwはスマホの幅が320pxなら、1/10の32pxになります。

ブラウザの表示領域(端末)のサイズの数%を指定するということですね?

なぜ、表示領域サイズの基準が必要になったのか?

なぜ、%だけではダメだったのでしょうか? ここには、レスポンシブデザインが関係しています。

近年は、PC, タブレット, スマホなど、サイズの違う端末(デバイス)で同じWebページを見ることが当たり前です。

%の指定では、親の要素に影響されるので、HTMLのタブが階層化されるほど、どれが基準なのか分からなくなっていました。

また、サイズの違う端末で、それぞれバランスの良い配置・サイズのデザインを1つのCSSファイルで作れるものが必要でした。

スマホやタブレットは、端末の画面いっぱいにWebページを表示します。

表示領域のサイズからコンテンツのサイズを決めると、端末に合った、バランスの取れた配置・デザインができます。

そこから、表示領域を基準にした単位が作られました。

CSS3以前に、すでにスマホは爆発的に普及していました。
そこで開発者たちは、同じHTML,CSSでPCとスマホを表示させるのをあきらめて、PC用ページ、SP(タブレット・スマホ)用ページの2つを用意していました。

vw,vh,vmin,vmaxのサンプルコード

vw,vh,vmin,vmaxのサンプルコードを見てみましょう。

ソースコードサンプルのボックスをタップすると(またはボックスにマウスを合わせると)、右上にコピーボタンが出てコードのコピーができます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

HTML
<div>vw</div>
<div class="content content-a">A auto</div>
<div class="content content-b vw-50">B 50vw</div>
<div class="content content-c vw-25">C 25vw</div>
<hr />
<div>vh</div>
<div class="content content-a">A auto</div>
<div class="content content-b vh-50">B 50vh</div>
<div class="content content-c vh-25">C 25vh</div>
<hr />
<div>vmin</div>
<div class="content content-a">A auto</div>
<div class="content content-b vmin-50">B 50vmin</div>
<div class="content content-c vmin-25">C 25vmin</div>
<hr />
<div>vmax</div>
<div class="content content-a">A auto</div>
<div class="content content-b vmax-50">B 50vw</div>
<div class="content content-c vmax-25">C 25vw</div>

幅をそれぞれ基準値に対して、auto(100%), 50%, 25%指定します。

CSS
.content {
    color: #fff;
    text-align: center;
}
.content-a {
    background: #7fc2ef;
}
.content-b {
    background: #d685b0;
}
.content-c {
    background: #dbe159;
}
.vw-50 {
    width: 50vw;
}
.vw-25 {
    width: 25vw;
}
.vh-50 {
    width: 50vh;
}
.vh-25 {
    width: 25vh;
}
.vmin-50 {
    width: 50vmin;
}
.vmin-25 {
    width: 25vmin;
}
.vmax-50 {
    width: 50vmax;
}
.vmax-25 {
    width: 25vmax;
}

結果が見やすいように色を付けるのと、幅のサイズを変えるクラスを追加しました。

HTMLの結果です。

vw
A auto
B 50vw
C 25vw

vh
A auto
B 50vh
C 25vh

vmin
A auto
B 50vmin
C 25vmin

vmax
A auto
B 50vw
C 25vw

スマホやタブレットなら、縦横動かしながら見てください。幅と高さが切り替わるので、50*, 25*の長さが変わります。PCなら、ブラウザのウィンドウサイズを変えると同じ確認ができます。

vmaxを使うときは注意が必要です。端末の長いほうが基準になるので、コンテンツがはみ出ることがあります。
width: **vh, height: **vwを指定するときも同じです。

vw,vh,vmin,vmaxの使い方

vw,vh,vmin,vmaxの使いどころのポイントは、『大きいサイズのコンテンツ』です。

  • ヘッダ画像・ページ全体の背景画像
  • ページトップのアイキャッチ画像
  • 見出し付近のアイキャッチ画像
  • 挿入動画
  • タブ機能の表示エリア

などです。画面いっぱいに広げるようなものばかりです。

サンプルコードを見てみましょう。

CSSに次のものを追加して、HTMLを変更します。

CSS
.img {
    width: 50vw;
    height: calc(50vw * (3/4));
    margin: 20px;
}
.movie {
    width: 50vmax;
    height: calc(50vmax * (9/16));
    margin: 20px;
}
HTML
<div class="content content-a img">image sample</div>
<div class="content content-b movie">movie sample</div>

サンプルなのでdivを使います。画像・動画でも方法は同じです。

次がHTMLの結果です。

image sample
movie sample

端末を動かしたり、ブラウザのウィンドウサイズを変えたりすると、サンプルのサイズが変わります。

まとめ

vw,vhなど、サイズ指定の単位が増えたのは、Webサイトを見る端末(デバイス)のサイズが多様になったからです。

そのためにレスポンシブデザインが必要になり、それを実現するために使いやすい単位が増えました。

これらの単位が、基準値からの相対値(倍率)指定なところにも、レスポンシブデザインを意識していることが分かります。

レスポンシブ対応は、今のWebサイトでは必須なので、以前のような、pxなどの絶対値指定を多く使うのはやめるべきです。相対値指定を優先させるべきでしょう。

そして、相対値指定の中でも、vw,vhなどのレスポンシブデザイン用に用意された単位を、%よりも優先的に使いましょう。

HTML&CSSでおすすめの本
post-cta-image

たくさんあるなかで、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容をモノにすれば、ほかの本は必要ありません。あとは自分の力で、書籍を使わずに、インターネット上にある情報だけで学んでいけるでしょう。


HTML&CSSの厳選本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!