*文字・背景の色*

自作ホームページの作り方講座！続きを始めますよ～

昨日の続きから入ります。
(1)ブラウザを起動して、「top.html」を読み込んでください！

それが完了したら、続いて、
「(2)テキストエディタを起動して、昨日の「top.html」を開いてください！」・・・
と言いたいわけなんですが、
２日目なんで、ちょっとテクを使いましょう！
ブラウザ上で右クリック→「ソースの表示」
どうです、メモ帳が起動して、top.htmlが開かれてるでしょ？(^-^)
このようにブラウザでは、HTML文書（＝ソース）も見れてしまうんですね！

今後、「このホームページすごい、どうやって作ってるんだろう!?」って思ったら、こうやって、こっそりソースを見て、勉強しちゃいましょう♪

あ、メモ帳じゃないテキストエディタを使ってる人は、そっちを起動してくださってかまいませんからね～！

※この方法でソースが見れないブラウザを使っている方は、通常どおりテキストエディタを開いてください。

1.文字の色

「top.html」に、こんな工夫をしてみます↓

こんなページへGO!!


あらら、文字に色が!!!(^-^;)わざとらしい・・・

使うタグは、<FONT color="色名">です。
まず、<H1>タグで囲まれた「ななたぐのへや」を、赤（red）にしてみます！

<HTML>
  <HEAD>
    <TITLE>ななたぐのへや</TITLE>
  </HEAD>
  
  <BODY BGCOLOR="yellow">
      <CENTER><H1>
            <FONT color="red">ななたぐのへや</FONT>
            </H1></CENTER>
      「ななたぐのへや」へようこそ！<BR>初めてのホームページです。
      （以下略）

書けたら、ブラウザで確認しましょう！
「上書き保存→更新」ですね。

せっかく<FONT>が出てきたんで、ついでにこんなのもお勉強しときましょう！
color="色名"は、<FONT>タグの属性（オプション）なんです。
「color="色名"」のほかに、「size="1"」なんてのもあります。（数字は最小「1」から最大「7」まで選べます）
ためしに、こんなふうに書いてブラウザで見てみてください！

（略）
  ・
 <FONT size="5">「ななたぐのへや」</FONT>へようこそ！
  ・
（略）

ね、楽しいでしょ？(^-^)♪

「color=""」と「size=""」両方指定したいときは、両方書けばいいのです。
順番はどっちが先でも平気です。
ただし、間に「半角スペース」を入れてください。

例： 
（略）
  ・
 <FONT size="5" color="blue">「ななたぐのへや」</FONT>へようこそ！
  ・
（略）

2.背景の色

じゃあ今度は、背景の色、やってみましょう！・・・
と、思ったら、実は昨日のうちにもうやってるジャン!!!w(゜o゜)wそうだっけ？

背景、黄色にしたジャン!!!(^o^)そっか～

どうやって黄色にしたか、見直してみましょう！(^-^)

<HTML>
  <HEAD>
    <TITLE>ななたぐのへや</TITLE>
  </HEAD>
  
  <BODY bgcolor="yellow">
  （以下略）

もうおわかりですね？？
<BODY>の属性である「bgcolor」は、背景の色を指定していたんですね～♪

<BODY>の属性には、こんなのもあります。
「text="色名"」・・・ホームページ全体の文字の色
「link="色名"」・・・リンク文字の色
「background="画像名"」・・・背景画像、４日目に出てきますのでお楽しみに♪

ためしに、<BODY>の属性に「text="blue"」を書き加えてください！
できたら、確認しましょう！

「ななたぐのへや」と同じく、すべての文字の色が「blue」になりましたね？(^-^)
（そうしたら、個別指定した<FONT color="blue">はもう必要ないので、削除しちゃっていいですよ。）

ところで・・・
「色って、red、blue、yellowしか今のところでてきてないんだけど、
ほかにはどんな色があるのかな？？」
って、思いません？(^-^)

そこで、「ホームページで使える色名」全部お見せします！
次のページ開いたとたん、びっくりしますよ～(^o^)ワクワク♪



Copyright (C) 7tag project dv