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

CSS フロントエンド アクセシビリティ HTML
結論：30秒で px と rem の使い分けをマスターする
  • フォントサイズ・大余白: rem （ブラウザの文字拡大設定に自動追従）
  • 1px 境界線・アイコン固定幅: px （絶対値固定）
  • 変換ツール: 下の Px/Rem 計算機で双方向相互変換

1. オンライン px ⇄ rem 相互変換ツール

デザインツール (Figma / Adobe XD) の px 値を、ブラウザの root font-size (標準 16px) に合わせて rem に変換できます。

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

px

rem

2. px と rem の比較

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

3. 便利な「62.5%」ハックと注意点

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

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

.title {
  font-size: 2.4rem; /* 24px（計算が容易になる） */
}

4. 注意点（ハマりどころ）

  1. html { font-size: 62.5% } によるサードパーティコンポーネントの崩れ
    • 外部ライブラリ（カレンダーやUIキット）が rem 前提で組まれている場合、root フォントサイズを 10px 相当に変更するとライブラリの表示が全体的に小さく崩れる原因になります。