CSS 単位の解説: px, rem, em, vh — そしてそれぞれの使い分け
間違った CSS 単位を選択すると、画面サイズによって崩れるレイアウト、ユーザーの設定を無視するフォント、一貫性のない余白が生じてしまいます。最適な単位を常に選ぶための実践的なガイドをご紹介します。
CSS単位が重要な理由
CSSには12以上の長さの単位がありますが、ほとんどの開発者は実際には5つを使い分けています：px、rem、em、%、そしてビューポート単位のvhとvwです。間違った選択は必ずしもすぐには表面化しません。あなたの画面ではレイアウトが正しく見えても、他人の画面では崩れていたり、視覚的なQAはパスしてもアクセシビリティの監査で落とされたりすることがあります。これはユーザーのブラウザのフォントサイズ設定を無視しているためです。
このガイドでは、各単位が実際に何を測定するのかを解説し、各状況に対する具体的な判断基準を示し、コードレビューで繰り返し発生する間違いについて説明します。
px — 絶対ピクセル
CSSのpxは1つのデバイス独立ピクセルに対応しており、必ずしも物理的な画面のピクセルではありません。2x Retinaディスプレイでは、1つのCSS pxは2つの物理ピクセルを使用してレンダリングされます。つまり、pxは視覚的なサイズにおいて画面間で一貫していますが、絶対的なものであり、何も合わせてスケーリングされません。
pxを使用する場面：
- 境界線（ボーダー）：
border: 1px solid— 1pxの境界線は、コンテキストに関係なく常に細い線に見えるべきです - ボックスシャドウとアウトライン：スケーリングすべきではない精密なディテール
- メディアクエリのブレークポイント：
@media (min-width: 768px) - 固定サイズの装飾要素（定義されたサイズを持つアイコン、区切り線）
pxを使用しない場面： フォントサイズ、パディング、およびマージン。小さなテキストを読むのが困難なためにブラウザのフォントサイズを20pxに設定しているユーザーは、すべてがpxでハードコードされているレイアウトでは恩恵を受けられません。彼らの設定は完全に無視されてしまうからです。
rem — Root Em
remは「root em」の略です。これは常にhtml要素の<font-size>に対する相対的なものであり、親要素に対するものではありません。このため、<em>よりも予測可能な挙動になります。
デフォルトでは、ほとんどのブラウザはルートのフォントサイズを16pxに設定しています。したがって：
1rem = 16px | 1.5rem = 24px | 0.875rem = 14px
remを使用する場面：
- フォントサイズ — remはユーザーのブラウザのフォント設定を尊重します
- タイポグラフィのサイズに合わせて一貫してスケールさせるべきスペース（パディング、マージン、gap）
- すべてを一緒にスケールさせたい場合のコンポーネントのサイズ調整
62.5%のトリック： 一部の開発者は、<html { font-size: 62.5%; }を設定して1remを10pxにする（16pxの62.5% = 10pxのため）ことがあります。これにより、計算が単純になります：<1.4rem = 14px。トレードオフとしては、注意深く使用しない限りユーザーの基本フォント設定を上書きしてしまうことです。アクセシビリティへの影響を理解し、コンポーネントレベルで上書きを行う場合にのみ実行してください。
em — 親要素に対する相対値
<em>は、現在の要素の計算されたフォントサイズ（または、font-size自体に適用される場合は親要素）に対して相対的です。これにより、自身のテキストサイズに合わせて比例的にスケールする必要のあるコンポーネントに便利です。
典型的なユースケース：ボタンのパディング。もしあなたが<padding: 0.5em 1emと書けば、ボタンのフォントサイズを変更したときにボタンのパディングが自動的にスケールします。小さなボタンにはより小さいパディングが、大きなボタンにはより大きなパディングが適用されます。
.btn { font-size: 1rem; padding: 0.5em 1em; }
.btn-lg { font-size: 1.25rem; /* padding scales automatically */ }
累積の問題： emのフォントサイズを持つ要素をネストすると、それらは掛け算されます。親が<1.2emで子が<1.2emの場合、子には実効サイズとして<1.44emが適用されます。これがほとんどのケースでフォントサイズにremが推奨される理由です。remは常にルートを参照するため、ネストしても累積しません。
emを使用する場面： コンポーネント自身のフォントサイズに合わせてサイズを追従させたい場合のパディング、マージン、および line-height。入れ子になったコンポーネントのフォントサイズには em を避けてください。
% — パーセンテージ
パーセンテージは常に親要素の対応する次元に対する相対的なものです。幅のパーセンテージは親の幅に対し、高さのパーセンテージは（注意点はあるものの）親の高さに対して計算されます。
これは特に流動的なレイアウトに便利です：<width: 100%は「利用可能なすべての幅を占有する」ことを意味します。max-widthと組み合わせることで、レスポンシブなコンテナを作成できます：
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
フォントサイズの場合、パーセンテージは em と同様に動作します。つまり親要素と掛け算されます。より予測可能な結果を得るには代わりに rem を使用してください。
vh, vw — ビューポート単位
<1vh = ビューポートの高さの 1%。 <1vw = ビューポートの幅の 1%。これらは要素に依存せず、常にブラウザウィンドウのサイズを参照します。
ビューポート単位を使用する場面：
- フルスクリーンセクション： 画面を正確に埋めるヒーローセクションのために <
height: 100vh - 流動的なタイポグラフィ： メディアクエリなしで画面サイズ間でスムーズにスケールするテキストのために <
font-size: clamp(1rem, 2.5vw, 2rem) - 全幅の画像またはビデオ： コンテナから外れて表示させるために <
width: 100vw
モバイルブラウザのツールバー問題： モバイルブラウザでは、スクロールによってアドレスバーが表示されたり消えたりするため、ビューポートの高さが変化します。<100vhはコンテンツのカットオフやスクロールバーの発生を引き起こす可能性があります。CSSにはこれを処理するために <dvh (dynamic viewport height)、<svh (small — アドレスバー表示時)、および <lvh (large — アドレスバー非表示時) が追加されました。2024年以降、dvhのブラウザサポートは良好です。モバイルでのフルスクリーンレイアウトには <height: 100dvh を使用してください。
CSS単位の決定ガイド
| サイズを調整するもの | 使用する単位 | 理由 |
|---|---|---|
| Body / グローバルなフォントサイズ | rem | ユーザーの好みを尊重、累積しない |
| コンポーネンのフォントサイズ | rem | 一貫性があり予測可能 |
| コンポーネントのパディング / マージン | em または rem | フォントサイズに追従させたい場合は em、一貫性のために rem |
| ボーダー、ボックスシャドウ | px | 決してスケールすべきではない |
| メディアクエリのブレークポイント | px または <em | シンプルさなら px、フォント設定に合わせて調整するなら em |
| 流動的なコンテナ幅 | % + <max-width | 利用可能なスペースを確保し、最大値を制限する |
| フルサイズのヒーローセクション | <100dvh | モバイルブラウザのツールバーを考慮 |
| 流動的なタイポグラフィ | <clamp() (rem + vw) | ブレークポイント間でスムーズにスケールする |
よくある間違い
1. すべてのフォントサイズに px を使用すること。 これはアクセシビリティを損なうことになります。ブラウザの基本フォントサイズを大きくしているユーザーは、テキストが変化しないことに気づくでしょう。UIがその好みを尊重するように、フォントサイズには rem を使用してください。
2. 入れ子になったコンポーネントで em を使用すること。 ここで累積の問題が発生します。モーダルのなかのカードのなかのメニューは、3倍の累積になる可能性があります。フォントサイズには rem を使用してください。
3. dvh のフォールバックなしでフルスクリーンレイアウトに vh を使用すること。 モバイルではアドレスバーがレイアウトのズレを引き起こします。<min-height: 100svh または <height: 100dvh を使用してください。
4. % の高さには、明示的な高さを持つ親要素が必要であることを忘れること。 親が <height: auto> の場合、子要素の <height: 100%> は効果がありません。代わりに <vh> または Flexbox を使用してください。
px → rem 変換式
デフォルトのルートフォントサイズは 16px です。変換式は以下の通りです：
例：
24px ÷ 16 = 1.5rem
ピクセルを出力するデザインツールを使用している場合は、当社の PX to REM Converter を使用すれば計算を即座に処理できます。任意の px 値（またはリスト）を貼り付けるだけで、カスタムのルートサイズに対応した rem 相当の値を取得できます。
px を rem に瞬時に変換
任意のピクセル値を貼り付けて rem 換算を取得。カスタムのベースフォントサイズにも対応。