HTMLでフォントサイズを変更するには？初心者向けにかんたん解説

パッとCSSを変更したい
HTML上でもフォントサイズを変えたい
HTMLでフォントサイズを変更するサンプルコードを知りたい

CSSファイルに書き込まずに、HTMLだけでサクッと装飾ができたら便利ですよね。

そこで本記事では、初心者でもわかるようにHTMLでフォントサイズの変更方法をサンプルコードを交えて解説します。

1. HTMLでフォントサイズを変更する3つのタグ
- 1.1. タグ
- 1.2. <big>タグ・タグ
2. HTML上で変更する注意点
3. HTMLでコードが反映しないときの対処法
4. CSSでフォントサイズを変更する
5. まとめ：CSSでフォントサイズを変更しよう
6. 未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！

HTMLでフォントサイズを変更する3つのタグ

HTML上でフォントサイズを変えるには、以下のタグがあります。

タグ
<big>タグ・タグ

次の章からそれぞれ順番に解説していきます。

タグ

タグは文字の大きさや色、種類を指定できるタグです。大きさを指定するときはsize属性、色はcolor属性、種類はface属性を使用します。

サイズは1〜7で指定し、1が最小で標準は3です。他にも+1や-2を指定すると相対的にサイズ変更もできます。

なお、フォントサイズのデフォルトは16pxで、size属性の3と同様の値です。

タグのサンプルコードは以下の通り。

コピー<p><font size="-2">サイズ-2</font></p>
<p><font size="2">サイズ2</font></p>
<p><font size="3">サイズ3</font></p>
<p><font size="+1">サイズ+1</font></p>
<p><font size="5">サイズ5</font></p>
<p><font size="6">サイズ6</font></p>

HTML5では非推奨となっており、使用を避けるよう勧められています。

タグの代替案は以下の通り。

コピー<p style="font-size: 20px;">20ピクセル</p>

HTMLにstyle属性を指定して記述するため、どのタグにどんなスタイルを当てているのかが分かりやすくなります。タグよりも適切な値でフォントサイズを指定できるのがメリットです。

タグよりも利便性が高いですが、レスポンシブ対応やSassが使えないほか、:hoverや:beforeなどの擬似属性も使用できません。どんなデザインにも対応できるコーディングをするには、装飾はCSSでまとめるのが良いでしょう。

色やフォントを変更するには？
・色変更
　→赤（16進数かカラーで指定）
　代替案：赤
・フォント変更<fontface=”フォント名”>
　→ゴシック
　代替案：Noto Sans JP

<big>タグ・タグ

<big>タグはデフォルトの文字サイズを一回り大きくし、タグは一回り小さくするタグです。それぞれデフォルトサイズからプラス1、マイナス1に相当します。

<big>タグは文章を目立たせたいとき、タグは小さい注意書きを記載するときになどに使用されます。

サンプルコードは以下の通り。

コピー<p><big>大きめ</big></p>
<p>デフォルト</p>
<p><small>小さめ</small></p>

<big>タグの使用例も合わせて紹介していますが、HTML5では非推奨タグのため使用は避け、既存コードに使用している場合は更新するのがおすすめです。

これから同じような意味合いのタグを使いたいときの代替案は以下の通り。

コピー<p style="font-size: larger;">大きな文字</p>

少し大きくしたい、小さくしたいときに役立つタグですが、CSSで大きさを管理するときには管理が難しくなってしまうのが懸念点です。

HTML上で変更する注意点

HTMLで文字サイズの変更は可能ですが、HTMLとCSSが同一のファイル内に記載するとコードが複雑になります。

コード管理が難しくなるため、注意が必要です。

HTMLはWebサイトの構造を表すために使う言語で、装飾をする場合はCSSと役割が決まっており、それぞれのファイルへの記述が推奨されています。

HTML上でコード変更の必要がある場合は、必要なコードを消してしまわないように十分に気をつけましょう。

HTMLでコードが反映しないときの対処法

コードを書き換えたにもかかわらず、想定した動きをしない場合は以下を確認してみましょう。

コードのスペルはあっているか
コロンとセミコロンは間違えていないか
閉じかっこはついているか

コードに少しでもミスがあると想定した動きをしないため、書き換えた内容が反映していないときは、落ち着いて上記を確認してみてください。

記述ミスで思うように出力されないことは、よくある原因の一つです。

まずは、しっかりと自分が書いたコードをチェックしてみましょう。

ケアレスミスを減らすには、コードエディタの拡張機能を使用するのがおすすめです。

エラーがあると拡張機能が知らせてくれるため、コーディングの効率も質もグッと上がり、サクサク進められます。

CSSでフォントサイズを変更する

ここまでHTML上でフォントサイズの変更方法を伝えてきましたが、フォントサイズはCSSで変更するのが一般的です。

HTMLとCSSを分けて書くことで、Webサイトのメンテナンスが容易になり、コードが見やすくなるメリットがあります。どこにどんなコードがあるのか探す時間が削減されるため、ページ数が多いWebサイトでも保全や修正の手間が少なく済むでしょう。

フォントサイズの単位
・px：絶対的なサイズを指定する。
・em：親要素のフォントサイズに対する倍率で指定する。たとえば、親要素が16pxの場合、1.5emは24pxに相当する。
・rem：HTMLのルート要素のフォントサイズを倍率で示した単位。親要素を変更すると、自動的にフォントサイズが変更される。
・%：親要素のフォントサイズに対して割合で指定する。たとえば、親要素が16pxの場合、150%は24pxに相当する。