CSSの単位はpxとremどちらが良い？｜基準16pxの理由と使い分け
CSS フロントエンド アクセシビリティ 初心者
結論
「フォントサイズはrem」、**「境界線（border）やごく小さな余白はpx」**が現代の使い分け。ユーザーがブラウザ設定で文字を大きくした時に、remなら正しく追随します。
なぜ16pxが基準なの？
ほとんどのモダンブラウザのデフォルトフォントサイズが 16px だからです。
1rem = 16px(デフォルト時)
pxとremの比較
| 単位 | メリット・デメリット |
|---|---|
| px (絶対単位) | 直感的でズレないが、ユーザーの文字拡大設定を無視してしまう。 |
| rem (相対単位) | アクセシビリティに強い。基準（html）を変えるだけで全体をスケールできる。 |
🔄 この場でpxと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 管理が容易になっています。ご自身のプロジェクトのルールに合わせて選択しましょう。