Web開発において、テキストのサイズを適切に設定することは、デザインの美しさやユーザビリティに大きな影響を与えます。本記事では、CSSのfont-sizeプロパティの基本から、実践的な使い方までを解説します。
Contents
font-sizeの基本
font-sizeプロパティは、テキストのサイズを指定するためのCSSプロパティです。値の指定方法には以下のようなものがあります。
絶対値（px）
p {
font-size: 16px;
}ピクセル単位（px）は、絶対的なサイズを指定するため、デザインが固定される場面で使いやすいですが、ユーザーの環境によるスケーリングの影響を受けません。
相対値（em, rem, %）
/* em - 親要素のfont-sizeを基準にした相対サイズ */
p {
font-size: 1.2em;
}/* rem - ルート要素（html）のfont-sizeを基準にした相対サイズ */
p {
font-size: 1.2rem;
}/* % - 親要素のフォントサイズに対する割合 */
p {
font-size: 120%;
}上の3つとも相対的な大きさが1.2倍になります。
ビューポートに基づく単位（vw, vh）
h1 {
font-size: 5vw;
}ビューポート（画面に映っている部分）の幅（vw）や高さ（vh）に対して動的にサイズを調整することができます。
100vw，100vhで画面と同じ大きさになります。
font-size; 100vw:で画面いっぱいに一文字が映し出されます。
2. font-sizeを適切に設定するコツ
remをベースに設計する
remはルート要素（html）のフォントサイズに依存するため、全体のスケールを一括で調整しやすくなります。
html {
font-size: 16px;
}
p {
font-size: 1.2rem; /* 19.2px = 16 × 1.2 */
}メディアクエリでレスポンシブ対応
デバイスの幅に応じてフォントサイズを変更することで、可読性を向上させることができます。
body {
font-size: 16px;
}
@media (max-width: 768px) {
body {
font-size: 14px;
}
}横幅が768pxの画面の時はフォントのサイズが変わります。
クランプ（clamp()）を活用する
clamp()を使うことで、最小・最大サイズを設定しながら、可変サイズを指定できます。
p {
font-size: clamp(14px, 2vw, 18px);
}この例では、フォントサイズが14px以上18px以下の範囲で、ビューポート幅（vw）に応じて調整されます。
詳しくはこちらへ
3. まとめ
font-sizeの設定は、ユーザビリティやデザインのバランスに直結します。固定値（px）ではなく、remやclamp()を活用することで、柔軟なレスポンシブデザインが可能になります。適切な単位を選び、可読性とデザインの調和を意識しましょう！
コメント