🙌

【CSS】remとpxの使い分け方｜デザイナーが知っておきたい基本と実践ポイント

に公開
CSS
HTML
tech

Webデザインやコーディングをしていると、**フォントサイズや余白の単位に「rem」と「px」**のどちらを使うべきか迷うことがありますよね。
この記事では、両者の違いと、実際にどのように使い分けるとよいかを解説します。

🧩 pxとremの基本的な違い

単位 基準 主な用途 特徴
px デバイスのピクセル（固定値） 細かいレイアウト調整 どの環境でもサイズが変わらない
rem ルート要素（html）のフォントサイズ フォントサイズ・余白の統一 ユーザーの設定や媒体に合わせて拡大・縮小される

🧠 remを使うメリット

  1. アクセシビリティに対応しやすい
    ブラウザ設定で文字を大きくしたユーザーにも対応できる。
    → 高齢者や視覚に配慮したデザインに有効です。

  2. レスポンシブ対応がしやすい
    html のフォントサイズを1箇所変えるだけで、全体のスケールを調整できます。

  3. デザイン全体の一貫性を保てる
    ルートフォントを基準にするため、各要素のバランスが崩れにくくなります。

⚙️ pxを使うべきシーン

  • 細かなボーダーやアイコンサイズなど、「常に一定の見た目」で保ちたい要素。
  • デザインカンプの再現性を優先する場合（例：バナーや1pxのラインなど）。
  • 微調整や特殊レイアウトで相対単位だとズレる場合。

🎯 実践的な使い分け方

html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-size: 1.6rem; /* =16px */
}

h1 {
  font-size: 2.4rem; /* =24px */
  margin-bottom: 2rem;
}

img {
  border-radius: 4px; /* px指定が自然 */
}

📘 ルールの目安

  • 文字・余白 → rem
  • 線・影・アイコン → px

💬 まとめ

  • pxは固定的なサイズ指定、remはスケーラブルな指定。
  • デザインの柔軟性やアクセシビリティを重視するならremを優先。
  • 微妙な見た目の正確さを重視するならpxを使用。

デザインとユーザー体験の両方を考慮して、単位を使い分けてみてくださいね。

👩‍💻 執筆者メモ
Webデザインをしていると「見た目を整える」ことに意識が向きがちですが、
ユーザーの環境に寄り添うことも大切。
remを上手に使うことで、見やすく・伝わるデザインになります。

Discussion