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

Web

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

目次

1.vw、vh、vmin、vimax
2.ビューポートとは

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)

/*表示内容*/

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は値が変わりません。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です