CSSのfont-sizeプロパティ：テキストサイズを自在に操る方法

Posted on by

CSSのfont-sizeプロパティは、テキストの大きさを指定するための基本的なプロパティです。
テキストサイズは、視認性やウェブページ全体のデザインに大きな影響を与えます。
この記事では、font-sizeの基本から応用までを詳しく解説します。

font-sizeプロパティとは？

font-sizeプロパティを使用すると、要素のテキストサイズを指定できます。
このプロパティを活用することで、テキストの読みやすさを向上させたり、
デザイン全体を統一感のあるものに調整できます。

基本構文

selector {
  font-size: value;
}

指定可能な値

  • 絶対値（px, ptなど）：固定されたサイズ
  • 相対値（em, %, remなど）：親要素やルート要素を基準にしたサイズ
  • キーワード（small, medium, largeなど）：ブラウザで定義されたサイズ

基本的な使い方

固定サイズを指定

テキストサイズをピクセル単位で指定します。固定サイズは、正確な見た目を確保するのに適しています。

コード例

p {
  font-size: 16px;
}

この設定では、すべての<p>要素のテキストが16ピクセルになります。

相対サイズを指定

相対サイズは、親要素やルート要素のサイズに基づきます。レスポンシブデザインに適しています。

コード例

p {
  font-size: 1.5em; /* 親要素の1.5倍 */
}

body {
  font-size: 100%; /* デフォルトブラウザサイズに基づく */
}

キーワードで指定

キーワードは抽象的な指定方法で、ブラウザで定義されたサイズに基づきます。

主なキーワード

  • xx-small
  • x-small
  • small
  • medium（デフォルト）
  • large
  • x-large
  • xx-large

コード例

h1 {
  font-size: large;
}

テキストサイズの単位

ピクセル（px）

ピクセルは絶対的な単位で、正確なサイズ指定に適しています。

例

p {
  font-size: 20px;
}

ポイント（pt）

印刷でよく使われる単位で、1ポイントは1/72インチ。

例

p {
  font-size: 12pt;
}

相対単位

em

親要素のフォントサイズを基準にしたサイズです。

例

div {
  font-size: 1.2em;
}

rem

ルート要素（通常はhtmlタグ）のフォントサイズを基準にした単位です。

例

html {
  font-size: 16px;
}

p {
  font-size: 2rem; /* 32px */
}

パーセント（%）

基準サイズの割合を指定します。

例

body {
  font-size: 120%;
}

レスポンシブデザインでの活用

メディアクエリで調整

画面サイズに応じてテキストサイズを動的に変更します。

コード例

body {
  font-size: 16px;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

clampを使用

clamp関数を使用して、テキストサイズに最小値、推奨値、最大値を設定します。

コード例

p {
  font-size: clamp(12px, 2vw, 18px);
}
  • 最小値：12px
  • 推奨値：2vw（ビューポート幅の2%）
  • 最大値：18px

実用例

見出しのサイズ調整

異なる見出しに応じたテキストサイズを設定します。

コード例

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.2rem;
}

ボタンのフォントサイズ

ユーザーインターフェースの要素に適切なサイズを設定します。

コード例

button {
  font-size: 1rem;
}

注意書きの小さい文字

目立たせたくない説明文に小さめのフォントサイズを設定します。

コード例

.small-text {
  font-size: 0.8em;
  color: gray;
}

アクセシビリティの考慮

テキストサイズは、アクセシビリティの観点でも重要です。読みやすさを確保するため、以下を考慮します。

最低サイズの設定

  • 最低でも16px以上を推奨。
  • 特にモバイルデバイスでは、さらに大きいサイズが適切。

相対サイズの使用

相対単位（em, rem）を使用すると、ユーザーのブラウザ設定に応じてテキストが拡大されます。

よくある質問

Q1. 固定サイズ（px）と相対サイズ（em, rem）のどちらを使うべきですか？

固定サイズ: レイアウトが固定されている場合や、デザインが重要な場合に適しています。
相対サイズ: レスポンシブデザインやアクセシビリティを重視する場合に適しています。

Q2. font-sizeを変更しても反映されないのはなぜ？

他のスタイル（例：!important）によって上書きされている可能性があります。
親要素やブラウザのデフォルト設定が影響している場合があります。

まとめ

font-sizeプロパティは、ウェブデザインにおいて非常に重要なプロパティです。
固定サイズと相対サイズの使い分けや、レスポンシブデザインの調整を学ぶことで、
より柔軟で使いやすいデザインを実現できます。

特に、アクセシビリティやデバイスの多様性を考慮してテキストサイズを設定することは、
ユーザーフレンドリーなウェブサイトを作るための鍵となります。