★ Let's become a Web Designer! 【プロフィール】 【商品一覧】 【特典画像】 【あなたのお手伝い】 【会社概要】
 

fontタグとは

 
トップページ はじめにご覧ください 講座の効果 作成実績 受講者の声 パーツテンプレート集 ホームページ基礎講座 よく使う用語集
 
 
プロフィール商品一覧特典画像お手伝い
 

fontタグとは

 
トップページ 基礎知識 ホームページソフト スマホサイト講座 AI活用法 用語集 HTMLタグ CSS入門 テクニック集
 
 
  ホーム > ホームぺージ作成でよく使うHTMLタグ一覧
 

fontタグとは?使い方やフォントの変更方法を徹底解説!

「fontタグってなんだろう」や「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="MS 明朝">ホームページに掲載する文章</font>
<font face="MS ゴシック">ホームページに掲載する文章</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を使って文字の見た目を変える方法が一般的であるため、覚えておいてくださいね。







当サイトで使用しているサンプルサイトを無料でダウンロード!

当サイトで使用しているサンプルサイトのデータを、無料でダウンロードできます。
サンプルサイトがあれば、さらにホームページの作り方が分かりやすくなりますよ。

⇒ 当サイトで使用しているサンプルサイトの無料ダウンロードはこちら



【特典画像100枚】オフィスで働いている女性が人差し指を立てている画像

高品質で、ホームページでとても使いやすい画像100枚を「特典」としてお渡ししています。 人物の画像素材は少ないため、とても貴重な画像素材です。

⇒ オフィスで働いている女性が笑顔で人差し指を立てている画像について



ホームぺージ作成をビジネスに活用する!

初心者がホームページを作れるようになり、ホームぺージ作成をビジネスに活用できる「オールインワン」の講座です。

⇒ 初心者から始める!ホームページ作成ビジネス講座



 
^