【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

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

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

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー