pxとrem、どっちで書けばいいの？──「なんとなく」使い分けていた私（わたくし）が調べた記録
ウェブ制作をしていて「font-size: 24px」と書くか「1.5rem」と書くか、迷ったことはありませんか？ 以前の私（わたくし）は「なんとなくpxが分かりやすいから」とずっとpxばかり使っていました。しかし、「アクセシビリティ（誰にとっても読みやすいこと）」を意識し始めると、remの重要性に気づかされました。このページでは、その時に調べまくって整理した「文字サイズと余白の単位選びの基準」をまとめます。もう「なんとなく」での単位選びは卒業しましょう。
作成者: かたかた / 更新日: 2026年5月26日
ざっくり言うと
動かしたくないものはpx、ユーザーに合わせて伸び縮みしてほしいものはrem。これが基本線です。
たとえばボーダー線の1pxやアイコンの微調整は、ユーザーがブラウザの文字サイズ設定を変えても「この太さで固定してほしい」。だからpx。本文の文字サイズや余白は、ブラウザの設定で文字を大きくしている人にも合わせて伸びてほしい。だからrem。
ちなみに「全部の単位をremにしろ」と言われることがありますが、それは極端です。使い分けが正解です。
よくある実務パターン
| 場面 | おすすめ | 理由 |
|---|---|---|
| 本文テキスト | rem | 利用者の文字サイズ設定に追従しやすい |
| 余白・マージン | rem | 文字が大きくなったときに全体のレイアウト比率を保ちやすい |
| 1px / 2px の罫線 | px | 意図した太さをシャープに保ちやすい |
| 小さなアイコンの微調整 | px | ズレが見えやすいので固定値が扱いやすい |
1rem = 16px？10px？──ここが一番混乱するところ
ブラウザのデフォルトでは、1rem = 16pxです。だから24px = 1.5rem、32px = 2rem。
ここまではいい。問題は14px。14 ÷ 16 = 0.875rem。暗算がしんどい。
だからhtml { font-size: 62.5%; } にして 1rem = 10px にする方法がある。これなら14px = 1.4remで計算が楽。
ただし！複数人でコードを触る時はこのルールを共有してないと大カオスになります。「え、1remって16pxじゃないの？」って人が混ざるとレイアウトが全てズレます。個人開発なら好きなほうでいい。チームなら先に決めてREADMEに書く。
やりがちなミス
文字だけremにして余白はpxのまま
これが一番多い。ブラウザの文字サイズを大きくした人が見たとき、文字は大きくなるのに余白はそのままで窮屈になる。文字と余白は同じ単位で揃える。
「1rem = 10pxだよね？」を書かない
あとから入った人が16px前提で書いて全部ズレる、という事故が起きます。READMEかスタイルガイドに書いておくだけで防げるので、忘れずに。
KatakataLabの「px ⇔ rem 変換ツール」はここが便利！
「このデザインの14pxって何remだっけ？」「0.875remって何ピクセル？」と迷ったときに、秒速で変換できるのがKatakataLabの変換ツールです。
💡 ここが超便利！
- 双方向で一瞬でリアルタイム変換：pxを入力すればremが、remを入力すればpxが、キーを叩くたびにその場でリアルタイムに計算されます。
- 「16px基準」も「10px基準」もワンタップ切り替え：デザインに合わせてルートの基準フォントサイズを変更できるため、どんなプロジェクトのCSS設計にもフィットします。
- 文字サイズプレビュー機能：数値だけではなく、「このサイズで文字がどう見えるか」が画面上にサンプルテキストとして表示されるため、仕上がりの視覚的なイメージが湧きやすいです。
🙌 こんな人に特におすすめです！
「CSSコーディングをする際に、ピクセル数からremへの計算が面倒でついつい暗算や電卓で時間を取られているコーダー・開発者の方」に最適です。ブックマークに登録しておくだけで、日々のコーディング速度がぐっと上がりますよ！
よくある質問
Q. 全部remにすればいい？
A. それはやりすぎです。ボーダー線を0.0625remとか書いてもコードが読めなくなるだけなので、罫線やシャドウの微調整はpxのほうがいいです。
Q. 16px基準と10px基準、どっち？
A. チーム全員が同じ前提を持てるほうが正解、と言えばそれまでなんですが。1人での開発や、外部のCSSフレームワーク（TailwindCSSなど）と混ぜて開発するなら、世の中で圧倒的多数派の「16px基準」のままでやっておくほうが無難です。