どうも、くまだです。
最近、コーディングでさまざまな単位に出会います。
今回はviとvbという単位についてのお話。
LPデザインのお仕事募集中です↓↓↓
vi・vbについて
vwやvhはビューポートの幅や高さに対する割合で要素のサイズを指定します。
viとvbは、
- vi:ルート要素のインライン方向に最初に含まれるブロックの大きさの1%を定義した相対単位
- vi:ルート要素のブロック方向に最初に含まれるブロックの大きさの1%を定義した相対単位
例えば、以下のような場合。
画面幅が横幅が375px、縦の高さが635pxのとき。
<div class="box vi">vi</div>
<div class="box vb">vb</div>
.box {
height: 80px;
}
.vi {
width: 100vi;
background: skyblue;
}
.vb {
width: 100vb;
background: orange;
}
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_794,h_1024/https://weblife.ppmp556.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-16-12.44.24-794x1024.png)
100viを指定した場合の要素の横幅は、インライン方向に最初に含まれるブロックの大きさの100%になるので、375pxになります。
100vbを指定した場合の要素の横幅は、ブロック方向に最初に含まれるブロックの大きさの100%になるので、635pxになります。
1viと指定した場合、インライン方向に最初に含まれるブロックの大きさの1%になるので、3.75pxになります。
1vbと指定した場合、ブロック方向に最初に含まれるブロックの大きさの1%になるので、6.35pxになります。
仮に画面幅が横長の場合(例:横幅2000px、縦の高さ635px)にした状態で、それぞれ100viと100vbと指定したとします。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1000,h_245/https://weblife.ppmp556.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-16-12.54.58.png)
100viを指定した場合の要素の横幅は、インライン方向に最初に含まれるブロックの大きさの100%になるので、2000pxになります。
100vbを指定した場合の要素の横幅は、ブロック方向に最初に含まれるブロックの大きさの100%になるので、635pxになります。
ここまで読んでくださりありがとうございました。