CSS Size Guide
CSSのサイズは、先に「よく使う段階」を決めると揃えやすいです
pxをremに変換できても、毎回違う数字を使っていると画面全体は揃いません。ここでは、見出し、本文、余白、ボタンを小さなサイズ表として整理する考え方をまとめます。
作成者: かたかた / 更新日: 2026年5月26日
最初に作ると楽なサイズ表
小さなサイトでも、本文、補足、見出し、余白の基準を決めておくと見た目が安定します。以下のような表を先に作るだけで、CSSを書きながら迷う時間が減ります。
| 用途 | px | rem(16px基準) |
|---|---|---|
| 補足テキスト | 14px | 0.875rem |
| 本文 | 16px | 1rem |
| 小見出し | 20px | 1.25rem |
| 大見出し | 32px | 2rem |
CSS変数に落とす実例
数値を決めたら、使用箇所に直接書き散らさず、役割が分かる変数名へまとめます。本文サイズや余白をまとめて見直せるため、スマホ調整の手戻りを減らせます。
:root {
--text-body: 1rem;
--text-heading: 2rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
}余白も段階にすると崩れにくい
文字サイズだけ整えても、余白が毎回バラバラだと画面は散らかって見えます。8px、16px、24px、32pxのように、よく使う余白を数段階に絞ると調整しやすくなります。
- 近い要素同士は小さめの余白にする
- セクション同士は大きめの余白にする
- カード内の余白は同じルールで揃える
- スマホでは余白を少し詰める
pxのまま残していいもの
すべてをremにする必要はありません。1pxの線、アイコンの微調整、影のぼかし量などはpxのままの方が意図を保ちやすいです。
目安: 読みやすさに関わる文字・余白はrem寄り。見た目の細かい線や位置はpx寄り。迷ったらこの分け方で十分です。
FAQ
Q. CSS変数にしたほうがいいですか？
A. よく使う文字サイズや余白はCSS変数にすると後から直しやすいです。単発の調整値まで全部変数にする必要はありません。
Q. スマホとPCで同じremを使っていいですか？
A. 使えます。ただし、見出しやセクション余白はメディアクエリで少し抑えた方が収まりやすいです。