超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 
フォントの詳しい説明は「リファレンス−フォント」を参照してください。

文字の大きさと色を変える

文字の大きさを変えるには「fontタグ」を使います。
<font size=2>文字</font> のように大きさを変えたい文字をはさみます。
「fontタグ」は、文字の大きさを変えたり、色を変えたりすることができます。

文字の大きさは次のようになっています。

<font size=1>フォントサイズ1</font>
<font size=2>フォントサイズ2</font>
<font size=3>フォントサイズ3</font>
<font size=4>フォントサイズ4</font>
<font size=5>フォントサイズ5</font>
<font size=6>フォントサイズ6</font>
<font size=7>フォントサイズ7</font>

サイズ1
サイズ2
サイズ3(IEやNNではこれがデフォルトサイズ)
サイズ4
サイズ5

サイズ6

サイズ7


数字で指定する変わりに size="+1" と指定する方法もあります。
数字だけの場合は「" "」(ダブルクォーテーション)で囲まなくてもいいですが、 「+1」「+2」・・・を使うときは必ず「" "」で囲むようにしましょう。

<font size="+1">フォントサイズ+1</font>
<font size="+2">フォントサイズ+2</font>
<font size="+3">フォントサイズ+3</font>
<font size="+4">フォントサイズ+4</font>
<font size="+5">フォントサイズ+5</font>
<font size="+6">フォントサイズ+6</font>
<font size="+7">フォントサイズ+7</font>

フォントサイズ+1
フォントサイズ+2

フォントサイズ+3

フォントサイズ+4

フォントサイズ+5

フォントサイズ+6

フォントサイズ+7

デフォルトがフォント3の場合、 +4 以上のフォントの大きさに変化はありません。

では、先ほどのHPにサブタイトルをつけて文字の大きさと色を変えてみましょう。

<例題6>
<html>
<head>
<title>MY HOMEPAGE</title>
</head>

<body>

<center>
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
スポンジのつくり方
</center>

</body>
</html>

まず上のように、サブタイトルを追加します。

するとこのようになります。

次にサブタイトルの色と大きさを変更します。

<例題7>
<html>
<head>
<title>MY HOMEPAGE</title>
</head>

<body>

<center>
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<font size="4" color="#0000FF">スポンジのつくり方</font>
</center>

</body>
</html>

このようにfontタグで囲みます。
fontタグについている「size="4"」はフォントの大きさを4にするという指定です。
fontタグについている「color="#FF0000"」はフォントの色を青にするという指定です。
fontとsizeもしくはcolorの間は、半角のスペースで区切ります。
sizeとcolorの両方を指定する場合は、sizeの指定をして半角スペース、colorの指定というふうに続けて書きます。

色の指定は「red」「blue」など一部の色は英語表記でも指定できますが、色はできればコンピュータがわかるように「#0000FF」のような16進数で記述した方がいいです。
(カラーコードは216セーフカラーチャートを参照してください。)

0000FFのような色の指定にはコードの前に必ず「#」をつけます。
色の指定や大きさの数字は必ず「"」(ダブルクォーテーション)で囲んでおきます。

今回は色と大きさを指定しましたが、色だけ、大きさだけの指定もできます。

大きさだけの場合

<font size="4">*****</font>

文字の色だけの場合

<font color="#0000FF">*****</font>

では、先ほどのファイルを上書き保存して、ブラウザで確認してみましょう。

このように文字が青色で表示されましたか?

このように色や大きさを変えたい部分に「fontタグ」を指定するとその部分に色がついたり大きさを変えることができます。

▲このページのトップに戻るTop