【HTML入門】フォントのサイズをfont sizeを使って指定する方法

こんにちは!侍エンジニアブログ編集部のシホです!

HTMLで文字のサイズを変えるとき、

あれ、どうやるんだったっけ?

と悩んでいませんか?今回はHTMLで<font>タグを使って文字のサイズを変える2つの方法を解説します。また、文字の装飾で推奨されているCSSでの文字の大きさの変え方も説明するので、ぜひ参考にしてみてください!

HTMLで文字の大きさを変える

font sizeの使い方

HTMLでは、文字のサイズ・色・種類を変える時に<font>タグを使います。サイズを変える場合は、<font>タグにsize属性で大きさを指定して使用します。

<font size="大きさ"> ~ </font>

サイズの指定方法

サイズ指定方法ですが、size="" に文字のサイズを 1(最小)~7(最大)までの数値で指定します。また、このほかに基準の文字サイズに対して -1、+1 という感じで相対的に指定することもできます。

基準の文字サイズは3になるので、-1 を指定すると文字サイズは2に、+1を指定すると文字サイズは4になります。相対的に指定する場合でも、サイズの結果が1~7の範囲に収まるようにしましょう!

See the Pen odpovb by Shiho Sakai (@shiho-sakai) on CodePen.0

注意点

HTMLでこのように<font>タグを使って文字のサイズを変えることができますが、HTMLは基本的に構造や内容を表すために使うため、文字の装飾などはCSSで記述することが推奨されています。

CSSで文字の大きさを変える

CSSで文字のサイズを変えたいときは、「font-size」プロパティに「サイズ(pxかem)」を指定します。pxの場合は縦のピクセルで大きさを指定するので、ウェブページのメインの文章は15px〜20pxくらいがおすすめです。

emは現在のフォントサイズに対する倍率で指定します。例えば、現在の文字のサイズの設定が10pxのときに2.0emとするとフォントサイズは20pxになります。

See the Pen QraOmo by Shiho Sakai (@shiho-sakai) on CodePen.0

まとめ

いかがでしたでしょうか。HTMLで<font>タグを使うと簡単に文字のサイズを変えることができますが、文字の装飾なのでできるだけCSSを使いましょう。ぜひ実践してみてくださいね!

Writer

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら