CSSのfont-sizeで文字の大きさを指定する方法をわかりやすく解説

2024.09.15
スポンサーリンク

font-sizeプロパティは、テキストの大きさを指定するために使用されます。値は絶対サイズ（pxなど）と相対サイズ（%やemなど）に分かれ、異なる環境やデザインに応じて柔軟に使い分けることができます。

スポンサーリンク

font-sizeの値とその効果の一覧

  • px: 絶対サイズ。ピクセル単位でフォントの大きさを固定します。
  • %: 親要素のフォントサイズに対する相対的なサイズ。
  • em: 現在の要素のフォントサイズに基づいた相対サイズ。
  • rem: ルート要素（通常はhtml）のフォントサイズに基づいた相対サイズ。

注意点と関連情報

相対サイズ（%, em, rem）は、レスポンシブデザインや異なるデバイスに対応する際に役立ちます。一方で、絶対サイズ（px）は厳密なデザインコントロールに向いていますが、拡大縮小に影響を受けにくいため、柔軟性に欠ける場合があります。

font-sizeプロパティが効かない時の原因と対策

ブラウザのデフォルトスタイルの影響

ユーザーのブラウザやデバイスで設定されたデフォルトのフォントサイズが、font-sizeプロパティの効果を上書きすることがあります。特に、ユーザーのアクセシビリティ設定が影響する場合があります。
対策: ユーザーのデフォルト設定を考慮して、相対単位（emやremなど）を使用することで、デバイスやユーザー設定に柔軟に対応するようにしましょう。これにより、異なるデフォルト設定に対してもフォントサイズを適切に調整できます。

他のプロパティの影響

font-sizeプロパティは、他のレイアウトプロパティ（例: transform、scale、zoomなど）によって視覚的なサイズが変わることがあります。これにより、実際のフォントサイズが見た目に反映されない場合があります。
対策: レイアウトプロパティ（transformやzoomなど）がフォントサイズに影響していないか確認し、必要に応じて調整します。特に、フォントサイズが予期せぬ形で拡大や縮小されている場合、これらのプロパティの設定を見直しましょう。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 300px;
  background-color: #f9f9f9;
  text-align: center;
}

.css-sample-text {
  font-family: 'Arial', sans-serif;
}

font-size: 12px

絶対値（12px）でフォントのサイズを指定した例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-size-small">Sample Text</p>
</div>

CSSコード

.css-sample-size-small {
  font-size: 12px;
}

表示結果

Sample Text

font-size: 16px

標準的な絶対値（16px）でフォントのサイズを指定した例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-size-medium">Sample Text</p>
</div>

CSSコード

.css-sample-size-medium {
  font-size: 16px;
}

表示結果

Sample Text

font-size: 24px

大きめの絶対値（24px）でフォントのサイズを指定した例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-size-large">Sample Text</p>
</div>

CSSコード

.css-sample-size-large {
  font-size: 24px;
}

表示結果

Sample Text

font-size: 120%

親要素のフォントサイズに対して120%でフォントのサイズを指定した例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-size-relative">Sample Text</p>
</div>

CSSコード

.css-sample-size-relative {
  font-size: 120%;
}

表示結果

Sample Text

font-size: 1.5em

現在の要素のフォントサイズに対して1.5倍の大きさにした例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-size-em">Sample Text</p>
</div>

CSSコード

.css-sample-size-em {
  font-size: 1.5em;
}

表示結果

Sample Text

font-size: 1.5rem

ルート要素（html）のフォントサイズに対して1.5倍の大きさにした例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-size-rem">Sample Text</p>
</div>

CSSコード

.css-sample-size-rem {
  font-size: 1.5rem;
}

表示結果

Sample Text

まとめ

  • font-sizeは、テキストのサイズを設定するためのプロパティです。
  • 絶対サイズ(px)はデザインを固定化しますが、相対サイズ(%、em、rem)はより柔軟なレイアウトに適しています。
  • 相対サイズは、レスポンシブデザインに役立ち、異なるデバイスやスクリーンサイズに対応しやすい。
  • 最適なフォントサイズの選択は、デザインの用途や視認性の考慮に基づいて行うことが重要です。
スポンサーリンク