最初に押さえる基準
- px は絶対値です。境界線やアイコンの細かい制御では便利です。
- rem は root の文字サイズに連動します。文字サイズや余白、レイアウトスケールに向いています。
- 「利用者の表示設定に追従してほしい要素」は rem、「固定したほうが見た目が安定する要素」は px と考えると整理しやすいです。
よくある実務パターン
| 場面 | おすすめ | 理由 |
|---|---|---|
| 本文テキスト | rem | 利用者の文字サイズ設定に追従しやすい |
| 余白・マージン | rem | 全体のスケールを保ちやすい |
| 1px / 2px の罫線 | px | 意図した太さを保ちやすい |
| 小さなアイコンの微調整 | px | ズレが見えやすいので固定値が扱いやすい |
16px 基準と 62.5% 運用の考え方
標準的なブラウザ設定では root が 16px です。この場合、24px は 1.5rem、32px は 2rem になります。計算に慣れていない段階では、まず 16px 基準のまま設計したほうが意図を共有しやすいです。
一方、`html { font-size: 62.5%; }` として 10px 基準に寄せる運用もあります。数値は直感的になりますが、チーム全員が同じ前提を持っていないとレビューで混乱しやすくなります。
迷ったときの目安: 個人開発や小規模案件なら 16px 基準でも十分です。複数人で細かいスケールを管理したいなら 62.5% 運用を検討すると整理しやすくなります。
変換ミスを減らすコツ
1. 見出しだけ rem、余白だけ px にしない
文字だけ大きくなって余白が追従しないと、表示設定を変えたときに窮屈な UI になります。文字と余白は同じ思想で揃えるほうが安全です。
2. デザインカンプの数値をそのまま打ち込まない
カンプが 14 / 18 / 24 / 32 と飛んでいるときは、実装前にスケール表を作ると後からの調整が楽になります。
3. 「1rem = 10px 前提」を暗黙知にしない
案件途中で root 基準が変わると、既存コンポーネントの整合が崩れます。root 値は README やスタイルガイドに明記したほうが安全です。
変換ツールを使うときのおすすめ手順
とくに見出し・本文・補足文の 3段階だけでも数値を揃えると、見た目の一貫性がかなり上がります。
FAQ
Q. すべて rem に統一すればいいですか？
A. 罫線や細かいアイコン調整まで無理に rem にする必要はありません。追従させたい要素に絞るほうが運用しやすいです。
Q. 余白も rem にするべきですか？
A. 本文サイズに応じて余白も伸びてほしい場合は rem が相性良いです。固定レイアウトを強く維持したい箇所だけ px を使う考え方が現実的です。
Q. 16px 基準と 10px 基準はどちらが正解ですか？
A. 正解はひとつではありません。チームの共有しやすさと既存設計に合わせて決めるのが最優先です。