viewportを使った単位（CSS）
勉強したはずなのにズッコケた、
Webデザイン技能検定の筆記試験復習シリーズ。
（令和元年度第３回）
CSS3の新単位、vw・ vh・ vmin・ vmaxについて。
CSS2.1以降、絶対単位となった「px」と
親要素に対して相対単位（倍率）の「%」に加えて
vw・ vh・ vmin・ vmaxが登場。
（１）viewportとは
「表示領域」のこと。
デスクトップ環境（PCなど）のブラウザでは、
ブラウザウインドウの表示領域。
ブラウザのメニューはサイズに含まれない。
（ページが表示されるところのみ）
（２）それぞれの単位名称
①vw（viewport width）
ビューポート幅を基準にした相対サイズ 。
②vh（viewport height）
ビューポートの高さを基準にした相対サイズ。
③vmin（viewport min）
ビューポートの幅と高さで、小さい方を基準にした相対サイズ。
④vmax（viewport max）
ビューポートの幅と高さで、大きい方を基準にした相対サイズ。
（３）この単位の便利なところ
親要素の幅や高さに対して設定される「％」（親要素依存）と違い、
vhやvwは、ブラウザの表示寸法に依存する。
色々な要素ごとにサイズ設定が複雑になっている場合は、
（タブの階層が多い、など）
view portシリーズを使って設定すると
設定値が親要素にひっぱられずに済む。
（４）サンプル
（HTML）
<div>vw</div>
<div class="content content-a">A auto</div>
<div class="content content-b vw-50">B 50vw</div>
<div class="content content-c vw-25">C 25vw</div>
<hr />
<div>vh</div>
<div class="content content-a">A auto</div>
<div class="content content-b vh-50">B 50vh</div>
<div class="content content-c vh-25">C 25vh</div>
<hr />
<div>vmin</div>
<div class="content content-a">A auto</div>
<div class="content content-b vmin-50">B 50vmin</div>
<div class="content content-c vmin-25">C 25vmin</div>
<hr />
<div>vmax</div>
<div class="content content-a">A auto</div>
<div class="content content-b vmax-50">B 50vw</div>
<div class="content content-c vmax-25">C 25vw</div>（CSS)
.content {
color: #fff;
text-align: center;
}
.content-a {
background: #7fc2ef;
}
.content-b {
background: #d685b0;
}
.content-c {
background: #dbe159;
}
.vw-50 {
width: 50vw;
}
.vw-25 {
width: 25vw;
}
.vh-50 {
width: 50vh;
}
.vh-25 {
width: 25vh;
}
.vmin-50 {
width: 50vmin;
}
.vmin-25 {
width: 25vmin;
}
.vmax-50 {
width: 50vmax;
}
.vmax-25 {
width: 25vmax;
}これを実行すると、ウィンドウの横幅・縦幅をいじった場合
「25vh/50vh」
「25vw/50vw」
「25vmax/50vmax」
「25vmin/50vmin」
で設定されているdivのサイズが変動する。
【出典】
この記事が気に入ったらサポートをしてみませんか？