column

ITコラム

Web

プログラミングノウハウ

2017.03.30

CSS【 vw、vh、vmin、vimax 】~レスポンシブな単位

CSS 【 line-height 】 ~ サイズ指定で、プロパティでサイズを指定する際の単位について紹介しましたが、CSS3から新しく加わった単位があります。
vw、vh、vmin、vmaxという、viewport(ビューポート)を基準とした相対値の単位です。
今回は、CSS3から新しく加わったこれらの単位についてまとめたいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1.vw、vh、vmin、vimax

vw、vh、vmin、vmax は CSS3 から新しく加わった単位です。
先頭文字の「v」は、viewport(ビューポート)の頭文字で、これらはビューポートを基準にした相対値の単位です。
それぞれ以下の要領で、相対値を決定します。

vw viewport widthの略
ビューポートの横幅の1/100を1としてサイズを決定する
vh viewport heightの略
ビューポートの高さの1/100を1としてサイズを決定する
vmin viewport minimumの略
ビューポートの高さか幅の小さい方の1/100を1としてサイズを決定する
vmax viewport maxの略
ビューポートの高さか幅の大きい方の1/100を1としてサイズを決定する

▲目次へ戻る

2.ビューポートとは

vw、vh、vmin、vmaxの先頭文字の「v」は、viewport(ビューポート)の頭文字です。
ビューポートとは、ブラウザの表示領域を意味しています。

ブラウザの表示領域は、PC用のブラウザならウィンドウサイズですが、タブレットやスマートホン等は、デバイスごとに決められた表示領域があって、機種によって違いがあるため、ビューポートという基準が新設されたと思われます。

vwは、html要素の幅よりも大きく、スクロールバーを含む表示領域を基準としています。

body要素のサイズ < html要素のサイズ < ビューポートのサイズ

ビューポートは、スクロールバーも含む領域です。
html要素は、スクロールバーを含まない領域です。
body要素は、html要素よりもmargin値の分だけ内側の領域です(margin:0の場合はhtml要素と同じ領域になります)。

ボックスをウィンドウ幅いっぱいに指定したい場合に、body要素に「width:100vw」と指定すると、body要素やhtml 要素より幅が大きくなって表示に不具合が出る可能性があるため、vwではなく%を使って「width: 100%」と指定した方が良いです。

ウィンドウの高さいっぱいに指定したい場合は、vhで指定するのが適しています。
body要素に「width:100vh」と指定すると、ウィンドウの高さいっぱいにボックスが設置されます。

vhの使い方

section要素が画面いっぱいになるレスポンシブレイアウトの実現には、次のようにvhを使います。

<!-- CSSファイル -->
section {
    margin:0;
    width: 100%;    /*body要素に対して横幅100%(bodyはmargin:0)*/
    height: 100vh;  /*100vh でビューポートの高さいっぱいに指定*/ }

<!-- HTMLファイル -->
<section>
    /*表示内容*/
</section>

vmin、vmaxの使い方

vmin は、ビューポートの高さか幅のどちらか小さい方の1/100を基準とします。
vmax は、ビューポートの高さか幅のどちらか大きい方の1/100を基準とします。

例えば、幅が1100px、高さが700pxのとき、1 vmin = 7px, 1 vmax = 11px となります。

モバイルデバイスにいつも表示させて、画面の縦横にぴったりくっついているようなレイアウトの実現には、次のようにvminを使います。

<span class="pun">.</span>
<span class="pln">box </span>
<span class="pun">{</span>
<span class="pln">height</span>
<span class="pun">:</span>
<span class="pln"> </span>
<span class="lit">100vmin</span>
<span class="pun">;</span>
<span class="pln">  width</span>
<span class="pun">:</span>
<span class="pln"> </span>
<span class="lit">100vmin</span>
<span class="pun">;</span>
<span class="pln"></span>
<span class="pun">}</span>

画面全体をカバーするレイアウトの実現には、次のようにvmaxを使います。

<span class="pun">.</span>
<span class="pln">box </span>
<span class="pun">{</span>
<span class="pln">height</span>
<span class="pun">:</span>
<span class="pln"> </span>
<span class="lit">100vmax</span>
<span class="pun">;</span>
<span class="pln">width</span>
<span class="pun">:</span>
<span class="pln"> </span>
<span class="lit">100vmax</span>
<span class="pun">;</span>
<span class="pln"></span>
<span class="pun">}</span>

vhとvwは、縦置きと横置きで値が変わりますが、vminとvmaxは値が変わりません。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ