CSSのfontプロパティでフォントのスタイル、サイズ、高さなどを一括設定する方法をわかりやすく解説

font プロパティは、フォントのスタイル、ウェイト、サイズ、行の高さ、フォントファミリーを一度に指定できる、まとめて使用するプロパティです。スタイルやサイズ、行の高さを個別に指定することもできますが、このプロパティを使用すると簡潔に記述できます。

CSS: font の主な値とその効果の一覧

• normal: 通常のフォントスタイルとウェイトを使用します。例: font: normal 16px/1.5 Arial, sans-serif;
• bold: フォントを太字にします。例: font: bold 16px/1.5 Arial, sans-serif;
• italic: フォントをイタリック体にします。例: font: italic 16px/1.5 Arial, sans-serif;
• font-size: フォントのサイズを指定します。例: font: normal 24px/1.5 Arial, sans-serif;
• line-height: 行の高さを指定します。例: font: normal 16px/2 Arial, sans-serif;

CSS: font が効かない時の原因と対策

フォントファミリーが存在しない

指定されたフォントファミリーが利用可能でない場合、ブラウザはフォールバックフォントを使用します。

対策: 複数のフォントファミリーをフォールバックとして指定するか、Webフォントを利用します。

共通するCSSコード

.css-sample-container {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  text-align: center;
  font-family: Arial, sans-serif;
}

表示例

font: normal

通常のフォントスタイルとウェイトを使用します。

HTMLコード

<div class="css-sample-container font-normal">
  通常のフォント
</div>

CSSコード

.css-sample-container.font-normal {
  font: normal 16px/1.5 Arial, sans-serif;
}

表示結果

font: bold

フォントを太字にします。

HTMLコード

<div class="css-sample-container font-bold">
  太字のフォント
</div>

CSSコード

.css-sample-container.font-bold {
  font: bold 16px/1.5 Arial, sans-serif;
}

表示結果

font: italic

フォントをイタリック体にします。

HTMLコード

<div class="css-sample-container font-italic">
  イタリック体のフォント
</div>

CSSコード

.css-sample-container.font-italic {
  font: italic 16px/1.5 Arial, sans-serif;
}

表示結果

font: large

大きなフォントサイズを指定します。

HTMLコード

<div class="css-sample-container font-large">
  大きなフォントサイズ
</div>

CSSコード

.css-sample-container.font-large {
  font: normal 24px/1.5 Arial, sans-serif;
}

表示結果

font: small

小さなフォントサイズを指定します。

HTMLコード

<div class="css-sample-container font-small">
  小さなフォントサイズ
</div>

CSSコード

.css-sample-container.font-small {
  font: normal 12px/1.5 Arial, sans-serif;
}

表示結果

まとめ

• font プロパティは、フォントスタイル、サイズ、ウェイト、行の高さ、フォントファミリーを一括で指定する便利なプロパティです。
• 複数のプロパティを1つにまとめて指定することで、コードが簡潔になります。
• 指定されたフォントが正しく表示されない場合は、フォントファミリーの確認やブラウザのサポート状況を確認しましょう。