よくある悩み｜remとpx、結局どっちを使えばいいの？
「pxで指定したのに、スマホでは文字が小さすぎて読みにくい」「remがいいと聞いたけど、なぜなのかよく分からない」。Web制作を始めたばかりの方や現場で設計ルールに悩むエンジニアにとって、CSSの単位選びは思った以上に重要です。
本記事では、CSSで使われる2つの主要単位「px」と「rem」について、初心者にもわかりやすく仕組みを解説しながら、実務でのベストな使い分けを提案します。アクセシビリティやスケーラビリティを意識した設計をしたい方におすすめです。
記事で得られること
-
「px」と「rem」の仕組み・違いを理解できる
-
実務で使い分ける際の判断基準がわかる
-
スケーラブルなUI設計に役立つ設計パターンが手に入る
CSS単位の基礎｜「rem」と「px」の仕組みをやさしく解説
CSS 単位 pxとは？ピクセルの基本
「px」は画面上のピクセルに基づく絶対単位です。たとえば以下の指定：
font-size: 16px;この指定は、常に16ピクセルの高さで表示され、ユーザー設定には影響されません。
-
メリット：デザイン通りの再現性が高い
-
デメリット：ユーザーの文字サイズ設定や高解像度ディスプレイに対応しにくい
CSS 単位 remとは？ルート基準の相対指定
「rem」は相対単位で、HTMLのルート要素（html）に指定されたfont-sizeを基準にサイズが決まります。
html {
font-size: 16px;
}
p {
font-size: 1.5rem; /* → 24px相当 */
}このようにremを使えば、ルートの指定を変えるだけで全体のスケール調整が可能です。
-
メリット：一括調整やユーザー設定に追従しやすく、スケーラビリティに優れる
-
デメリット：基準値を把握していないとサイズ感がつかみにくい
remとemの違い｜階層で変わるem、一定なrem
-
emは親要素に対する相対指定 → ネストが深いとサイズが崩れやすい
-
remはルート要素に対する相対指定 → 一貫性が保ちやすい
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* → 常に32px */
}このように、remはどの階層にいてもサイズがブレないのが特徴です。
実務で押さえておきたい前提知識
-
ブラウザの初期設定は html { font-size: 16px; } が一般的
-
remはユーザーの文字拡大設定を尊重でき、アクセシビリティの高いUI設計に向いている
-
特にフォントサイズや余白設計にremは有効
remとpxの使い分け｜現場でよくある誤りとその解決法
よくある失敗：すべてpxで記述してしまう
.card-title {
font-size: 24px;
}
.card-text {
font-size: 14px;
}このように全てpx指定すると、ユーザーの拡大設定が無効になり、可読性やアクセシビリティが損なわれます。
改善パターン：remをベースにしてpxで微調整
html {
font-size: 100%;
}
.card-title {
font-size: 1.5rem; /* → 24px相当 */
}
.card-text {
font-size: 0.875rem; /* → 14px相当 */
}remで基本スケールを管理しつつ、必要な部分にだけpxで固定値を補完するのが実践的なアプローチです。
remとpxの棲み分けルール
-
rem：フォントサイズ、マージン、パディング（全体設計の柔軟性を担保）
-
px：ボーダー幅、アイコンサイズ、細部の装飾（見た目の精度を重視）
デザインツールとの連携｜pxからremへの変換に注意
FigmaやAdobe XDなどのデザインツールではpxで設計されることが多いため、実装時にはremへの変換が必要です。
-
実装ルール（例：1rem = 16px）をチーム内で共有しておくと混乱が減る
-
コンポーネント単位での設計ガイドラインに「rem換算表」などを用意するのもおすすめ
まとめと実践アクション
学んだことの整理
-
「px」は固定表示に優れるが、拡大縮小に弱くスケーラビリティに欠ける
-
「rem」は相対指定で、ユーザー設定や全体スケールに柔軟に対応できる
-
実務では「remベース＋必要なpx補完」が最適解
-
「em」は柔軟だがネストで崩れやすく、再利用性を重視するならremが安定
次にやってみよう
-
既存のCSS設計を見直して、remベースへのリファクタリングを検討
-
px→remの変換早見表を作成してチームに共有
-
フォントサイズ・余白の調整にはremを、見た目の調整にはpxを活用する練習をする
CSSの単位は、ただの数値指定ではなく、設計思想そのものに直結します。remとpxの特性を理解し、アクセシブルで拡張性の高いUI設計を実現しましょう。
【外部リンク】
- MDN Web Docs: CSSの長さの単位（px, rem など）
- MDN Web Docs: font-size
- W3C: Web Content Accessibility Guidelines (WCAG) 2.1
