`vw`は画面幅の1%、vhは画面高さの1%に相当する単位です。 - `vw`（Viewport Width）：画面幅の1%に相当します。 100vwの場合、画面幅いっぱいになります。 - `vh`（Viewport Height）：画面高さの1%に相当します。100vhの場合、画面の高さいっぱいになります。例えば、`width: 50vw;`というコードは、要素の幅を画面幅の50%に設定することを意味します。同様に、`height: 30vh;`は、要素の高さを画面高さの30%に設定することを意味します。 ~~~html-preview

~~~ ## 例1: レスポンシブデザイン `vw`と`vh`は、レスポンシブデザインにおいて画面サイズに合わせて要素の大きさを調整するために使用されます。以下の例の場合、要素の大きさを画面幅の80％、画面高さの50%に指定しています。 ~~~html-preview

~~~ ## 例2: フルスクリーン表示 `vw`と`vh`は、フルスクリーン表示を実現するためにも使用されます。以下のように`width`に`100vw`、`height`に`100vh`を指定することで、要素を画面いっぱいに表示させることができます。フルスクリーン表示をする場合、要素の親要素に対しても`height: 100%`を指定する必要があります。 ~~~html-preview /* フルスクリーン表示の例 */

~~~

スキル図鑑

.css-x7cx95{padding:var(--chakra-space-2);}@media screen and (min-width: 600px){.css-x7cx95{padding:0px;}}vw, vh

クイズにチャレンジしよう！

vw, vh