CSSでサイズを指定するとき、「px」「rem」「em」「vw」など複数の単位が登場し、どれを使えばいいのか迷うことがあります。同じ「16」という数値でも、単位が違えば画面に表示される大きさは全く変わってきます。この記事では、それぞれの単位が何を基準にしているのかを整理し、使い分けの基本を解説します。
1. px：画面のピクセル数に対応する絶対単位
px（ピクセル）は、画面上のピクセル数に対応する単位で、CSSの単位の中では「絶対単位」に分類されます。他の要素のフォントサイズや画面サイズに関係なく、常に同じ大きさで表示されるのが特徴です。
指定がシンプルで分かりやすい一方、ユーザーがブラウザの文字サイズ設定を変更しても、px指定の文字は大きさが変わりません。アクセシビリティの観点から、文字サイズなどには後述する相対単位（rem）を使うことが推奨される場面が増えています。
2. remとem：何を基準にするかが違う相対単位
remとemはどちらも「相対単位」ですが、基準にする対象が異なります。emは「親要素のfont-size」を基準にした単位で、remは「ルート要素（html要素）のfont-size」を基準にした単位です。
| 単位 | 基準 | 特徴 |
|---|---|---|
| em | 親要素のfont-size | 入れ子になるほど計算が複雑になりやすい |
| rem | ルート要素（html）のfont-size | どこで使っても基準は常に同じ |
emは親要素を基準にするため、要素が何段も入れ子になっている場合、それぞれの親のfont-sizeが積み重なって最終的な大きさが決まります。たとえば親要素で1.2emと指定された箇所の中で、さらに子要素に1.2emを指定すると、子要素の文字は「ルートの1.2倍の1.2倍」の大きさになります。階層が深くなるほど、実際に何pxになっているのかを目で追いにくくなります。
一方remは、どの階層で使っても常にルート要素のfont-sizeだけを基準にするため、入れ子の深さに関係なく「1remは常に同じ大きさ」になります。この予測しやすさから、特にコンポーネント単位で開発する現代のフロントエンドでは、remが推奨されやすい傾向があります。
3. 基準は「1rem＝16px」が標準
多くのブラウザは、html要素のデフォルトのfont-sizeを16pxに設定しています。そのため、特にCSSでルートのfont-sizeを変更していない場合、1rem＝16pxとして計算できます。たとえば1.5remは24px、0.875remは14pxに相当します。
サイト側でhtml要素のfont-sizeを変更すると、この基準自体が変わり、remで指定したすべての大きさが連動して変化します。逆に言えば、ルートのfont-sizeを1か所変更するだけでサイト全体のサイズ感を一括調整できる点も、rem運用のメリットの一つです。px指定とrem指定を相互に変換したい場合はCSS単位変換ツールを使うと素早く確認できます。
4. vw・vh：ビューポートに対する相対単位
vw（viewport width）とvh（viewport height）は、ブラウザの表示領域（ビューポート）の幅・高さを基準にした単位です。1vwはビューポート幅の1%、1vhはビューポート高さの1%に相当します。
画面サイズに応じて要素の大きさを連動させたいレスポンシブデザインで使われることが多く、たとえば「画面幅いっぱいに広がる見出し」や「画面の高さに合わせたセクション」を作る際に利用されます。ただし、文字サイズにvwだけを使うと、画面幅によって極端に小さく・大きくなりすぎることがあるため、min()やclamp()といった関数と組み合わせて使われることも増えています。
5. pt・pc：印刷向けの単位
pt（ポイント）やpc（パイカ）は、もともと印刷の世界で使われてきた単位です。CSSでも利用可能ですが、画面表示を前提としたWebデザインでは主に使われる単位ではなく、印刷用のスタイルシート（@media printなど）を作る場合に登場することがある程度です。
- •px：画面のピクセル数に対応する絶対単位。文字サイズ変更の影響を受けない
- •rem：ルート要素のfont-sizeを基準にした相対単位。基準が常に一定で予測しやすい
- •em：親要素のfont-sizeを基準にした相対単位。入れ子が深いと計算が複雑になりがち
- •vw・vh：ビューポートの幅・高さに対する相対単位。レスポンシブデザインで活用
- •pt・pc：印刷向けの単位。Web表示用のスタイルでは基本的に使わない
6. %（パーセント）単位の使われ方
CSSでは%（パーセント）も大きさの指定によく使われる単位です。多くの場合、親要素のサイズに対する割合を表し、例えば幅を50%と指定すると、親要素の幅の半分のサイズになります。font-sizeに%を使う場合は、emと同様に親要素のfont-sizeを基準とした割合になります。
レイアウトの幅や高さを親要素に応じて柔軟に変化させたい場合は%が便利ですが、文字サイズの指定ではremの方が基準が一定で扱いやすいとされ、用途によって単位を使い分けるのが実務上の基本的な考え方です。
7. ch・lh：文字の幅・行の高さを基準にする単位
比較的新しい単位として、chは「0（数字のゼロ）という文字1文字分の幅」を基準にする単位で、コードブロックの幅を「80文字分」のように指定したい場合に使われます。lhは要素自身の行の高さ（line-height）を基準にする単位で、行間を基準にした余白を作りたいときに活用されます。remやemほど一般的ではありませんが、対応ブラウザが増えており、用途がはっきりしている場面では便利な選択肢です。
まとめ
px・rem・em・vw・ptはいずれも「何を基準に大きさを決めるか」が異なる単位です。基準が一定で予測しやすいremは文字サイズなどの指定に向いており、画面サイズに連動させたい場合はvw・vhが活躍します。pt・pcは基本的に印刷向けと考えておけば十分です。それぞれの値を相互に変換して確認したいときはCSS単位変換ツールをご活用ください。