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

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

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

１．vw、vh、vmin、vimax

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

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

▲目次へ戻る

２．ビューポートとは

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

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

vwは、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 は、ビューポートの高さか幅のどちらか小さい方の１／１００を基準とします。
vmax は、ビューポートの高さか幅のどちらか大きい方の１／１００を基準とします。

例えば、幅が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は値が変わりません。

▲目次へ戻る