【初心者向け】 vh と vw の特徴と % との違いについて

ビューポートアイキャッチ画像

CSSには画像やフォントのサイズを指定する単位が複数存在します。「 px (ピクセル)」や「%(パーセント)」などの単位を聞いた人もいるのではないでしょうか。

そのなかに、「 vh 」「 vw 」があります。

私も最初混乱してしまったので、備忘録としてブログにしました。

 

ビューポート( viewport )とは

 vh と vw について詳しく説明する前に、「ビューポート( viewport )」について解説しましょう。

ビューポート( viewport )とは表示領域のことで、Webサイトで表示している画面を意味します。

 

例えば

ビューポート説明画像

 

赤い部分で囲っているのがビューポート。

「 vh 」と「 vw 」はビューポートサイズを基準とした単位です。「 vh 」「 vw 」の  v は、ビューポート( viewport )のイニシャルを表しています。

 

 vh vw について

vh

 vh は「 Viewport Height  」の略で、ビューポートの高さの割合を意味します。

例えば、高さが 1000px の場合、 10vh と書くと 100px となります。

 

vw

 vw は「 Viewport Width  」の略で、ビューポートの幅の割合を意味します。

例えば、幅が 800px の場合、 10vw と書くと 80px となります。

 

 % と  vh  vw の違い

 CSS 設計をされている方は vh と vw の特徴を聞いて、「 % 指定でもいいんじゃない?」と感じる人もいるかもしれません。

しかし、 vh vw と % 指定には違いがあります。

 

%は親要素に依存する

 % は親要素を基準として割合が計算されます。そのため、指定したい画像が div などの中にあると、親要素(この場合は div )のサイズに対しての割合となってしまいます。

 

 vh vw はブラウザに表示されている領域に依存する

一方、 vh や vw はブラウザウィンドウを基準として割合が計算されるため、親要素となるプロパティに影響されません。

ですから、背景画像をページいっぱいに表示させたいときなどにとても便利です。

前の記事

「好き」は行動へ直結する