px・%・vw・vh・em・remの違いとそれぞれの私の使いどころ

こんにちは。
デジタルエクスペリエンスの鳥居です。

昨今CSSはTailwindやbootstrapを使用する機会が増えてわざわざCSSを記載することが少なくなってきたかと思いますが、今回の記事では敢えてその波に逆らってpx・%・vw・vh・em・remの違いとそれぞれの私の使いどころについて実際にコードをお見せしつつ、記載しようと思います！

ピクセル(pixel)の略。
画面サイズや他要素のサイズに影響を置けずに常に固定値。

レスポンシブ対応・要素の微調整
(@mediaやmax-width、min-widthなど…)

親要素のfont-sizeを1emとした相対的な値。

親要素に合わせたレイアウトにしたい場合。(フォントサイズなど…)

ルート要素（通常はhtmlタグ）のfont-sizeを1remとした相対的な単位。

親要素の値に縛られることなく一定のレイアウトにしたい場合。(フォントサイズなど…)

％を指定している要素の親要素内の同一プロパティの値(一部を除く)を100%とした相対的な値。

縦方向でも親の高さじゃなく幅基準

自分自身のサイズが基準

画像サイズの調整・画面のレスポンシブ対応。

vwはビューポート（画面表示領域）の幅を100vwとした相対的な値。
vhはビューポートの高さを100vhとした相対的な値。

vw
レスポンシブフォント・画面幅に合わせたレイアウトにしたい場合。
vh
あまり使わないです。

今回ご紹介した px・%・vw・vh・em・rem は、どれも一長一短があり、どの単位を使うかによってデザインの柔軟性などが大きく変わります。
TailwindやBootstrapといったフレームワークを使うと、普段はこうした単位を意識することは少なくなりますが、仕組みを理解しておくことでフレームワークを超えてデザインを調整したり、思わぬトラブルに対応できる力が身に着くのかなと思っています。