「fontタグってなんだろう」や「fontタグはどうやって使うの」と悩んでいませんか？
ここでは、fontタグの基本的な使い方やフォントの変更方法まで、初心者向けに分かりやすく解説します。
fontタグは、文字の見た目を変えられる便利なタグです。
ただ最近は、fontタグではなく、別の方法で文字の見た目を変えることが一般的であるため、その方法も合わせてご紹介しますね。
■ 【目次】このページを読んで分かること
- fontタグの基礎知識と使い方
- fontタグの歴史と現在
- CSSを使って文字の見た目を変える方法
- 【まとめ】fontタグとは
|
fontタグの基礎知識と使い方
まずは、fontタグの基礎知識と使い方からお伝えします。
fontタグとは
fontタグは、文字の見た目を変えるためのタグです。
たとえば、文字の色やサイズ、フォントの種類を変えることができます。
色を変える方法
文字の色を変えたいときは、fontタグを使うときに、color属性を使います。
たとえば、文字を赤色にしたいときは、次のように書きます。
■ <font> タグで、文字の色を変更する記述例
|
<font color="red">ホームページに掲載する文章</font>
|
■ ホームページ上の表示
サイズを変える方法
文字のサイズを変えたいときは、size属性を使います。
サイズは、1から7までの数字で指定できます。
たとえば、サイズを大きくしたいときは、次のように書きます。
■ <font> タグで、文字の大きさを変更するときの記述例
|
<font size="1">ホームページに掲載する文章</font>
<font size="3">ホームページに掲載する文章</font>
<font size="5">ホームページに掲載する文章</font>
|
■ ホームページ上の表示
|
ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章
|
フォントの種類を変える
文字のフォントの種類を変えたいときは、face属性を使います。
たとえば、フォントの種類を変えたいときは、次のように書きます。
■ <font> タグで、文字のフォントを変更する記述例
|
<font face="ＭＳ 明朝">ホームページに掲載する文章</font>
<font face="ＭＳ ゴシック">ホームページに掲載する文章</font>
<font face="HG行書体">ホームページに掲載する文章</font>
<font face="Comic Sans MS">ホームページに掲載する文章</font>
|
■ ホームページ上の表示
|
ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章
|
fontタグの歴史と現在
ここでは、fontタグの歴史と現在について、お伝えします。
fontタグの始まり
fontタグは、HTMLの最初のバージョンからあり、文字の見た目を変えるためによく使われていました。
たとえば、色を変えたり、サイズを変えたり、フォントの種類を変えることができました。
しかし、CSSが誕生した
しかし、時代が進むにつれて、もっと便利で柔軟なCSS（カスケーディングスタイルシート）が登場しました。
CSSを使うと、ページ全体の文字のスタイルを、一ヶ所で変えることができます。
これにより、コードがすっきりして、管理しやすくなりました。
fontタグの役割が減る
CSSが普及するにつれて、fontタグはあまり使われなくなりました。
今では、fontタグを使うよりも、CSSを使って文字のスタイルを変えることが一般的です。
これにより、コードが読みやすくなり、管理しやすくなりました。
まとめ
fontタグを使うと、文字の色やサイズ、フォントの種類を簡単に変えることができます。
しかし現在は、CSSを使う方法が主流であるため、fontタグはあまり使われなくなってきています。
CSSを使って文字の見た目を変える方法
fontタグは、昔からあるタグなので、ほとんどのブラウザで使うことができます。
しかし今後は、もしかしたらfontタグが使えなくなるかもしれません。
そこで、ここでは、CSSを使って文字の見た目を変える方法をご紹介します。
CSSって何？
CSSは、「カスケーディングスタイルシート」の略で、HTMLで作ったページの見た目を変えるためのものです。
CSSを使えば、文字の色やサイズ、フォントの種類を簡単に変えることができます。
CSSの基本
CSSを使うには、HTMLの headタグの中にstyleタグを入れて、その中にCSSのコードを書きます。
これを「スタイルシート」と言います。
色を変える方法
CSSを使って文字の色を変えるには、colorプロパティを使います。
たとえば、赤色にしたいときは次のように書きます。
|
<!DOCTYPE html>
<html>
<head>
<style>
.red-text {
color: red;
}
</style>
</head>
<body>
<p class="red-text">これは赤色の文字です。</p>
</body>
</html>
|
サイズを変える方法
文字のサイズを変えるには、font-sizeプロパティを使います。
大きな文字にしたいときは、次のように書きます。
|
<!DOCTYPE html>
<html>
<head>
<style>
.big-text {
font-size: 24px;
}
</style>
</head>
<body>
<p class="big-text">これは大きい文字です。</p>
</body>
</html>
|
フォントの種類を変える方法
文字のフォントの種類を変えるには、font-familyプロパティを使います。
たとえば、Arialというフォントにしたいときは、次のように書きます。
|
<!DOCTYPE html>
<html>
<head>
<style>
.arial-text {
font-family: Arial;
}
</style>
</head>
<body>
<p class="arial-text">これはArialフォントの文字です。</p>
</body>
</html>
|
まとめ
CSSを使うと、文字の色やサイズ、フォントの種類を簡単に変えることができます。
しかも、一ヶ所にまとめて書くことができるので、HTMLのコードがすっきりします。
これからはCSSを使って、もっときれいで使いやすいホームページを作りましょう！
【まとめ】fontタグとは
fontタグとは？使い方やフォントの変更方法を徹底解説！の内容は、いかがでしたでしょうか？
fontタグは、文字の見た目を変えるためのタグです。
たとえば、文字の色やサイズ、フォントの種類を変えることができます。
fontタグは、HTMLの初期から使われてきましたが、最近では、CSSを使って文字の見た目を変える方法が一般的です。
もちろん、現在もfontタグは使えますが、世の中の流れとしては、CSSを使って文字の見た目を変える方法が一般的であるため、覚えておいてくださいね。
