CSSの値に指定できる単位といえば、pxや%などがおなじみ。でもレスポンシブなサイト制作では、vhやvwといったViewport単位がとても便利です。基本と使いどころを解説します。 CSSにViewport単位(Viewport Uints)が導入されてから数年になります。ブラウザーのサイズが変更されるたびに値が変わるという意味で、真にレスポンシブな単位と言えます。Viewport単位について聞いたことはあるものの、詳しいことはまったく分からないという人は、この記事で理解を深めてください。 単位とその意味 CSSにはViewportを基準とした単位が4つあります。vh、vw、vmin、vmaxです。 Viewport Height(vh):viewportの高さに基づく。1vhはviewportの高さの1%に相当する Viewport Width(vw):viewportの幅に基づく。1v
![知らないと損!CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る](https://cdn-ak-scissors.b.st-hatena.com/image/square/ba9278f8b9703a85c23960f60b9863f085f9a4a6/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2022%2F07%2F27%2F2444864%2Fl%2F60c648fe31fa3014.jpg)