Webデザインでよく使う単位と使い分け【CSS】

px（ピクセル）

「絶対的」な単位。画面上の1ドット（１ピクセル）に基づきます。

特徴	どんな画面でもサイズが変わらない固定値。
使いどころ	崩したくない緻密なデザイン箇所やボーダーなど。
注意点	すべてをpxで作るとレスポンシブデザインではレイアウト崩れが起きやすい。

%（パーセント）

「親要素」に対する相対的な単位。

特徴	親要素の大きさに合わせて伸び縮みする。
使いどころ	2カラムレイアウトで「左30%、右70%」のように指定すると、画面幅が変わっても比率が維持される。
注意点	子要素の合計は親要素からはみ出さない様に、余白やボーダーも含めて100%以内を意識する。

rem（レム）

「ルート（html要素）」の文字サイズに対する相対的な単位。

特徴	ブラウザの基本設定（通常は 16px）を1remとする。基本的に文字サイズで使用。
なぜremを使うのか	ブラウザ設定で文字を大きくした場合pxだと無視されるがremなら可変するため（アクセシビリティ対応）。
注意点	文字サイズを変えたくない場所ではpxにする。（例：ナビゲーションや見出しなど）

em（エム）

「その要素自体」または「親要素」の文字サイズを 1 とした単位。

特徴	rem が常にルート（html）を基準にするのに対しemは現在の場所の文字サイズに依存。
使いどころ	1文字分のインデントや、文字の高さに合わせた上下の余白。
注意点	階層が深くなると「親の親の…」と計算が連鎖してサイズが予想外に変化しやすいため使いすぎに注意。

vw / vh（ビューポート幅・高さ）

「画面全体のサイズ」に対する相対的な単位。

特徴	100vw = 画面の横幅いっぱい 100vh = 画面の高さ（縦幅）いっぱい
使いどころ	ヒーロー画像（サイトを開いた瞬間の画面いっぱいのインパクトのある画像）など。

まとめ

項目	推奨単位	理由
文字サイズ	rem	値はブラウザの文字サイズ設定を重視しつつ管理しやすいため
レイアウト幅	%vw	画面サイズに合わせて伸縮させるため
線の太さ	px	細い線をくっきり見せるためと、可変の数値では消えてしまう場合などがあるため