*文字・背景の色*

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

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

それが完了したら、続いて、
「(2)テキストエディタを起動して、昨日の「top.html」を開いてください!」・・・
と言いたいわけなんですが、
2日目なんで、ちょっとテクを使いましょう!
ブラウザ上で右クリック→「ソースの表示」
どうです、メモ帳が起動して、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="画像名"」・・・背景画像、4日目に出てきますのでお楽しみに♪

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

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

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

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




Copyright (C) 7tag project dv