rem（レム）は、現在のWeb制作で広く利用されている CSS の単位です。
文字サイズや余白などのサイズ管理がしやすく、レスポンシブ対応や保守性を考慮した CSS設計 にも活用されています。
一方で、rem は使い方によっては、html要素 の font-size を変更した際の影響範囲や、px で作成されたデザインデータとの変換、すべての要素を rem化 することによる管理の複雑化など、事前に理解しておきたいデメリットもあります。
特に「すべての CSS を rem で指定すればよい」というわけではなく、要素の種類や目的に応じて px と使い分けることが、管理しやすく品質の高い Webサイト 制作につながります。
ここでは、rem を使う際の注意点やデメリットを詳しく解説するとともに、実務で迷いやすい px との使い分けについても紹介します。
rem の特性を正しく理解し、状況に応じた CSS設計 に役立ててください。
なお、rem の基本的な仕組みや意味、使い方、px への変換方法などを詳しく知りたい方は、先に「CSSの単位remとは？意味、使い方、pxへの変換計算･レスポンシブまでわかりやすく解説」を読んでください。
remを使う際の注意点（デメリット）
rem は強力な単位ですが、その「ルート（html要素）に連動する」という性質ゆえに、実装時に気をつけるべきデメリットがいくつか存在します。
htmlのfont-size変更が全体に影響する
rem は html要素 の font-size を基準にして、各要素のサイズを計算する単位です。
1つの基準値でサイト全体のサイズを調整できる点は rem の大きなメリットですが、反対に基準値の変更が広範囲に影響するという点は注意が必要です。
意図しないサイズ変更のリスク
基準となる html の font-size を不用意に変更すると、サイト内の rem指定 が一斉に変化します。
対象になるのは文字サイズだけではなく、余白（margin・padding）やボタンなどのコンポーネントサイズにも影響します。
そのため、一部のデザインだけを調整するつもりで変更した結果、別ページのレイアウトや UIパーツ のサイズまで変わってしまうケースがあります。
大規模サイトやチーム開発での管理
特にページ数の多い Webサイト や複数人で開発するプロジェクトでは、html の font-size 変更による影響範囲を把握しておくことが重要です。
「このコンポーネントは基準値変更の影響を受けないようにする」といった設計ルールや、rem を使用する範囲を事前に決めておくことで、予期しないデザイン崩れを防ぎやすくなります。
また、チーム開発では基準となる font-size や変更時の確認手順を共有し、誰が修正しても同じルールで管理できる状態にしておくことが大切です。
62.5%指定やem混在時の注意点
実務では、rem の計算を分かりやすくするために html { font-size: 62.5%; } を利用するケースがあります。
ただし、この方法を採用する場合は、外部の CSS フレームワークやプラグインが標準の 16px を前提としている場合、表示サイズに影響する可能性があります。
導入する環境との相性を確認することが重要です。
また、em など親要素を基準にする単位を rem と混在させる場合も注意が必要です。
em の継承が複雑になると、意図しないサイズ計算が発生する可能性があるため、使用する単位のルールを明確にしておく必要があります。
デザインカンプ（px）との変換が必要になる
Web制作では、デザイナーが作成するデザインカンプが px（ピクセル）で指定されているケースが一般的です。
一方、実装時に rem を採用する場合は、デザインカンプの px指定 を rem へ変換する作業が必要になります。
この変換作業が、rem を導入する際の手間の一つです。
pxからremへの変換が必要になる
例えば、デザインカンプで本文サイズが 16px、見出しが 32px と指定されている場合、rem で実装するには基準となる値に合わせて変換する必要があります。
ブラウザ標準の 16px を基準にする場合は、
・16px → 1rem
・32px → 2rem
・24px → 1.5rem
のように計算します。
また、プロジェクトによっては html { font-size: 62.5%; } を設定し、1rem を 10px 相当として管理する場合もあります。
ただし、変換方法がプロジェクトごとに異なると、CSS内 の rem値 が不統一になり、後から修正や管理がしづらくなる可能性があります。
変換ルールを決めて管理することが重要
rem を効率的に利用するためには、あらかじめ変換ルールを決めておくことが大切です。
例えば、
・ルートの基準値を何pxとして扱うか
・デザインカンプのpxをどの方法でrem化するか
・文字サイズや余白の単位ルールをどう統一するか
といった基準を制作前に共有しておくことで、デザインと実装のズレを防ぎやすくなります。
Sass（SCSS）の関数や VS Code の拡張機能、px から rem への変換ツールなどを利用すると、変換作業を効率化できます。
rem は長期的なサイズ管理に優れた単位ですが、導入時には px からの変換ルールを明確にすることが、保守しやすい CSS設計 につながります。
小さなUI要素ではpxの方が適している場合がある
rem は文字サイズや大枠の余白管理に適した単位ですが、Webサイト を構成するすべての要素を rem で指定する必要はありません。
特に、小さな UI要素 や装飾など、サイズを一定に保ちたい要素では、px を使用した方が意図した見た目を維持しやすい場合があります。
border
境界線（border）は、一般的に 1px や 2px などの固定値で指定されます。
例えば、border: 1px solid #ccc; のような細い線を rem で指定すると、html要素 の font-size 変更に合わせて線の太さも変化します。
そのため、本来は一定の太さで表示したい境界線まで変わってしまい、デザインの印象が変化する可能性があります。
さらに、rem では 0.0625rem のような小数値になることも多く、ブラウザの表示倍率やデバイスの解像度によっては、線がぼやけて見えたり、意図した太さで表示されなかったりする場合があります。
アイコン
SNS アイコンや矢印などの小さなアイコンも、px 指定が適していることが多くあります。
これらを rem で指定すると、文字サイズの変更に合わせてアイコンも拡大・縮小されます。
その結果、周囲とのバランスが崩れたり、レイアウトに影響したりする可能性があります。
特に固定サイズで表示したいアイコンは、px で管理した方がデザインを維持しやすくなります。
装飾
box-shadow のぼかし量や位置、区切り線、ドット線などの細かな装飾も、px で指定されることが一般的です。
これらは文字サイズと連動させる必要がないことが多く、固定値で管理した方がデザインの再現性を保ちやすくなります。
remを使いすぎると管理が複雑になる
rem はサイト全体のサイズを統一しやすく、レスポンシブ対応や保守性の向上にも役立つ便利な単位です。
しかし、「すべての CSS を rem で指定すればよい」というわけではありません。用途を考えずに rem へ統一すると、かえって管理が複雑になる場合があります。
rem は html要素 の font-size を基準としてサイズが決まるため、基準値を変更すると、rem で指定したすべての要素に影響します。
例えば、「文字を少し大きくしたい」という目的で html要素 の font-size を変更したところ、ボタンの高さやカードの余白、アイコン周辺の余白まで一斉に大きくなり、レイアウト全体の確認や調整が必要になることがあります。
また、CSS内 の数値が 1.125rem や 2.375rem のような値で管理されていると、それが実際に 何px 相当なのかを都度計算しなければならない場面もあります。
デザインカンプが px で作成されている場合は、修正やデバッグの際に変換が必要となり、作業効率が下がることがあります。
このような理由から、rem は便利な単位である一方、すべての要素を rem で統一するのではなく、用途に応じて適切な単位を選択することが重要です。
remとpxの使い分け目安
rem と px は、どちらか一方が優れているというものではありません。それぞれ異なる特性を持っているため、用途に応じて使い分けることが大切です。
一般的な Web制作 では、文字サイズや余白など、ユーザーの設定や画面サイズに応じて柔軟に変化してほしい要素には rem を使用し、ボーダーやアイコンなど、一定のサイズを維持したい要素には px を使用するケースが多くあります。
このように単位を適切に使い分けることで、デザインの統一感を保ちながら、保守性やアクセシビリティにも配慮した CSS設計 がしやすくなります。
使い分けの目安は、次のとおりです。
| 使用場所 | 推奨単位 | 理由 |
|---|---|---|
| 本文・見出しのテキスト | rem | ユーザーのブラウザ設定（アクセシビリティ）に対応しやすく、サイト全体の文字サイズを管理しやすいため |
| margin・padding（余白） | rem | 文字サイズとの比率を維持しやすく、デザイン全体の統一感を保ちやすいため |
| レイアウト調整（幅・高さなど） | rem | 文字サイズとのバランスを保ちながら、全体のスケールを調整しやすいため |
| border（境界線） | px | 線幅を一定に保ち、細い線の見え方を安定させるため |
| アイコン・装飾（影・区切り線など） | px | サイズや細かなデザインを固定し、見た目のバランスを維持しやすいため |
| 1px単位の細かな調整 | px | ブラウザの計算によるズレを抑え、意図した表示を維持しやすいため |
なお、これはあくまで一般的な目安であり、プロジェクトの設計方針やデザインの要件によって適した単位は異なります。
重要なのは、「すべてをremにする」「すべてをpxにする」といった考え方ではなく、それぞれの特徴を理解し、要素の役割に応じて適切な単位を選択することです。
こうしたルールをあらかじめ決めておくことで、複数人での開発や長期的な運用でも、保守しやすい CSS設計 につながります。
remを使う際に意識したいポイント
rem は、サイト全体のサイズ管理やレスポンシブ対応に役立つ便利な CSS単位 です。
ただし、実務では単純に rem へ置き換えるのではなく、制作環境や運用方法を考慮して利用することが重要です。
remの基準値を理解してから利用する
rem は html要素 の font-size を基準に計算されるため、基準値が変わると指定したサイズも変化します。
そのため、実装前に現在のプロジェクトでどの基準値を採用しているのかを確認しておくことが大切です。
特に、既存サイトの改修や 外部CSS を利用する場合は、想定している rem の計算方法と異なる可能性があるため注意が必要です。
数値ではなく「役割」で単位を判断する
CSS の単位を選ぶ際は、「remを使うかpxを使うか」ではなく、その要素がどのような役割を持つかで判断すると管理しやすくなります。
例えば、文字サイズやコンテンツ間の余白など、全体のバランスに関わる部分は rem との相性が良く、見た目を固定したい細かな要素は px が適しています。
単位ごとの特徴を理解し、目的に合わせて選択することが重要です。
後から変更することを考えて設計する
Webサイト は公開後も修正や機能追加が発生します。
そのため、制作時だけでなく、数ヶ月後や数年後に別の担当者が修正することも考えて CSS設計 を行う必要があります。
rem を利用する場合も、独自のルールを増やしすぎず、誰が見ても理解しやすい基準で管理することが大切です。
rem は、正しく使えば効率的で保守性の高い CSS設計 につながる単位です。
重要なのは、rem を採用すること自体ではなく、プロジェクトの目的に合わせて適切に設計することです。
