授業形式でhtml・ソース・タグを勉強し、ホームページを自作する　文字の大きさ・文字の色

準備が完了しましたので、いよいよ本題に入ります。

文字を設定するタグは、フォントタグ「～」です。
属性には、大きさ・色・書体があります。
書体はブラウザや使用環境によっては指定したとおりにならず、デフォルトの「ゴシック体」になる場合が多いので、あまり特殊な書体は避けましょう。

こんな感じです。

size　サイズ: 文字の大きさ
１～７で指定。数字が大きいほど文字も大きい。デフォルトは「3」。
また、「+2」「-1」といった指定もできます。
color　カラー: 文字の色
black,silver,gray,white,maroon,red,purple,fuchsia,green, lime,olive,yellow,navy,blue,teal,aquaなどの指定（100種類以上あるようです）と
色コード（#RRGGBB）指定がある。（色コードについては「背景色」のところで勉強します）
face　フェイス: 文字の書体
"ＭＳＰゴシック"、"ＭＳＰ明朝"、"MS UI Gothic"、"HGｺﾞｼｯｸE"、"cursive"、"serif"など
大文字小文字・半角全角を一字一句間違えずに書かないと表示しません。
だから、書体例の多いサイトやソフトからメモ帳などに　コピー＋貼り付け　→　コピーアンドペースト（Copy&Paste）　→　コピペ　しておきましょう。

パソコンの種類にはWindowsとMacintoshがあり、代表的なブラウザの種類は
Internet Explorer,Netscape,Opera,Safari,Firefox,Sleipnir
などがあります。
そのすべてで同じ書体で表示させるのは無理と判りました。

また、sans-serif、cursive、serifなどは異なるフォントの集合体で、
5つの一般フォントファミリに分類されている中の３つです。
全部でsans-serif、cursive、serif、fantasy、monospaceがあります。

≪表示例≫
　sans-serif ･･････　sans-serif日本語
　cursive ･････････　cursive日本語
　serif ･･･････････　serif日本語
　fantasy ･････････　fantasy日本語
　monospace ･･･････　monospace日本語

≪書き方の例　タグ・属性利用≫
HG丸ｺﾞｼｯｸM-PRO日本語

表示　HG丸ｺﾞｼｯｸM-PRO日本語

≪書き方の例　スタイルシート利用≫
AR PＰＯＰ体B日本語

表示　AR PＰＯＰ体B日本語

（注意）
5種類の分類の場合は、引用符クォーテーションマーク「"」や「'」は書きません。

あなたのパソコンでは、上の表示例などすべて異なった書体で表示されたでしょうか？
もし明朝体やゴシック体で表示された書体があれば、あなたのパソコンにはその書体は入っていないということです。
私のパソコンでは、 serif と fantasy は同じ書体になりました。

早い話が、書体はできる限り気にせずに指定しない方がいいです。
どうしてもすべてのパソコンでその書体を見せたい場合は、画像にするのが良いと思います。

書体を指定しない場合、文字化けを防ぐためにメタタグには次の1行を書いておきます。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

太字、下線や斜体は属性ではなく、単独のタグとして使います。

太字････～
下線････～
斜体････～

こんな感じです。
こんな感じです。
こんな感じです。

≪練習≫
何回かにわたって自己紹介のページを作っていきます。

次のソースをメモ帳にコピペして、「練習１.html」と名前をつけ「tag」フォルダーに保存します。
（ .html は半角です）

<html>
<head>
<title>自己紹介</title>
</head>
<body bgcolor="#ffffff">
<p align="center">
<font size="4" color="olive" face="HGｺﾞｼｯｸE">
ホームページを自作する<br>自己紹介
</font>
</p>
</body>
</html>

「練習１.html」をダブルクリックして開くと画面が表示されます。
文字サイズ（size）、文字色（color）や書体（face）を変更してみてください。
最後に、文字サイズは「6」または「7」にして上書き保存してください。

≪完成したイメージ≫