fontタグの書き方｜HTMLタグを初心者に分かりやすく解説！

タグの書き方

タグは、文字の大きさや色、文字のフォントを変更するためのタグです。

たとえば、文字の大きさを変更するためには、下記のように タグを使います。

■ タグで、文字の大きさを変更するときの記述例

ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章

■ ホームページ上の表示

ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章

上記のように、 タグを使うことで、 文字の大きさ を変更することができます。

なお、size で数字を指定していますが、「1」が一番小さな文字で、「7」が一番大きな文字です。この数字部分を変更することで、文字の大きさを、７段階で調整することができます。

これが、 タグを使った、「文字の大きさ」の変更方法です。

そして、 タグは、 文字の色を変更すること もできます。
文字の色を変更するためには、下記のように、 タグを使います。

■ タグで、文字の色を変更する記述例

ホームページに掲載する文章
ホームページに掲載する文章

■ ホームページ上の表示

ホームページに掲載する文章
ホームページに掲載する文章

上記のように、 タグの後ろの color で、文字の色を指定することができます。

なお、色の指定方法は、大きく分けて２つの方法があります。

１つ目は、 red や green 、 white などのカラーネームで色を指定する方法 です。そして２つ目は、 シャープ（#）＋６桁の英数字で、色を指定する方法 になります。

たとえば、上記の例で言うと、 color="red" という形で、「red」を指定すると、文字が赤くなっていますよね？このように、red や green 、 white などのカラーネームで、色を指定することができます。

また、 color="#ff0000" という形で指定しても、文字が赤くなっていますよね？

このような、 シャープ（#）＋６桁の英数字のことをカラーコード と言って、このような「カラーコード」で、文字の色を指定することもできます。

ちなみに、red や green 、 white などの カラーネームには分かりやすいというメリット があって、シャープ（#）＋６桁の英数字の カラーコードは、色をとても細かく指定することができるというメリット があります。

そのため、僕の場合は、基本的には分かりやすい「カラーネーム」を使って、色を細かく指定したいときは「カラーコード」を使っています。

なお、この色の指定方法については、ホームページの色の指定方法（配色）について で、詳しくお伝えしていますので、確認してみてください。

また、 タグについては、文字の色やサイズを変更する方法と段落を作成する方法 でお伝えしていますので、合わせて確認してみてくださいね。

これが、 タグを使った、「文字の色」の変更方法です。

そして最後に、 タグは、 文字のフォントを変更すること もできます。
文字のフォントを変更するためには、下記のように、 タグを使います。

■ タグで、文字のフォントを変更する記述例

ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章

■ ホームページ上の表示

ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章
ホームページに掲載する文章

上記のように、 タグの後ろの face で、文字のフォントを指定することができます。

なお、指定できるフォントの種類は、「ＭＳ明朝」や「ＭＳゴシック」、「HG行書体」や「Comic Sans MS」などがあります。これについては、お好きなフォントをお選びくださいね。

なお、ここでお伝えしたことは、まとめて書くこともできます。

たとえば、「文字サイズを大きくして、赤字にして、フォントはＭＳ明朝にしたい」という場合は、下記のように記述します。