CSSの単位remとは？意味、使い方、pxへの変換計算･レスポンシブまでわかりやすく解説

Webサイト制作では、文字サイズや余白を指定する際に「px（ピクセル）」がよく使われます。
しかし、スマートフォンやタブレットなど、さまざまな画面サイズに対応するレスポンシブ Webデザイン が一般的になった現在、CSS の単位「rem（レム）」を活用した設計の重要性が高まっています。

rem は、html要素 のフォントサイズを基準に値が決まる相対単位です。適切に利用することで、サイト全体のサイズ調整がしやすくなり、画面サイズに応じた柔軟なデザイン設計や、メンテナンス性の高い CSSコード の作成につながります。

一方で、これから CSS を学ぶ方や px での指定に慣れている方にとっては、rem の仕組みや使い方、px からの変換方法など、理解しておきたいポイントがいくつかあります。

特に、以下のような内容は rem を使ううえで重要です。
・rem とはどのような単位なのか
・px から rem へ変換する計算方法
・1rem が何px になるのか
・rem を使ったレスポンシブ対応の方法
・実際の CSS での活用方法

ここでは、CSS の単位「rem」の基礎知識から、具体的な使い方、px への変換・計算方法、計算を簡単にする 62.5%ルール、レスポンシブ Webデザイン での活用方法まで初心者にもわかりやすく解説します。

rem の仕組みを正しく理解することで、画面サイズの変化に対応しやすく、管理しやすいモダンな Webサイト 制作に役立てられるようになります。

remとは？CSSで使われる相対単位

CSS で文字サイズや余白、レイアウトのサイズを指定する際に使われる単位には、px（ピクセル）や % などさまざまな種類があります。
その中でも「rem（レム）」は、レスポンシブ Webデザイン や管理しやすい CSS設計 でよく利用される代表的な相対単位です。

まずは、rem がどのような意味を持ち、どのような仕組みでサイズが決まるのか、基本的な考え方を紹介します。

remの意味

rem とは「Root em（ルート・エム）」の略で、html要素（ルート要素）に設定されたフォントサイズを基準にする CSS の相対単位です。
CSS では、ページ全体の一番上にある html要素 がルート（基準）になります。
rem では、この html要素 に指定された font-size を「1」として、相対的にサイズを決定します。

1rem ＝ html要素 に指定されている font-size

例えば、html要素のフォントサイズが16pxの場合、
・1rem = 16px
・2rem = 32px
・0.5rem = 8px

となります。

rem は、固定された大きさを指定する px とは異なり、基準となるサイズに応じて値が変化するため、柔軟な Webサイト設計 に適しています。

remの仕組み

rem の仕組みを理解するには、「html要素 の font-size が基準になる」という点を押さえることが重要です。

一般的なブラウザでは、初期設定として html要素 のフォントサイズは 16px になっています。

そのため、CSS で特別な指定をしていない場合は、
1rem = 16px
として計算されます。

例えば、以下のようになります。

このように、rem は html要素 の font-size を基準にしてサイズを計算します。

htmlのfont-sizeを変更すると全体に反映される

rem の大きな特徴は、基準となる html要素 の font-size を変更すると、rem で指定したすべての要素に反映されることです。

例えば、html のフォントサイズを 20px に変更した場合、

html {
  font-size: 20px;
}

p {
  font-size: 1.5rem;
}

p要素 の文字サイズは、
20px × 1.5 = 30px
となり、30px で表示されます。

このように、html要素 の基準値を変更するだけで、ページ内の rem 指定された文字サイズや余白などをまとめて調整できます。

例えば、サイト全体を少し大きく表示したい場合でも、個別の要素を1つずつ修正する必要がなく、基準となる値を変更するだけで対応できます。

em（エム）との違い

rem と似た CSS の相対単位に「em（エム）」があります。
大きな違いは、何を基準にするかです。

em は親要素のサイズを基準にするため、要素が入れ子になると計算が複雑になる場合があります。
＞＞emのfont-sizeは親要素を基準に計算されるため、ネストに注意

例えば、親要素に 2em、さらにその子要素にも 2em を指定すると、親の影響を受けて想定以上にサイズが大きくなることがあります。

一方、rem はどの場所で使用しても常にhtml要素が基準になるため、サイズ管理がしやすく、ページ全体で一貫した設計ができます。
ただし、em と rem はそれぞれ適した用途が異なるため、目的に応じた使い分けが重要です。

※em と rem の詳しい違いや使い分けについては、別記事で詳しく解説します。

remの使い方

rem は、文字サイズを指定する font-size だけでなく、余白や要素のサイズ、位置、装飾など、さまざまな CSSプロパティ で利用できます。

これは、rem が html要素 の font-size を基準にした長さ（length）の単位であり、長さの値を指定できる多くの CSSプロパティ に対応しているためです。

特に Webサイト制作では、文字サイズや余白、レイアウトのサイズを rem で統一することで、サイト全体のサイズ管理がしやすくなります。

ここでは、実務でよく利用される rem の使い方を紹介します。

font-sizeで使う

rem が最もよく使われる場面が、文字サイズ（font-size）の指定です。

px で固定値を指定する場合、画面サイズやユーザー設定によって調整が必要になることがあります。
一方、rem を使うと html要素 の font-size を基準に文字サイズを管理できます。

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

この場合、
h1：32px（16px × 2）
p：16px（16px × 1）
になります。

見出しや本文など、サイト全体の文字サイズを統一して管理したい場合に rem が適しています。

margin・paddingで使う

rem は、要素同士の間隔や内側の余白を指定する margin や padding にも利用できます。

.card {
  margin-bottom: 2rem;
  padding: 1.5rem;
}

html の font-size が 16px の場合、
margin-bottom: 2rem → 32px
padding: 1.5rem → 24px
になります。

余白を rem で指定すると、文字サイズと余白のバランスを保ちやすくなります。

例えば、サイト全体の基準サイズを変更した場合でも、文字と余白が比例して調整されるため、レイアウトの一貫性を維持できます。

width・heightで使う

rem は、要素の幅や高さを指定する width や height でも使用できます。

.box {
  width: 20rem;
  height: 10rem;
}

html の font-size が 16px の場合、
width：320px
height：160px
になります。

ボタンやカード、アイコン周辺のサイズなど、一定の比率で管理したい要素に rem を使うことで、調整しやすいCSS設計になります。

ただし、画像や画面幅いっぱいに広がるコンテンツなど、固定サイズに向かない要素では % や vw など、別の単位が適している場合もあります。

gap・border-radiusで使う

rem は、Flexbox や Grid レイアウトの間隔を指定する gap や、角丸を指定する border-radius にも利用できます。

gap で使用する例

.container {
  display: flex;
  gap: 1rem;
}

1rem の場合、html の font-size が 16px なら要素間の間隔は 16px になります。

border-radiusで使用する例

.button {
  border-radius: 0.5rem;
}

0.5rem の場合は 8px となり、ボタンやカードの角丸サイズを統一して管理できます。

このように、細かなデザイン指定にも rem を利用することで、サイト全体のサイズ感を揃えやすくなります。

remを使える主なCSSプロパティ一覧

rem は、長さ（length）を指定できるCSSプロパティで利用できます。
代表的なプロパティは以下の通りです。

ただし、すべての CSSプロパティ で rem が使えるわけではありません。

rem はあくまで「長さ」を表す単位のため、色（color）、透明度（opacity）、重さ（font-weight）など、数値の種類が異なるプロパティでは使用できません。
rem を使う際は、そのプロパティが長さの値を受け取るものかを確認することが大切です。

remとpxの変換・計算方法

rem を使って CSS を書く際に重要になるのが、px から rem へ変換する方法です。

Webサイト のデザインカンプでは、文字サイズや余白などが px で指定されていることが多いため、実装時には px の値を rem へ置き換える作業が発生します。

rem への変換は難しい計算ではなく、基準となる html要素 の font-size を理解すれば簡単に求められます。

remとpxの基本的な計算式

一般的なブラウザでは、html要素 の font-size は初期値で 16px に設定されています。
そのため、通常は以下の計算式で px を rem へ変換できます。

rem = px ÷ 16

例えば、以下のように計算します。
・16px → 16 ÷ 16 = 1rem
・20px → 20 ÷ 16 = 1.25rem
・24px → 24 ÷ 16 = 1.5rem
・32px → 32 ÷ 16 = 2rem

逆に、rem から px へ変換する場合は、以下の式を使用します。
px = rem × 16

例えば、
・1.5rem → 1.5 × 16 = 24px
・2rem → 2 × 16 = 32px
となります。

ただし、この計算は html要素 の font-size が 16px の場合に限ります。
html の font-size を変更している場合は、変更後の値を基準に計算する必要があります。

rem・px換算表

毎回計算する手間を減らすため、よく使われる px と rem の換算値を覚えておくと便利です。

特に、本文の文字サイズや見出し、余白指定では 16px・24px・32px などの値がよく使われるため、基本的な換算値を把握しておくとコーディングの効率が上がります。

計算を楽にする「62.5%ルール」とは？

rem への変換は16で割るだけですが、デザインカンプの px を大量に rem へ変換する場合、毎回計算するのは少し手間になります。
そこで、CSS では「62.5%ルール」と呼ばれる設定方法が使われることがあります。

html {
  font-size: 62.5%;
}

この設定をすると、html要素 の font-size は以下のように計算されます。
16px × 0.625 = 10px

つまり、
1rem = 10px
という分かりやすい基準になります。

62.5%ルールを使ったrem計算例

1rem を 10px として考えられるため、px をそのまま10で割る感覚で rem へ変換できます。

例えば、デザインカンプで「24px」と指定されている場合でも、
24px → 2.4rem
と直感的に変換できます。

62.5%ルールを使うメリット

62.5%ルールを利用すると、以下のようなメリットがあります。

・暗算しやすい
1rem が 10px になるため、px から rem への変換が簡単になります。

・デザインカンプをremへ変換しやすい
10px基準 で考えられるため、デザインデータの数値をそのまま rem へ置き換えやすくなります。

・CSS全体のサイズ管理がしやすい
サイト内のサイズ基準を統一しやすくなり、文字サイズや余白の調整が効率化できます。

62.5%ルールを使う際の注意点

html { font-size: 62.5%; }を設定すると、1rem を 10px として考えられるため、px から rem への変換が分かりやすくなるメリットがあります。

一方で、現在の Web制作 では必ずしもすべてのプロジェクトで採用される方法ではありません。

理由の一つは、html の font-size を変更すると、サイト全体のサイズ計算に影響を与えるためです。

例えば、外部の CSSフレームワーク や UIコンポーネント を導入する場合、それらがブラウザ標準の 16px を基準に設計されているケースがあります。
62.5% 指定によって、意図しないサイズ差や表示崩れが発生する可能性があるため、導入する環境との相性を確認する必要があります。

また、ユーザーがブラウザ側で文字サイズを変更している場合や、アクセシビリティを重視する Webサイト では、ルートのフォントサイズを変更する設計が適しているか検討する必要があります。

そのため、最近では以下のような方法で rem を管理するケースも増えています。
・ブラウザ標準の 16px を基準に rem を利用する
・CSS変数 や計算ツールを活用してサイズ管理する
・プロジェクトごとに rem の基準ルールを決める

62.5%ルール は rem を理解するうえで便利な手法ですが、重要なのは採用すること自体ではありません。
サイトの規模や使用する技術、アクセシビリティへの配慮を踏まえて、管理しやすい方法を選択することが大切です。

レスポンシブWebデザインでのremの使い方

スマートフォンやタブレットなど、さまざまな画面サイズに対応するレスポンシブWebデザインでは、文字サイズや余白をどのように管理するかが重要です。

px でサイズを固定して指定する方法もありますが、画面幅に応じて細かく調整する場合、各要素の CSS を個別に変更する必要があります。

一方、rem を利用すると、基準となる html要素 の font-size を変更するだけで、ページ全体のサイズを効率的に調整できます。

ここでは、レスポンシブ Webデザイン で rem を活用する方法を解説します。

remがレスポンシブに向いている理由

rem がレスポンシブWebデザインに適している最大の理由は、html要素 のフォントサイズを1箇所変更するだけで、rem で指定した要素全体のサイズをまとめて拡大・縮小できる点です。

rem は html要素 の font-size を基準にして計算されるため、基準値を変更すると、文字サイズや余白など、rem を使用しているすべての要素が比例して変化します。

例えば、以下のように文字サイズや余白を rem で指定している場合、

h1 {
 font-size: 2.4rem;
}

p {
 font-size: 1.6rem;
 margin-bottom: 2rem;
}

html の font-size を変更するだけで、h1 や p のサイズも自動的に調整されます。

一方、すべてのサイズを px で指定している場合、スマートフォン向けに全体を縮小したいときは、見出し・本文・余白など、それぞれの CSS をメディアクエリ内で個別に変更する必要があります。

rem を利用すれば、基準となる html要素 のサイズを調整するだけで、ページ全体のバランスを保ったままレスポンシブ対応ができます。

また、メディアクエリと組み合わせることで、画面サイズごとに最適な表示サイズへ切り替えられます。

メディアクエリでfont-sizeを変更する方法

レスポンシブ対応では、画面幅に応じて html要素 の font-size を変更する方法がよく利用されます。

例えば、スマートフォンでは基準サイズを小さくし、タブレットや PC では大きくする場合は以下のように記述します。

html {
 font-size: 55%;
}

@media (min-width: 768px) {
 html {
  font-size: 62.5%;
 }
}

この場合、デフォルトの16pxを基準にすると、
スマートフォン：
16px × 0.55 = 8.8px

PC：
16px × 0.625 = 10px
が html要素 の基準サイズになります。

つまり、同じ 1rem でも、
・スマートフォン：1rem = 8.8px
・PC：1rem = 10px
となり、画面サイズに合わせて全体の表示サイズを調整できます。

実際のレスポンシブ実装例

先ほど設定した html の基準サイズをもとに、見出しや本文、余白を rem で指定してみます。

html {
  font-size: 55%;
}

h1 {
  font-size: 2.4rem;
}

p {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  html {
    font-size: 62.5%;
  }
}

この場合、h1 や p の CSS 自体は変更していませんが、html の基準値が切り替わることで表示サイズが変化します。

スマートフォン（画面幅767px以下）の場合

htmlの基準：
16px × 0.55 = 8.8px

各要素のサイズ：
h1（2.4rem）
8.8px × 2.4 = 約21.1px

p（1.6rem）
8.8px × 1.6 = 約14.1px

pの下余白（2rem）
8.8px × 2 = 約17.6px

PC（画面幅768px以上）の場合

htmlの基準：
16px × 0.625 = 10px

各要素のサイズ：
h1（2.4rem）
10px × 2.4 = 24px

p（1.6rem）
10px × 1.6 = 16px

pの下余白（2rem）
10px × 2 = 20px

このように、h1 や p の CSS を書き換えることなく、html要素 の基準値を変更するだけで、画面サイズに合わせた表示へ自動的に調整できます。
これが、rem を使ったレスポンシブ設計の大きな特徴です。

アクセシビリティとの関係

rem を利用するメリットは、レスポンシブ対応のしやすさだけではありません。

Webサイトでは、ユーザーがブラウザ設定から文字サイズを変更できる機能があります。
視認性を高めるために、標準より大きな文字サイズで閲覧しているユーザーもいます。

すべての文字サイズを px で固定すると、ユーザー側で文字サイズを変更した場合でも、サイト側の指定が優先され、十分に反映されないケースがあります。

一方、rem はルート要素（html）の font-size を基準にするため、ユーザーの文字サイズ設定を反映しやすく、より柔軟な表示が可能です。

その結果、
・文章を読みやすくできる
・さまざまな閲覧環境に対応しやすい
・ユーザーにとって快適な閲覧体験につながる
といったメリットがあります。

ただし、アクセシビリティを高めるには rem を使うだけでなく、適切な文字サイズ、行間、色のコントラストなど、Webサイト全体の設計を考慮することが重要です。

rem は、レスポンシブ対応とユーザーに配慮した Webサイト制作 を実現するために有効な CSS単位 の一つです。