font-size（フォントサイズ）プロパティ
最終更新：2026-09-13
font-size font-size（フォントサイズ）プロパティ
font-size プロパティはテキストのサイズを設定します。絶対キーワード、固定長、em や rem などの相対単位を受け付け、最もよく使われるテキスト装飾プロパティの一つです。
| カテゴリ | |
|---|---|
| 初期値 | medium |
| 継承 | はい |
| 適用対象 | all |
| アニメーションタイプ | font-weight |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | <length> | <percentage>;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | キーワード | 絶対サイズのキーワード |
<length> | タイプ | 固定のフォントサイズ（例: 16px） |
<percentage> | タイプ | 親要素のフォントサイズに対するパーセント |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-size | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： フォントサイズには相対単位（em/rem）を推奨します。これによりテキストはユーザー設定やレスポンシブレイアウトに合わせて拡縮します。
注意： xx-small や x-small のような絶対キーワードは避けてください。ブラウザ間で描画がばらつきます。
❓ よくある質問
QCSS における px、em、rem の単位の違いは何ですか？
Apx はコンテキストに依存しない固定ピクセル値です。em は親要素のフォントサイズに対する相対値で、入れ子で累積します。rem はルート要素（html）に対する相対値で、入れ子の影響を受けません。レスポンシブレイアウトには rem や clamp() を、親要素に対して拡縮させたい場合は em を、ボーダーなどフォントに合わせて拡縮させたくない値には px を使います。
Qブラウザーがウェブページに使用する既定のフォントサイズはいくつですか？
A既定値は medium で、ほとんどのブラウザーでは 16px として描画されます。html { font-size: 62.5% } とすると 1rem が 10px になり、10 の倍数での計算が簡単になりますが、rem を使うすべての要素に影響するため慎重に使用してください。
Qfont-size のパーセント値は親要素に対してどう計算されますか？
Aパーセントは親要素の font-size を基準に解決されます。親が 16px の場合、font-size: 150% は 24px になります。親要素に合わせて比例して拡縮し、em と同様の挙動で、コンテキストに合わせて拡縮したい強調テキストやリストに適しています。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
