💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
CSSでフォントサイズを指定する方法｜font-size rem
📌
結論
フォントサイズは rem 単位で指定するのがおすすめ
📝 実際のコードはこちら
p { font-size: 1.2rem; }なぜremが推奨されるの？
rem はルート要素（html）のフォントサイズを基準にした相対単位です。ユーザーがブラウザのフォントサイズ設定を変えても、それに追従します。
| 単位 | 基準 | メリット | デメリット |
|---|---|---|---|
px | 固定値 | 正確 | ユーザー設定を無視 |
rem | html要素 | アクセシブル | 慣れが必要 |
em | 親要素 | 柔軟 | ネストで計算が複雑 |
rem が最も推奨されています。1rem = 通常16px なので、1.2rem = 約19.2px となります。
まとめ
・フォントサイズはrem で指定するのがベストプラクティス
・1rem = ルート要素のフォントサイズ（通常16px）
・アクセシビリティに配慮した設計ができる
演習で試してみよう
pのフォントサイズを1.2remにしてみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
pのフォントサイズを1.2remにしてください。
詰まったらヒント
font-size を使います。