CSSの長さ単位を徹底解説：px・em・%の違いと使い分け方

CSSで要素のサイズや余白を指定する際に使われる主な単位として、px（ピクセル）、em、%（パーセント）の3つがあります。それぞれ特性が異なるため、正しく理解して使い分けることが、レスポンシブで保守性の高いスタイリングへの第一歩となります。

px（ピクセル）：画面上の絶対的な単位

pxは、画面上のピクセル数を基準とした測定単位です。指定した値がそのまま固定サイズとして反映されるため、意図した通りの見た目を正確に再現できるのが特徴です。

div {
    padding: 40px;
}

この例では、div要素の内側の余白（パディング）が上下左右すべて40ピクセルに設定されます。環境による影響を受けにくいため、ボーダーやアイコンサイズなど、精密な指定が必要な場面でよく使われます。

em：フォントサイズを基準とした相対的な単位

emは、フォントの高さを基準とした相対的な測定単位です。1emは「現在設定されているフォントサイズ」と等しくなります。たとえばフォントサイズを12ptに設定している場合、1em＝12ptとなり、2emなら24ptになります。

p {
    letter-spacing: 4em;
}

この例では、文字間隔がフォントサイズの4倍に設定されます。親要素のフォントサイズを引き継いで計算されるため、文字サイズに連動させたい余白や行間の調整に適しています。

%（パーセント）：親要素を基準とした相対的な単位

%は、別の値（通常は親要素となる包含ブロック）に対する割合として測定値を定義する単位です。親要素のサイズが変われば自動的に追従するため、柔軟なレイアウト構築に欠かせません。

p {
    font-size: 14pt;
    line-height: 80%;
}

この例では、フォントサイズが14ptに設定され、行の高さがその80%（11.2pt相当）に指定されます。このように%、基準となる値との相対関係でサイズが決まる点が大きな特徴です。

3つの単位の使い分けのポイント

• px： 固定サイズで正確に指定したい場合（ボーダー、アイコンなど）
• em： フォントサイズに連動させたい余白や字間の指定
• %： 親要素に応じて伸縮するレスポンシブなレイアウト

用途に応じてこれらの単位を使い分けることで、拡張性が高くメンテナンスしやすいCSSを書くことができます。