ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

css3 image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

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

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

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

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

値を指定すると確実にそのサイズで表示されます。

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

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

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

これらの基準はビューポート(viewport)で、

ブラウザでWebページが表示されている全体のサイズ。

ブラウザのメニューとかはサイズに入りません。ページを表示する部分だけです。

タブレットやスマホなら、ほぼ端末のサイズになります。表にまとめました。

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

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

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

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

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

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

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

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

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

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

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

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などのレスポンシブデザイン用に用意された単位を、%よりも優先して使いましょう。

前の投稿
かんたんCSS, HTML抜きで要素を追加する(::before, ::after)
かんたんCSS3, ぜんぶ解説。誰でも分かるflexの使い方
次の投稿

HTML&CSSの本

post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。

コメントを残す

*