Viewportの単位「vh・vw」
「vh・vw」について
cssの値に指定できる単位は「px」や「%」以外に「vh・vw」があります。
この「vh・vw」単位は、ビューポートを基準としたものです。
ビューポート (Viewport)とは、ブラウザウィンドウの表示領域のことを指します。
この「vh・vw」の単位は、レスポンシブ対応のサイトを作成する際にとても便利です。
Viewportの1/100の値がそれぞれ1vw、1vhとなります。
つまり、100vwと100vhで画面サイズと同じサイズになるというわけです。
ブラウザの幅が1200px、高さが1000pxの場合は、幅10vw=120px、高さ10vh=100pxとなります。
例えば、「vh・vw」の単位を使うことで、フルスクリーンレイアウトのコーディングを簡易化できます。
下記は、メインタイトルを画面中央に配置したいときのコードの例になります。
親要素「＃content」セレクタに、height: 100vhを指定することで、ユーザーのブラウザサイズと同サイズの高さを持つコンテンツを表示させることができます。
▼html
<body>
<div id="content">
<h1>タイトルが入ります。</h1>
</div>
</body>
▼CSS
body {
width: 100%;
height: 200vh;
}
#content {
width: 100%;
height: 100vh;
position: relative;
background-color: #5fd27f;
}
#content h1{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 0;
color: #fff;
}
スクロールすることで、ビューポート以外の範囲が表示されます。
今回はレスポンシブサイトの制作時に便利な「vh・vw」を紹介しました。
これまでは、よく「%」を使っていましたが、親要素に絡んでいて、コードが複雑化したりとやっかいな面もありました。今後はフルスクリーンレイアウト以外でも、積極的に「vw・vh」を利用したいと思います。
