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

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

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

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

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

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

font sizeの使い方

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

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

サイズの指定方法

サイズ指定方法ですが、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を使いましょう。ぜひ実践してみてくださいね!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

シホ

シホ

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説