CSSのremとは？基礎から応用まで徹底解説

Webデザインやフロントエンド開発において、文字サイズや余白の指定はとても重要です。その中でもremは、レスポンシブデザインや一貫性のあるレイアウトを作るのに適したCSSの単位です。本記事では、remの基本から応用まで詳しく解説します。

remとは？

rem（root em）は、CSSの相対単位の一つで、HTMLのルート要素（html）のfont-sizeを基準に計算されます。

例えば、デフォルトのブラウザ設定では html の font-size は16pxになっているため

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 1.5 × 16px = 24px */
}

と指定すると、段落のフォントサイズは24pxになります。

remとemの違い

CSSにはemという類似の単位もありますが、基準となる要素が異なります。

単位	基準
rem	htmlのfont-size
em	親要素のfont-size

例えば、emを使用した場合：

div {
  font-size: 20px;
}

p {
  font-size: 1.5em; /* 1.5 × 20px = 30px */
}

この場合、pのフォントサイズはdivのフォントサイズ（20px）を基準に計算されるため、30pxになります。

一方、remを使用すると、親要素の影響を受けずに一貫したサイズ指定ができます。

remのデザイン

remは親要素の影響を受けないため、サイト全体で統一したデザインが実現しやすくなります。

一貫性のあるデザイン

remは親要素の影響を受けないため、サイト全体で統一したデザインが実現しやすくなります。

レスポンシブデザインに適している

htmlのfont-sizeを変更するだけで、すべてのrem指定の要素が自動で調整されます。

@media (max-width: 768px) {
  html {
    font-size: 14px; /* すべてのrem指定が縮小される */
  }
}

アクセシビリティが向上

ユーザーがブラウザのデフォルトフォントサイズを変更した場合でも、remを使っていれば正しく適用されます。

remの応用例

余白やパディングに活用

.container {
  padding: 2rem; /* 32px（16px × 2） */
  margin: 1rem; /* 16px */
}

このようにremを使うことで、フォントサイズと一緒に余白のスケールも簡単に調整できます。

ボタンサイズの調整

button {
  font-size: 1rem; /* 16px */
  padding: 0.75rem 1.5rem; /* 12px 24px */
}

レスポンシブフォントサイズ

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

@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem; /* 24pxに縮小 */
  }
}

レスポンシブとは、スマホなどの画面サイズに応じて最適なデザインや表示をすることです。

remを使う際の注意点

• html の font-size を変更すると、すべての rem 指定が影響を受けるので、意図しないデザイン崩れに注意。
• 小数点（例：font-size: 0.875rem; → 14px）を使うと、ブラウザによっては微妙な違いが出ることがある。
• remを多用すると計算が必要になるため、プロジェクトの方針に応じてpxやemと組み合わせるのもアリ。

まとめ

remは、Webデザインの柔軟性を高め、レスポンシブ対応をしやすくする便利なCSS単位です。一貫性のあるデザインを作りたい場合や、アクセシビリティを向上させたい場合に特に有効です。

ここでremのおさらい！

これを機に、ぜひremを活用して、より柔軟で使いやすいスタイルを作成してみてください！