CSSでフォントサイズを指定する方法｜4種類の単位についても丁寧に解説

（最終更新日：2023年11月）

✔以下のような方に向けて書かれた記事です

「CSSでフォントサイズを調整する方法が知りたい」
「CSSのフォントサイズの指定方法を理解したい」
「具体的なCSSのフォントサイズの例を見たい」

✔当記事でお伝えする内容

• CSSフォントサイズの基本概念
• フォントサイズを変更する記述方法と応用例
• 実際のCSSフォントサイズ変更の実例

当記事では、CSSフォントサイズの基本から応用的な使い方まで、具体的な例を交えて詳しく説明していきます。

ぜひ最後までご覧ください。

CSSの基本構文

次に、CSSでフォントサイズを設定する基本的な構文について説明します。

• フォントサイズの指定方法
• CSSでフォントサイズの重要性

フォントサイズの指定方法

CSSでフォントサイズを指定するには、font-sizeプロパティを使用します。

例えば、フォントサイズを16pxに設定したい場合は、以下のとおりです。

body {
    font-size: 16px;
}

この設定により、body要素内のすべてのテキストのフォントサイズが16pxに設定されます。

なお、単位については後述する各種単位を参照してください。

CSSでフォントサイズの重要性

CSSでフォントサイズを適切に設定することは、ウェブサイトの可読性やユーザビリティを高めるために不可欠です。

フォントサイズが小さすぎると読みにくくなり、大きすぎると情報が見切れたり、視覚的に圧迫感を与えたりする可能性があります。

また、フォントサイズはレスポンシブデザインにおいても重要な要素。

デバイスのスクリーンサイズに応じて動的に変化させることで、ユーザー体験の最適化が可能です。

フォントサイズ単位の解説

ここでは、CSSで使用できるフォントサイズの単位について詳しく解説します。

• ピクセル (px)
• パーセント (%)
• em
• rem
• 単位の使い分け

ピクセル (px)

ピクセルは、最も一般的に使用されるフォントサイズの単位です。

画面上の一点を表すため、ピクセル単位で指定した場合、デバイスによらず一定のサイズが確保されます。

しかし、ユーザーがブラウザのテキストサイズを調整してもピクセル単位のフォントサイズは変わりません。

視力に問題があるユーザーなどは読みにくくなる可能性があるので注意しましょう。

パーセント (%)

パーセント (%) は、親要素のフォントサイズに対する相対的なサイズを指定します。

例えば、親要素のフォントサイズが16pxで、子要素のフォントサイズを50%に設定した場合、子要素のフォントサイズは8pxです。

これにより、サイト全体のフォントサイズを一元的に変更することが容易になります。

em

em も親要素のフォントサイズに対する相対的なサイズを指定します。

1emは親要素のフォントサイズと同等で、0.5emなら親要素の半分のサイズ、2emなら親要素の2倍のサイズ、です。

emは親要素の影響を受けるため、ネストが深い場合は計算が複雑になることがあります。

rem

remは、html要素（ルート要素）のフォントサイズに対する相対的なサイズを指定します。

1remはhtml要素のフォントサイズと同等で、0.5remならhtml要素の半分のサイズ、2remならhtml要素の2倍のサイズとなります。

html要素のフォントサイズを変えるだけで、全体のサイズ感を調整できるため、デザインの変更が容易です。

単位の使い分け

単位の使い分けは、プロジェクトの要件や目標によります。

ピクセルは確定のサイズが必要な場合や、デザインが固定されている場合に有用です。

一方、パーセントやem、remは、レスポンシブデザインや、ユーザーの設定に柔軟に対応する場合に役立ちます。

以下は具体的な使用場面の例です。

• rem：全体の調整が容易なため大きなレイアウトで使われる
• em：親要素に依存するため、コンポーネントの中での相対的なサイズ調整に使われる
• パーセント：親要素に対する相対値なので、親子関係の要素の間で使われる

フォント関連のCSSプロパティ

こちらでは、フォントサイズ以外のフォント関連のCSSプロパティをいくつか取り上げ、その使用法について解説します。

CSSは文字の見た目を制御するための多くのプロパティを提供しているのです。

• font-family（フォント種類の指定）
• color（文字色の指定）

font-family（フォント種類の指定）

font-familyプロパティを使って、テキストに使用するフォントの種類を指定できます。

指定できる値はフォント名で、複数のフォントをカンマで区切った列挙が可能。

最初のフォントが使用できない場合、次に指定されたフォントが使用されます。

なお、フォント名が空白を含む場合は引用符で囲むのが必須です。

color（文字色の指定）

colorプロパティは、テキストの色を指定するために使用します。

値は以下のいずれかが使用可能です。

• 色名（例：red）
• RGB値（例：rgb(255,0,0)）
• 16進数の色コード（例：#FF0000）

colorプロパティにより、読みやすさや視覚的な強調を加えることが可能です。

フォントサイズ設定の実践例

具体的にどのようにフォントサイズを設定するのか、具体的な例を通じて見ていきましょう。

• CSSとHTMLの連携
• 実際のフォントサイズの設定例

CSSとHTMLの連携

CSSを用いてフォントサイズを設定するためには、対象となるHTML要素に対してスタイルを適用します。

基本的な方法としては、以下の3つです。

• HTML要素に直接スタイルを指定するインラインスタイル
• HTML内でスタイルをまとめて記述する内部スタイルシート
• 別ファイルにスタイルを記述する外部スタイルシート

通常、メンテナンス性を考慮し、外部スタイルシートが使用されます。

実際のフォントサイズの設定例

具体的な例として、次のようにCSSを用いてフォントサイズを設定することができます。

body {
  font-size: 16px;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

.small {
  font-size: .8em;
}

この例では、body要素全体のフォントサイズを16pxに設定しています。

注意点と対策

CSSでフォントサイズを設定する上で注意すべき点とその対策について見ていきましょう。

• 単位の指定時の注意
• レスポンシブデザインへの対応

単位の指定時の注意

単位を指定する際には、用途や制約を理解した上で適切な単位を選ぶことが重要です。

pxは固定サイズなので、ユーザーの設定やデバイスの解像度に影響されませんが、スケーラビリティが低いというのが欠点です。

一方、emやremは相対的なサイズを表すので、元となるサイズに依存します。

際には各単位の特性を理解し、適切に使い分けることが求められます。

レスポンシブデザインへの対応

レスポンシブデザインは、さまざまなデバイスや画面サイズに対して適切に表示されるデザインのこと。

フォントサイズを設定する際には、これを考慮することが重要です。

具体的には、メディアクエリを使用して、特定のブレークポイントでフォントサイズを変更が一般的です。

body {
  font-size: 16px;
}

@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

この例では、画面の幅が768px以上の場合、body要素のフォントサイズを18pxに変更しています。

これにより、大きな画面での視認性を保てます。

まとめ

最後に、今回学んだ内容を簡潔にまとめ、さらなる学習の指針を提供します。

特に以下のトピックについて詳しく説明します。

• CSSフォントサイズ変更のポイント
• 初心者でも綺麗なデザインを作ろう

CSSフォントサイズ変更のポイント

CSSでフォントサイズを変更する際のポイントは、適切な単位を選ぶこと、そしてそれが適用される範囲を理解することです。

単位にはそれぞれ特性があり、一部は相対的なサイズを表します。

そのため、要素の階層関係やレスポンシブデザインを考慮することが重要となります。

初心者でも綺麗なデザインを作ろう

CSSの知識はウェブページのデザインを豊かにし、ユーザビリティを高めるために重要です。

今回学んだ内容を活用して、初心者でも綺麗なデザインを作り上げましょう。

常に新しい技術や手法を学び続けることで、更に洗練されたデザインを実現できます。