CSSでサイズ指定を理解する｜px・em・remの違い

CSSでサイズを指定するときに使われる代表的な単位として px・em・rem が挙げられます。これらは一見似ていますが、基準となるサイズが異なるため、挙動も大きく変わります。適切に使い分けることで、読みやすく、操作しやすいデザインを実現できます。本記事では、それぞれの特徴と使いどころをまとめます。

px（ピクセル）とは

px は画面上のピクセルを基準とする絶対値の単位です。もっとも単純で予測しやすい挙動を持ち、細かなデザイン調整に向いています。

pxの特徴

• 画面上のピクセルを基準とする絶対単位
• 親要素やブラウザ設定の影響を受けない
• 写真やボタンサイズなど、固定サイズにしたい場面に向いている

たとえば、画像サイズやボーダー幅など、厳密にコントロールしたい場面ではpxが扱いやすいです。

CSSの基本構文を確認したい場合は、関連ページの
➡ CSSが反映されないときの原因と対処法
でも補足できます。

emとは

em は「親要素のfont-size」を基準にする相対単位です。
たとえば、親要素の font-size: 16px; のときに、子要素へ font-size: 1.5em; を指定すると 24px になります。

emの特徴

• 親要素のfont-sizeに依存する
• 多段階にネストされると、計算結果が膨らむ「連鎖的なサイズ変化」が起きる
• 余白設定（padding・margin）でも柔軟に使える

特にボタンの内側余白などは、文字サイズに合わせて伸び縮みしてほしいため、emが有効です。

ネストの影響を避ける方法は、
➡ CSSでメディアクエリを使う方法
などでのレスポンシブ基礎知識ともセットで役立ちます。

remとは

rem は HTMLのfont-size（ルート要素） を基準にする単位です。
html { font-size: 16px; } の場合、1rem = 16px となります。

remの特徴

• ルート要素（html）を基準にする
• ネストの深さに影響されない
• スケール設計がしやすく、デザインの統一に向いている

特に、全体のタイポグラフィや余白設計を統一したいときに大きなメリットがあります。

px・em・remの使い分け方

1. 基本の文字サイズは rem

サイト全体の可読性を統一するため、基本文字サイズや主要見出しはremで管理すると一貫性が保てます。

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 32px */
}

2. コンポーネント内部の余白は em

ボタンやカードの余白は、文字サイズに比例して変化してほしいためemが向いています。

.button {
  font-size: 1rem;
  padding: 0.7em 1.2em;
}

3. 厳密なサイズ指定が必要な場面は px

画像サイズ、境界線の幅、アイコンの大きさなど、固定値を扱いたい場合はpxが最適です。

レスポンシブデザインとの関係

サイズ指定の理解は、レスポンシブ対応にも直結します。
特にremを基準にする方法は、ルート要素のfont-sizeをメディアクエリで調整するだけで全体のスケールを変えることができ、効率的です。

レスポンシブの基本については
➡ CSSでメディアクエリを使う方法
で補足できます。

CSSリセットとの相性

ブラウザごとに初期値が異なるfont-size設定の影響を避けるため、CSSリセット と併用するとより安定します。

詳しくは
➡ CSSリセットの基本｜ブラウザ差異をなくす方法
を参考にすると理解が深まります。

まとめ

px・em・rem はそれぞれ役割が異なり、適材適所で使い分けることで、読みやすく扱いやすい設計が可能になります。

CSSの設計を整えることで、予測しやすく保守性の高いスタイルを作成できます。