CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。CSSはそれら以外にもたくさんの単位が使用できます。 前回はフォントに基づく相対単位でしたが、今回はビューポートに基づく相対単位(vw, vh, lvh, svh, dvh, vb, viなど)の便利な使い方を紹介します。 Relative length units based on the viewport -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: vwとは CSSの単位: vhとは CSSの単位: vbとviとは、ブロックとインライン CSSの単位: lvh, svh, dvhとは ビューポート単位の解説動画
![知っておくと便利なCSSの単位: ビューポートに基づく相対単位(vw, vh, lvh, svh, dvh, vb, viなど)の便利な使い方を解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/5a0fe654ae7dd57d6e8f31a45b65cf812f661394/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202401%2F2024032301%402x.png)