CSSを使ってWebページの文字サイズを変更したいときに使用するのが、font-sizeプロパティです。
font-sizeを指定すると、見出しを大きくしたり、補足説明の文字を小さくしたりできます。
また、文字サイズはpx・rem・em・%などの単位で指定できますが、それぞれ基準となるサイズが異なります。
この記事では、font-sizeの基本的な書き方から、単位の違い、実際の使用例、注意点まで初心者向けに解説します。
CSSのfont-sizeとは？
font-sizeは、HTMLの文字サイズを指定するCSSプロパティです。
例えば、見出しを大きくしたり、本文の文字サイズを調整したりするときに使用します。
基本的な書き方は次のとおりです。
セレクタ {
font-size: 値;
}
文字サイズを20pxにする場合は、次のように記述します。
p {
font-size: 20px;
}
このCSSを適用すると、pタグで囲まれた文章の文字サイズが20pxになります。
font-sizeは、文字サイズを調整するための基本的なプロパティです。
font-sizeの基本的な書き方
実際にHTMLとCSSを組み合わせて、文字サイズを変更してみましょう。
HTMLの記述例
<p class="small-text">小さい文字です。</p>
<p class="normal-text">標準的な文字です。</p>
<p class="large-text">大きい文字です。</p>
CSSの記述例
.small-text {
font-size: 12px;
}
.normal-text {
font-size: 16px;
}
.large-text {
font-size: 24px;
}
このCSSでは、class属性を使って、それぞれの文章に異なる文字サイズを設定しています。
表示結果
小さい文字です。（12px）
標準的な文字です。（16px）
大きい文字です。（24px）
このように、font-sizeの値を変更するだけで文字の大きさを調整できます。
なお、見出しや段落にはブラウザーやサイト側のCSSが適用されている場合があります。表示結果は、使用している環境によって多少異なることがあります。
font-sizeで使える単位の違い
font-sizeでは、px・rem・em・%などの単位を使用できます。
それぞれの単位には、文字サイズを決める基準が異なるという特徴があります。
| 単位 | 特徴 | 指定例 |
|---|---|---|
| px | CSSピクセルでサイズを指定 | 16px |
| rem | html要素の文字サイズを基準にする | 1.5rem |
| em | font-sizeでは親要素の文字サイズを基準にする | 1.5em |
| % | 親要素の文字サイズを基準にする | 150% |
pxで文字サイズを指定する
pxは、CSSピクセルを単位として文字サイズを指定する方法です。
p {
font-size: 18px;
}
この場合、pタグの文字サイズは18pxになります。
指定する値がわかりやすいため、初心者でも理解しやすい単位です。
ただし、pxは親要素の文字サイズに応じて自動的に変化する単位ではありません。
remで文字サイズを指定する
remは、html要素の文字サイズを基準にする単位です。
html {
font-size: 16px;
}
p {
font-size: 1.5rem;
}
この場合、html要素の文字サイズが16pxなので、pタグの文字サイズは24pxになります。
16px × 1.5 = 24px
remは、親要素に設定されたfont-sizeの影響を受けず、基準となるhtml要素の文字サイズを使って計算されます。
なお、html要素の文字サイズを指定していない場合、ブラウザーの標準設定では16pxであることが一般的ですが、利用者の設定によって異なります。
emで文字サイズを指定する
emは、font-sizeで使用する場合、親要素の文字サイズを基準にします。
<div class="parent-text">
<p>親要素を基準にした文字です。</p>
</div>
.parent-text {
font-size: 20px;
}
.parent-text p {
font-size: 1.5em;
}
親要素の文字サイズが20pxなので、pタグの文字サイズは30pxになります。
20px × 1.5 = 30px
emは親要素の文字サイズに連動するため、要素を入れ子にした場合は、文字サイズが段階的に大きくなることがあります。
%で文字サイズを指定する
%も親要素の文字サイズを基準にします。
.parent-text {
font-size: 20px;
}
.parent-text p {
font-size: 120%;
}
この場合、pタグの文字サイズは24pxになります。
20px × 1.2 = 24px
100%なら親要素と同じサイズ、120%なら1.2倍、80%なら0.8倍になります。
各単位の詳しい違いについては、CSSの単位まとめ（px・%・rem・emの違い）で解説しています。
font-sizeで文字サイズを変更する実践例
ここでは、見出しや本文などに異なる文字サイズを設定する例を紹介します。
見出しと本文の文字サイズを変更する
<div class="sample-article">
<h2>CSSの学習を始めよう</h2>
<p>CSSを使うと文字サイズや色を変更できます。</p>
<p class="note">少しずつ覚えていきましょう。</p>
</div>
.sample-article {
font-size: 1rem;
}
.sample-article h2 {
font-size: 1.5rem;
}
.sample-article p {
font-size: 1rem;
}
.sample-article .note {
font-size: 0.875rem;
}
この例では、見出しを大きくし、本文には標準的なサイズを指定しています。
補足説明には少し小さな文字サイズを設定しています。
表示結果
CSSの学習を始めよう
CSSを使うと文字サイズや色を変更できます。
少しずつ覚えていきましょう。
※この表示例は、html要素の文字サイズが16pxの場合を想定しています。
文字サイズに違いをつけると、見出しと本文の区別がつきやすくなります。
ただし、本文を必要以上に小さくすると読みにくくなるため、実際のページでは読みやすさを確認しましょう。
font-sizeが反映されない原因
CSSでfont-sizeを指定しても、文字サイズが変わらない場合があります。
その場合は、次の項目を確認してみましょう。
CSSの記述に間違いがある
例えば、次の書き方は正しくありません。
p {
font-size: 20;
}
20という数値だけでは、通常のfont-sizeの指定として使用できません。
正しくは単位を付けて記述します。
p {
font-size: 20px;
}
なお、font-sizeでは単位なしの0も指定できますが、文字が表示されなくなるため通常の文章には適していません。
セレクタの指定が間違っている
HTMLで指定したclass名とCSSのセレクタが一致していない場合、設定が反映されません。
HTML：
<p class="sample-text">文字サイズを変更します。</p>
CSS：
.sample-text {
font-size: 20px;
}
classを指定する場合は、CSS側で先頭に「.」を付けます。
ほかのCSSが優先されている
同じ要素に複数のfont-sizeが指定されていると、CSSの優先順位によって別の設定が適用される場合があります。
p {
font-size: 16px;
}
.sample-text {
font-size: 20px;
}
例えば、pタグにsample-textというclassが設定されている場合、通常はclassセレクタの指定が優先されます。
CSSの優先順位については、CSSの優先順位と継承で詳しく解説しています。
CSSファイルが読み込まれていない
外部CSSを使用している場合は、HTMLファイルからCSSファイルが正しく読み込まれているか確認しましょう。
また、CSSを修正した直後はブラウザーに古い内容が残っている場合があります。
その場合は、ページを再読み込みして確認してください。
font-sizeを指定するときの注意点
font-sizeは簡単に使えるプロパティですが、文字サイズを決める際にはいくつか注意点があります。
文字を小さくしすぎない
文字サイズが小さすぎると、スマートフォンなどの画面で読みにくくなります。
本文には読みやすいサイズを使用し、補足説明なども必要以上に小さくしないようにしましょう。
remや%などの相対単位も活用する
remや%は、基準となる文字サイズに応じて大きさが変化します。
特にremは、サイト全体で文字サイズの基準をそろえたい場合に便利です。
ただし、単位をremに変更するだけでスマートフォン対応が完成するわけではありません。
画面幅や余白、レイアウトなども含めて調整する必要があります。
利用者が文字を拡大できるようにする
Webページには、文字を大きくして閲覧する人もいます。
そのため、文字サイズを固定的に考えるのではなく、ブラウザーの文字サイズ設定や拡大表示にも配慮することが大切です。
html要素に固定的なpx指定をするのではなく、利用者の標準設定を活かす方法も検討しましょう。
まとめ
今回は、CSSのfont-sizeを使って文字サイズを変更する方法を解説しました。
重要なポイントは次のとおりです。
- font-sizeは文字サイズを指定するCSSプロパティ
- px・rem・em・%などの単位が使用できる
- remはhtml要素、emと%は親要素の文字サイズを基準にする
- classを使えば特定の文章だけ文字サイズを変更できる
- 文字の読みやすさや拡大表示への対応も重要
初めてfont-sizeを使う場合は、まずpxで文字サイズを変更してみると、設定と表示結果の関係を理解しやすくなります。
基本的な使い方を覚えたら、remやemなどの相対単位も試してみましょう。
実際にHTMLとCSSを書きながら文字サイズを比較すると、それぞれの単位の特徴を理解しやすくなります。
次に読む記事
→ HTML講座トップページへ
→ CSS講座トップページへ
