ピクセルからremへ — CSSユニット変換を一度マスターすれば迷わない
📷 Pexels / Pexelsピクセルからremへ — CSSユニット変換を一度マスターすれば迷わない
pxとrem、emの違いをわかりやすく解説。アクセシブルで保守しやすいCSSを書くためのユニット変換の考え方と実践的なワークフローを紹介します。
デザインカンプには必ず「px」で数値が書いてあります。font-size: 18px、padding: 24px、margin-top: 40px。ところがCSSを書こうとすると、「これはrem に変換すべきか？ それともpxのままでいいのか？」という疑問が頭をよぎります。
この迷いは多くの開発者が経験するものです。pxとremの使い分けを理解すると、アクセシブルで保守しやすいスタイルシートが自然と書けるようになります。
そもそもなぜremを使うのか
CSSのユニットには「絶対単位」と「相対単位」があります。pxは絶対単位——1pxは画面上の1つのピクセルに対応し、何があっても変わりません。
remは相対単位です。"root em"の略で、HTMLドキュメントのルート要素（htmlタグ）に設定されたフォントサイズを基準にします。ブラウザのデフォルトは16pxなので、特にカスタマイズしていなければ：
- 1rem = 16px
- 0.875rem = 14px
- 1.5rem = 24px
- 2rem = 32px
「16で割るだけなら電卓でできる、わざわざremを使う意味は？」と思うかもしれません。意味はアクセシビリティにあります。
ユーザーの中には、ブラウザのデフォルトフォントサイズを大きく設定している人がいます。視力の低下や読みやすさへの配慮から、20px、24pxと設定している人も珍しくありません。pxでレイアウトを作ると、そのユーザー設定は完全に無視されます。remで作ると、ユーザーが設定したフォントサイズに比例して全体が拡大し、意図通りに見えます。
Webアクセシビリティガイドライン（WCAG）でも、テキストサイズはユーザーが変更できるように設計することが求められています。remはその要件を自然に満たす手段です。
px・rem・emの使い分け
rem を使うべき場面：
font-size（本文、見出し、ボタンラベルなど）margin、padding（レイアウトの間隔）width、max-width（コンテナの幅）line-height（数値またはremで指定する場合）
px を使うべき場面：
border-width（border: 1px solidは定番）box-shadowのぼかし・広がり（視覚的な微調整）outline、border-radiusの細かい指定- アイコンや装飾的な要素の固定サイズ
em を使う場面（限定的）：
- コンポーネント内でフォントサイズに比例させたいpadding（例：ボタンの
padding: 0.5em 1em） - メディアクエリの
min-width（ユーザーのズームに追従させたい場合）
emは親要素のサイズを基準にするため、ネストが深くなると計算が複雑になりがちです。font-size: 1.2emの要素の中にfont-size: 1.2emの子要素があると、実際のサイズは1.44倍になります。意図的に使う場面以外では、remの方が予測しやすく安全です。
変換の計算方法
基本の公式は単純です：
rem値 = px値 ÷ ベースフォントサイズ
デフォルト16pxベースでの変換例：
| px値 | rem値 |
|---|---|
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
頻繁に使うサイズは覚えてしまうものですが、16px = 1rem以外はなかなか記憶に残らないもの。変換ツールを手元に置いておくのが現実的です。
62.5%ハックについて
Web開発のコミュニティでよく語られるテクニックとして「62.5%ハック」があります：
html {
font-size: 62.5%; /* 16px × 0.625 = 10px */
}
body {
font-size: 1.6rem; /* = 16px */
}
ベースを10pxにすることで、計算がpx ÷ 10になり直感的になります。14pxなら1.4rem、24pxなら2.4remと、小数点の計算がシンプルになります。
ただし、このアプローチには批判もあります。ユーザーがブラウザのフォントサイズを大きくしても、htmlに固定の62.5%を設定することで相殺されてしまう場合があるためです（ブラウザのデフォルトが16pxである前提での62.5%なので、ユーザーが20pxに変えると62.5%は12.5pxになり、期待した10pxになりません）。
実際のアクセシビリティへの影響は限定的という意見もありますが、正確なアクセシビリティを重視するプロジェクトでは採用しない方が安全です。
PixelRemConverterの使い方
PixelRemConverterを開くと、シンプルなインターフェースが現れます：
- 変換したいpx値を入力する — テキストフィールドにpx値を入力するだけで、対応するrem値が即座に表示されます。
- ベースサイズを設定する — デフォルトは16pxですが、プロジェクトのルートフォントサイズに合わせて変更できます。
- 変換テーブルを確認する — よく使うサイズの変換表が一覧で表示され、デザインカンプのpx値を素早くremに変換できます。
- 逆方向の変換も可能 — rem値からpx値への逆変換もサポートしています。
デザインカンプを見ながらCSS実装を進めるとき、このツールを開いておくと作業がスムーズになります。
実際のプロジェクトでの活用例
Figmaでデザインされたコンポーネントを実装する場面を想像してください。デザインカンプには：
- タイトル：
font-size: 28px - サブタイトル：
font-size: 16px - カード余白：
padding: 24px - ボタンテキスト：
font-size: 14px - ボーダー：
border: 1px solid
これを変換すると：
.card-title {
font-size: 1.75rem; /* 28px */
}
.card-subtitle {
font-size: 1rem; /* 16px */
}
.card {
padding: 1.5rem; /* 24px */
border: 1px solid #e2e8f0; /* pxのまま */
}
.button {
font-size: 0.875rem; /* 14px */
}
ボーダーだけpxのままにしているのがわかります。「1pxのボーダーは常に1pxであるべき」という意図が明確で、フォントサイズが変わっても細さは維持されます。
保守性について
remを使うもう一つの利点は、ルートフォントサイズを一箇所変えるだけでサイト全体の比率が変わることです。モバイルでは少し小さく、デスクトップでは少し大きくしたい場合：
html {
font-size: 14px;
}
@media (min-width: 1024px) {
html {
font-size: 16px;
}
}
これだけで、remで書いた全要素が比例して変化します。個別要素にメディアクエリを書く手間が大幅に減ります。
関連ツール
CSSを書くときによく一緒に使われるツール：
CSSユニットコンバーター — px・rem以外にも、vw、vh、%など様々なCSSユニットの変換に対応しています。
CSSグラデーションジェネレーター — background-sizeなどでremを使う場面でも役立ちます。
まとめ
px対remの議論は単純な「どちらが正しい」という話ではなく、要素の役割によって適切なユニットが異なります。フォントサイズや余白はrem、細かい装飾的な要素はpxというガイドラインを持っておくと、迷わず実装できます。
デザインカンプからCSS実装に移る作業は地味ながら頻繁に発生します。PixelRemConverterを手元に置いて、変換の手間を最小限にしてください。