CSSの単位はpxとremどちらが良い？｜基準16pxの理由と使い分け

結論

「フォントサイズはrem」、「境界線（border）やごく小さな余白はpx」が現代の使い分け。ユーザーがブラウザ設定で文字を大きくした時に、remなら正しく追随します。

なぜ16pxが基準なの？

ほとんどのモダンブラウザのデフォルトフォントサイズが 16px だからです。

1rem = 16px (デフォルト時)

pxとremの比較

単位	メリット・デメリット
px (絶対単位)	直感的でズレないが、ユーザーの文字拡大設定を無視してしまう。
rem (相対単位)	アクセシビリティに強い。基準（html）を変えるだけで全体をスケールできる。

🔄 この場でpxとremを変換する

基準フォントサイズ (px)

px → rem

rem → px

rem

便利な「62.5%」ハック

16px 基準だと 24px を指定するのに 1.5rem と計算が必要で面倒です。そこで、以下のように設定する手法があります。

html {
  font-size: 62.5%; /* 16px * 0.625 = 10px */
}

body {
  font-size: 1.6rem; /* 16px */
}

.title {
  font-size: 2.4rem; /* 24px。計算がめちゃくちゃ楽 */
}

ただし、現在はTailwind CSSなどのツールが普及し、このハックを使わなくても rem 管理が容易になっています。ご自身のプロジェクトのルールに合わせて選択しましょう。

この記事は フロントエンド・CSS テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。

トピック	記事
CSS Grid vs Flexbox	CSS Grid vs Flexbox｜どっちを使う？使い分けと実戦レイアウト
CSS Container Queries 完全ガイド	CSS Container Queries 完全ガイド｜@container・size vs inline-size・コンポーネント単位レスポンシブ
CSSですりガラス（Glassmorphism）を作る方法	CSSですりガラス（Glassmorphism）を作る方法｜backdrop-filterの使い方
CSSで浮き出るカードを作る	CSSで浮き出るカードを作る｜きれいなbox-shadowの数値設定
Fluid Typographyの作り方	Fluid Typographyの作り方｜vwとclampでレスポンシブ対応を自動化
line-height計算 - 読みやすい行間をフォントサイズから算出	line-height計算 - 読みやすい行間をフォントサイズから算出
Tailwind CSSでデザインシステムの色を管理する方法	Tailwind CSSでデザインシステムの色を管理する方法
色のコントラストチェック	色のコントラストチェック｜color contrastの使い方と注意点
React SSR Hydration Mismatch 原因と修正	React SSR Hydration Mismatch 原因と修正｜Next.js・Astro対応ガイド
HTML Popover API 完全ガイド	HTML Popover API 完全ガイド｜popover・popovertarget・light dismiss・アクセシビリティ
px rem 変換	px rem 変換｜root font-size 基準の計算
Box Shadow CSS 生成	Box Shadow CSS 生成｜Material・Neumorphism

ツール一覧

なぜ16pxが基準なの？

pxとremの比較

🔄 この場でpxとremを変換する

便利な「62.5%」ハック

関連記事