CSS学習を始めたばかりの頃、コード例に書かれている「1.5em」や「1rem」といった単位表記を見て、「これは何?」と疑問に思ったことはありませんか?フォントサイズの指定は「px」しか使ったことがなく、相対単位の意味や使い方がわからない…そんな悩みを抱えている初心者の方は多いはずです。

結論から言うと、px(ピクセル)は絶対単位、em・remは相対単位です。レスポンシブデザインを実現するには相対単位の理解が必須であり、特にremは現代のWeb制作で最も推奨される単位です。この記事では、CSS初心者でも理解できるように、各単位の違い・計算方法・実践的な使い分けを徹底解説します。

px・em・remとは?絶対単位と相対単位の違い

CSSで使用できる単位には、大きく分けて「絶対単位」と「相対単位」の2種類があります。絶対単位は常に同じサイズを保つのに対し、相対単位は基準となる値に応じてサイズが変化します。

絶対単位(px)の特徴

px(ピクセル)は画面上の最小単位であり、どんな環境でも同じサイズで表示されます。「16px」と指定すれば、常に16ピクセルのサイズになります。

p {
  font-size: 16px; /* 常に16ピクセルで表示 */
}

相対単位(em・rem)の特徴

相対単位は、基準となるフォントサイズに対する倍率で指定します。emは親要素のフォントサイズを基準とし、remはルート要素(html)のフォントサイズを基準とします。

pxの特徴とメリット・デメリット

pxのメリット

• 直感的でわかりやすい(16pxは常に16ピクセル)
• 計算が不要で、指定したサイズがそのまま反映される
• ピクセルパーフェクトなデザイン実装に向いている

pxのデメリット

• レスポンシブデザインに対応しづらい
• ユーザーのブラウザ設定(フォントサイズ変更)に対応できない
• 画面サイズごとにメディアクエリで細かく調整が必要
• アクセシビリティの観点で推奨されない場合がある

emの特徴と計算方法

emは、親要素のfont-sizeを1emとして計算される相対単位です。親要素が16pxなら、1em=16px、1.5em=24pxとなります。

emの基本的な計算例

<div class="parent">
  <p class="child">このテキストは何px?</p>
</div>

.parent {
  font-size: 20px; /* 親要素が20px */
}
 
.child {
  font-size: 1.5em; /* 20px × 1.5 = 30px */
}

emは親要素に依存するため、入れ子構造では累積的に計算されます。この点が、emを扱う上で最も注意すべきポイントです。

emの累積問題(ネスト時の注意点)

<div class="level1">
  <div class="level2">
    <div class="level3">このテキストは?</div>
  </div>
</div>

.level1 {
  font-size: 1.2em; /* 16px × 1.2 = 19.2px */
}
 
.level2 {
  font-size: 1.2em; /* 19.2px × 1.2 = 23.04px */
}
 
.level3 {
  font-size: 1.2em; /* 23.04px × 1.2 = 27.648px */
}

注意:このように、emは入れ子ごとに倍率が掛け合わされるため、意図しないサイズになる可能性があります。この問題を解決するのがremです。

emが適している場面

• 親要素のフォントサイズに比例させたい要素(ボタン内のアイコンなど)
• padding・marginを文字サイズに連動させたい場合
• コンポーネント内で相対的なサイズ調整をしたい時

remの特徴と計算方法

rem(root em)は、常にルート要素(html)のfont-sizeを基準とする相対単位です。親要素の影響を受けず、常にhtmlのフォントサイズを1remとして計算されます。

remの基本的な計算例

html {
  font-size: 16px; /* ルート要素のサイズ */
}
 
h1 {
  font-size: 2rem; /* 16px × 2 = 32px */
}
 
p {
  font-size: 1rem; /* 16px × 1 = 16px */
}
 
.small-text {
  font-size: 0.875rem; /* 16px × 0.875 = 14px */
}

remの最大のメリット:累積しない

<div class="level1">
  <div class="level2">
    <div class="level3">常に19.2px</div>
  </div>
</div>

html {
  font-size: 16px;
}
 
.level1,
.level2,
.level3 {
  font-size: 1.2rem; /* すべて16px × 1.2 = 19.2px */
}

remなら、どれだけ深く入れ子になっていても、常にhtmlのフォントサイズを基準に計算されます。これが、現代のWeb制作でremが推奨される最大の理由です。

レスポンシブデザインに最適なremの使い方

レスポンシブデザインでは、画面サイズに応じてhtmlのfont-sizeを変更することで、サイト全体のサイズを一括調整できます。これがremを使う最大のメリットです。

基本的なレスポンシブ設定例

/* デスクトップ(デフォルト) */
html {
  font-size: 16px;
}
 
/* タブレット */
@media (max-width: 768px) {
  html {
    font-size: 14px; /* サイト全体が縮小 */
  }
}
 
/* スマートフォン */
@media (max-width: 480px) {
  html {
    font-size: 12px; /* さらに縮小 */
  }
}
 
/* 各要素はremで指定 */
h1 {
  font-size: 2.5rem; /* デスクトップ:40px、タブレット:35px、スマホ:30px */
}
 
p {
  font-size: 1rem; /* デスクトップ:16px、タブレット:14px、スマホ:12px */
}

注意:この方法なら、htmlのfont-sizeを変更するだけで、サイト全体のサイズが自動的に調整されます。各要素ごとにメディアクエリを書く必要がありません。

より柔軟なレスポンシブ対応:clamp関数との併用

html {
  font-size: clamp(12px, 1vw + 0.5rem, 16px); /* 最小12px、最大16px、画面幅に応じて可変 */
}

clamp関数を使うと、メディアクエリなしで画面サイズに応じた滑らかなフォントサイズ変化を実現できます。

px・em・remの使い分けチェックリスト

どの単位を使うべきか迷ったら、以下のチェックリストを参考にしてください。

迷った時の判断フローチャート

• フォントサイズを指定したい → rem
• 余白(margin・padding)を統一的に管理したい → rem
• 親要素のサイズに比例させたい(ボタン内のアイコンなど) → em
• ボーダーやシャドウなど、固定サイズが望ましい → px
• レスポンシブ対応が必要 → rem(またはvw・clamp併用)
• ピクセルパーフェクトなデザイン再現が必要 → px

実践的な使い分け例

html {
  font-size: 16px; /* ベースサイズはpxで明示 */
}
 
body {
  font-size: 1rem; /* 本文はremで統一 */
  line-height: 1.6; /* 単位なし(フォントサイズの倍率) */
}
 
h1 {
  font-size: 2.5rem; /* 見出しもrem */
  margin-bottom: 1.5rem; /* 余白もrem */
}
 
.button {
  font-size: 1rem;
  padding: 0.75em 1.5em; /* ボタン内の余白はemで文字サイズに比例 */
  border: 2px solid /*color*/; /* ボーダーはpx */
  border-radius: 4px; /* 角丸もpx */
}
 
.icon {
  width: 1em; /* アイコンは親のfont-sizeに合わせてem */
  height: 1em;
}
 
.box-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* シャドウはpx */
}

その他の相対単位(%・vw・vh)との違い

CSS単位にはem・rem以外にも、%・vw・vhといった相対単位があります。それぞれの特徴を理解して、適切に使い分けましょう。

vwを使ったレスポンシブフォントサイズ

h1 {
  font-size: calc(1.5rem + 2vw); /* remとvwを組み合わせて可変 */
}

注意:vwだけでフォントサイズを指定すると、極端に小さい画面や大きい画面で読みづらくなる可能性があります。clamp関数やcalc関数でremと併用するのが安全です。

実践:px→remへの変換方法と計算式

デザインカンプがpx指定の場合、remに変換する必要があります。計算式は「px値 ÷ htmlのfont-size = rem値」です。

基本的な変換計算(html font-size: 16px の場合)

• 12px → 12 ÷ 16 = 0.75rem
• 14px → 14 ÷ 16 = 0.875rem
• 16px → 16 ÷ 16 = 1rem
• 18px → 18 ÷ 16 = 1.125rem
• 20px → 20 ÷ 16 = 1.25rem
• 24px → 24 ÷ 16 = 1.5rem
• 32px → 32 ÷ 16 = 2rem
• 48px → 48 ÷ 16 = 3rem

Sassを使った自動変換関数

// Sass関数でpx→rem変換を自動化
@function rem($px) {
  @return ($px / 16px) * 1rem;
}
 
// 使い方
h1 {
  font-size: rem(32px); // 自動的に2remに変換
}

CSSのcalc関数を使った方法

h1 {
  font-size: calc(32 / 16 * 1rem); /* 2remと同じ */
}

よくある質問

Q1. htmlのfont-sizeは必ず16pxにすべき?

A. いいえ、必須ではありません。ブラウザのデフォルトが16pxなので、それを基準にすることが多いですが、プロジェクトに応じて10pxや62.5%(10px相当)に設定することもあります。ただし、ユーザーのブラウザ設定を尊重するため、%指定(例:html { font-size: 100%; })が推奨されます。

Q2. emとremを混在させても大丈夫?

A. 大丈夫です。フォントサイズと余白はremで統一し、親要素に比例させたい部分(ボタン内のpadding、アイコンサイズなど)だけemを使うのが一般的なベストプラクティスです。

Q3. すべてremにすれば間違いない?

A. ほとんどの場合はremで問題ありませんが、ボーダーの太さ(1px)やシャドウのぼかし具合など、固定サイズが望ましい細かい装飾にはpxを使う方が適切です。状況に応じて使い分けましょう。

Q4. レスポンシブ対応はremだけで十分?

A. 基本的にはremで十分ですが、より柔軟な対応にはvw・vh・clamp関数などを組み合わせるとより効果的です。例:font-size: clamp(1rem, 2vw, 1.5rem);

Q5. 既存のpxコードをremに変換すべき?

A. すでに動いているサイトを無理に変換する必要はありませんが、新規プロジェクトや大規模リニューアルの際にはremベースで設計することを強く推奨します。保守性・拡張性が大幅に向上します。

まとめ

この記事では、CSSの単位「px・em・rem」の違いと使い分けについて解説しました。

まずは、新しく作るプロジェクトでフォントサイズをすべてremに変えてみることから始めてみましょう。慣れてくれば、余白やその他のプロパティにも応用できるようになります。

CSSの単位をマスターすれば、レスポンシブデザインの実装がぐっと楽になり、保守性の高いコードが書けるようになります。ぜひ実際のプロジェクトで試してみてください!