【ご案内】このページの内容は、AI（GPT）が作成したテキストをもとに構成されています。必ずしも完全に正確とは限らないため、学習や制作に利用する際は、公式ドキュメントや信頼できる資料とあわせて確認することをおすすめします。
このページでは、CSS の font-size プロパティを使って、文字の大きさを変更する方法を説明します。
あわせて、見出しタグ h1〜h5 と p、color プロパティも一緒に使っています。
font-size は、「文字の大きさ（フォントサイズ）」を指定するための CSS プロパティです。
よく使われる単位には、px（ピクセル）・em・rem・% などがありますが、まずは px を使って慣れるのがおすすめです。
例：文字を 24 ピクセルにしたいときは、font-size: 24px; と書きます。
ここでは、font-size でよく使われる px, em, rem, % について説明します。
px は「画面上の点（ピクセル）」を単位にした絶対的な大きさです。
たとえば font-size: 16px; は、「16 ピクセルの大きさ」という意味になります。
<p style="font-size: 20px;">20px の文字</p>
これは 20px の文字（px の例）です。
em は「今の文字サイズ（親要素の font-size）」を 1 とした倍率の単位です。
1em は基準と同じ大きさ、2em はその 2 倍の大きさになります。
たとえば、親要素が font-size: 16px; のとき、font-size: 1.5em; は 24px と同じ大きさになります。
<p style="font-size: 1.5em;">親の 1.5 倍の文字</p>
これは 1.5em の文字（親の文字サイズの 1.5 倍）です。
rem の「r」は root（ルート）を表し、「ページ全体の基準（html 要素の font-size）」を 1 とした倍率です。
ふつうは、ブラウザの初期設定で html の font-size は 16px になっています。
その場合、1rem は 16px、2rem は 32px という意味になります。
<p style="font-size: 1.25rem;">基準の 1.25 倍の文字</p>
これは 1.25rem の文字（基準サイズの 1.25 倍）です。
% は、親要素の font-size に対する割合で文字サイズを指定する単位です。
100% は同じ大きさ、150% は 1.5 倍、80% は 0.8 倍という意味になります。
<p style="font-size: 150%;">親の 150% の文字</p>
これは 150% の文字（親の 1.5 倍）です。
HTML タグの中で style 属性を使うと、その要素だけ文字サイズを変えることができます。
書き方の例は次のとおりです。
<h3 style="font-size: 32px; color: red;">大きくて赤い見出し</h3>
実際の表示例は次の見出しです。
このように、style の中で font-size と color を組み合わせて指定できます。
ブラウザは、何も指定しない場合でも、h1〜h5 にそれぞれ違う文字サイズを自動で設定します。
しかし、font-size を使うと、その大きさを自分で決めることができます。
以下は、h1〜h5 に対して font-size を指定した例です。
ページ全体のタイトルなど、最も重要な見出しに使われます。
大きな章やセクションのタイトルとして使われます。
h2 の中に含まれる小さな項目のタイトルとして使われます。
さらに細かく内容を分けたいときに使います。
必要に応じて、より細かい階層構造を表したいときに使います。
このページでは、p 要素の基本の font-size を 16px に設定しています。
font-size: 16px; は、Web ページでよく使われる標準的な文字サイズです。
たとえば、少しだけ大きくしたいときは、次のように書けます。
<p style="font-size: 20px;">少し大きめの本文テキスト</p>
少し大きめの本文テキスト（20px の例）
font-size プロパティを使うと、文字の大きさを自由に指定できます。
px（ピクセル）を使うと、数値どおりの分かりやすいサイズ指定ができます。
h1〜h5 や p と組み合わせて、見出しは大きく、本文は読みやすいサイズにすることで、見やすい Web ページを作ることができます。