font-size
テキストの表示サイズを制御する基本的なCSSプロパティです。px、em、rem、%、vwなど多様な単位で指定でき、レスポンシブデザインではrem単位が推奨されます。font-sizeはem単位やex単位など他の相対単位の基準値としても機能するため、レイアウト全体に影響を与える重要なプロパティです。
概要
テキストの表示サイズを制御する基本的なCSSプロパティです。px、em、rem、%、vwなど多様な単位で指定でき、レスポンシブデザインではrem単位が推奨されます。font-sizeはem単位やex単位など他の相対単位の基準値としても機能するため、レイアウト全体に影響を与える重要なプロパティです。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
html { font-size: 16px; }
body { font-size: 1rem; }
h1 { font-size: 2.5rem; }
small { font-size: 0.875rem; }実務での使いどころ
-
レスポンシブタイポグラフィスケール
html要素にベースフォントサイズを設定し、rem単位で一貫したタイポグラフィスケールを構築します。
注意点
- px固定のfont-sizeはブラウザのフォントサイズ設定を上書きするため、アクセシビリティの観点からrem単位の使用を推奨します。
アクセシビリティ
- WCAG 1.4.4に準拠するため、テキストサイズは200%まで拡大可能であるべきです。rem/em単位を使用してブラウザの拡大機能を妨げないでください。