CSSの単位 px、%、rem、em、vw の違いとは？

CSSでは文字サイズや余白、要素の幅を指定する際にさまざまな単位を使用します。

よく使われる単位には「px」「%」「rem」「em」「vw」がありますが、それぞれ基準となる値が異なります。

px

px はピクセルを基準とした単位です。

font-size: 16px;

サイズを固定したい場合に使用します。ボーダーやアイコンなど、正確な大きさを指定したい場面でよく利用されます。

%

% は親要素のサイズを基準に計算されます。

width: 100%;

レスポンシブデザインでよく使用され、画面サイズに応じて柔軟にレイアウトを調整できます。

rem

rem はHTML要素（root要素）の文字サイズを基準にした単位です。

font-size: 1rem;

一般的な環境では 1rem = 16px です。

サイト全体でサイズを統一しやすいため、文字サイズや余白の指定によく使用されます。

em

em は親要素の文字サイズを基準に計算されます。

font-size: 1.5em;

親要素によってサイズが変わるため柔軟性がありますが、入れ子が深くなると計算が複雑になる場合があります。

vw

vw は画面幅を基準にした単位です。

width: 50vw;

100vw は画面幅いっぱいを意味します。

画面サイズに応じて要素の大きさを変えたい場合に便利です。