パッとCSSを変更したい
HTML上でもフォントサイズを変えたい
HTMLでフォントサイズを変更するサンプルコードを知りたい
CSSファイルに書き込まずに、HTMLだけでサクッと装飾ができたら便利ですよね。
そこで本記事では、初心者でもわかるようにHTMLでフォントサイズの変更方法をサンプルコードを交えて解説します。
HTMLでフォントサイズを変更する3つのタグ
HTML上でフォントサイズを変えるには、以下のタグがあります。
- <font>タグ
- <big>タグ・<small>タグ
次の章からそれぞれ順番に解説していきます。
<font>タグ
<font>タグは文字の大きさや色、種類を指定できるタグです。大きさを指定するときはsize属性、色はcolor属性、種類はface属性を使用します。
サイズは1〜7で指定し、1が最小で標準は3です。他にも+1や-2を指定すると相対的にサイズ変更もできます。
なお、フォントサイズのデフォルトは16pxで、size属性の3と同様の値です。
<font>タグのサンプルコードは以下の通り。
| <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では非推奨となっており、使用を避けるよう勧められています。
<font>タグの代替案は以下の通り。
| <p style=”font-size: 20px;”>20ピクセル</p> |
HTMLにstyle属性を指定して記述するため、どのタグにどんなスタイルを当てているのかが分かりやすくなります。<font>タグよりも適切な値でフォントサイズを指定できるのがメリットです。
<font>タグよりも利便性が高いですが、レスポンシブ対応やSassが使えないほか、:hoverや:beforeなどの擬似属性も使用できません。どんなデザインにも対応できるコーディングをするには、装飾はCSSでまとめるのが良いでしょう。
色やフォントを変更するには？
・色変更<font color=”色”>
→<font color=”red”>赤</font>（16進数かカラーで指定）
代替案：<p style=”color: red;”>赤</p>
・フォント変更<fontface=”フォント名”>
→<font face=”ＭＳゴシック”>ゴシック</font>
代替案：<p style=”font-family: ‘Noto Sans JP’, serif;”>Noto Sans JP</p>
<big>タグ・<small>タグ
<big>タグはデフォルトの文字サイズを一回り大きくし、<small>タグは一回り小さくするタグです。それぞれデフォルトサイズからプラス1、マイナス1に相当します。
<big>タグは文章を目立たせたいとき、<small>タグは小さい注意書きを記載するときになどに使用されます。
サンプルコードは以下の通り。
| <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に相当する。
まとめ：CSSでフォントサイズを変更しよう
HTMLでフォントサイズは変えられますが、理由がない限りはCSSへ記述するのが基本です。
フォントサイズの変更はCSSで書くようにすると、大きさが自由自在で柔軟にできます。
コーディングの途中で修正の必要性が出てきた場合も、対応はスムーズです。
また、HTML5では<font>タグと<big>タグの使用は推奨されていません。今後、動作しなくなる可能性も考えられます。
トラブルを避けるためにも、HTMLは構造、CSSは装飾と明確に分けて記述し、保守性が高まるコーディングを目指しましょう。
コーディングの最新の情報をキャッチして自信を持ってWeb制作を仕事にしたい人は、カリキュラムがアップデートされ続けるデイトラがぴったりです。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
