CSSのフォントサイズを変更する方法と単位の違いをやさしく解説！初心者にもわかる文字サイズの基礎

フォントサイズを変更する方法と単位の使い分け（px, em, rem）

先生と生徒の会話形式で理解しよう

生徒

「CSSで文字の大きさを変えるにはどうすればいいですか？」

先生

「文字の大きさは、CSSのfont-sizeというプロパティを使って簡単に変更できますよ。」

生徒

「pxとかemっていう単位も見たことあるけど、何が違うんですか？」

先生

「いいところに気づきましたね。単位によって文字の大きさの決まり方が変わってくるんです。順番に解説していきましょう！」

1. CSSでフォントサイズを変更する基本的な方法

CSSでは、font-sizeというスタイルプロパティを使って、文字の大きさを指定します。とてもよく使う基本的なプロパティなので、しっかり覚えておきましょう。

実際に、文字のサイズを指定する簡単なHTMLとCSSの例を見てみましょう。


<style>
p {
    font-size: 20px;
}
</style>

<p>これは文字サイズが20ピクセルの段落です。</p>

ブラウザ表示

このように、font-sizeで数値と単位をセットで指定するだけで、文字サイズをコントロールできます。

2. よく使われる3つの単位：px、em、remとは？

フォントサイズを指定する時に使う単位には、いくつかの種類があります。ここでは、px、em、remの3つの単位の意味と違いについて、初心者にもわかりやすく説明します。

2-1. px（ピクセル）とは？

pxは「ピクセル」と読みます。画面上の点の数を表します。例えば、font-size: 16px;と書けば、文字の大きさは16ピクセルになります。

ピクセルは絶対的な大きさなので、どこに使っても同じサイズになります。スマホやパソコンでも見た目の大きさが変わりにくいので、初心者のうちは扱いやすい単位です。

2-2. em（エム）とは？

emは、その要素が持つ親要素のフォントサイズを基準として決まります。例えば、親のフォントサイズが16pxで、font-size: 2em;と書くと、2倍の32pxになります。

親のサイズに影響されるので、階層が深くなると予想外に大きくなったり、小さくなったりすることもあります。

2-3. rem（レム）とは？

remは「ルートem」の略です。ページ全体の基準となるルート要素（通常はhtmlタグ）に設定されたフォントサイズを基準にサイズが決まります。

たとえば、htmlタグでfont-size: 16px;と指定しておけば、font-size: 1.5rem;と書くと24pxになります。

remは、常に同じ基準に従うため、サイズの計算がしやすく、最近はremが推奨されるケースも増えています。

3. 単位ごとの使い分けのコツ

それぞれの単位には特徴があり、使い分けが大切です。初心者の方でも分かりやすいように、用途別におすすめの使い方を紹介します。

px：固定のサイズで表示したいときにおすすめ。見た目が崩れにくい。
em：ボタン内や一部分のテキストなど、親のサイズに応じて変化させたいときに使う。
rem：全体のデザインを一括で調整しやすく、レスポンシブ対応にも便利。

例えば、以下のように使い分けると良いでしょう。


<style>
html {
    font-size: 16px;
}
h1 {
    font-size: 2rem; /* 基本サイズの2倍 → 32px */
}
p {
    font-size: 1em; /* 親要素のサイズと同じ */
}
.small-text {
    font-size: 12px; /* 固定サイズで小さく表示 */
}
</style>

<h1>大見出し（2rem）</h1>
<p>これは普通の段落（1em）です。</p>
<p class="small-text">これは小さな文字（12px）です。</p>

ブラウザ表示

4. 実際のウェブサイトではどう使う？

プロの現場では、remを基本にして全体のサイズを設計し、emで部分的な調整をすることが多いです。pxは一部の装飾や確定サイズに使うというように、役割を分けて使われます。

初心者の方は、まずpxで大きさを指定して感覚を掴み、次にremを使ってみると理解が深まりやすいです。

5. まとめて比較してみよう！

最後に、同じ数値でも単位が違うとどう見えるのか、比較できるサンプルを見てみましょう。


<style>
html {
    font-size: 16px;
}
.px-text {
    font-size: 24px;
}
.em-text {
    font-size: 1.5em;
}
.rem-text {
    font-size: 1.5rem;
}
</style>

<p class="px-text">24px（ピクセル）で指定した文字</p>
<p class="em-text">1.5em（エム）で指定した文字</p>
<p class="rem-text">1.5rem（レム）で指定した文字</p>

ブラウザ表示

このように、同じ「1.5」でも、単位が違うと基準も変わります。実際に試して見比べることで、理解が深まりますよ。