8.文字に色をつけよう

サイトメーカー「今回は文字に色をつけよう」

ホーム君「やったー！色付けだー！いやー。いくらなんでも白黒過ぎてシンプル過ぎるなーって思ってたんだよねー」

サイトメーカー「ただ、今回の色付け方法はあえて初心者用の方法を使う」

ホーム君「初心者用の方法？」

サイトメーカー「うん。本当はもっと正しいやり方があるんだけど、ただボク達のとりあえずの目標は『夏休みの宿題として提出できるようにすること』だ。ホームページを作る方法はものすごく奥深くて、勉強しようと思えばいくらでも勉強できるし、しかもページは自分が好きなだけ増やせちゃうから、やり始めるとキリがない。そこで、まずは『夏休みの宿題提出用』として2、3ページの自己紹介サイトを作ろうと思う。で、それを夏休みの宿題としてとりあえず提出した後に、正しい方法を教えようと思うんだ。ホーム君は夏休み後もホームページ作りを続けるだろ？」

ホーム君「そんな予定はまったく無いよ？」

サイトメーカー「──その一言が、後の『ウェブサイト星』対『地球』の100年戦争の始まりのきっかけになることを彼はまだ知らなかった……」

ホーム君「も、もちろんやる予定さ！」

サイトメーカー「そう来なくっちゃ！さて、早速Yahoo!ジオシティーズからログインしてファイルマネージャのページへ行きましょう。前回のindex.htmlファイル

<html>
<head>
<title>こんにちは</title>
</head>
<body>
はじめまして
<br>
どうぞよろしく
<br>
<a href="あなたのサイトのアドレスb1.html">存在しないページ</a>
</body>
</html>

を自己紹介用にバリバリ書き換えちゃうぞ」

ホーム君「どうするの？」

サイトメーカー「まずは、自己紹介サイトというタイトルに変えて、後は『本当に自分が作ったんだよ』という証拠に、簡単な自己紹介でも書きましょう」

<html>
<head>
<title>自己紹介サイト</title>
</head>
<body>
<font color="red">自己紹介サイト</font>
<br>
どうもどうも。こんにちは。大分県の<font color="grean">東</font>がつく名前の小学校の4年生です。
<br>
皆からは<font color="blue">タッキー</font>と呼ばれています。
</body>
</html>

サイトメーカー「この時、自分の本名や住所、個人情報をはっきりと書かないこと！あなたのホームページは確かに簡単には検索されないようになっているかもしれないけど、インターネットの世界に存在することは事実。どこでどんな子供を狙う犯罪者や個人情報を狙う犯罪者がいるか分かりません。でも、それほど過敏にびびる必要もありません。上の例の用に、分からない人には分からないけど、分かる人には分かる。そんな感じのちょうど良い自己紹介を目指しましょう」

サイトメーカー「書けたら、プレビューボタンで確認してみてください。文字に色がついています」

サイトメーカー「実際に保存して、確認してみましょう」

ホーム君「お？きちんと色がついてるぞ！」

サイトメーカー「色をつけるにはfontタグを使います。キーワードと書くことで、キーワードに好きな色をつけられます」

ホーム君「うーん、でも、色の名前を英語で書かないといけないのかー。子供の僕には難しいなー」

サイトメーカー「『カラーコード』というキーワードで検索すると、色の名前を色々と紹介してくれているサイトがあるので、そういうサイトを参考にしましょう。例えば以下のようなサイトがあります」

サイトメーカー「上記のサイトを見てみると、色の名前の他に#ff0000みたいな変なやつも紹介されています。色の名前の代わりにこの変なやつで色を指定することも出来ます（自己紹介サイトの代わりに自己紹介サイトと指定することも出来る）」

ホーム君「ところでサイトメーカー。自己紹介サイトとは簡単に言うけど、ネタが無い」

サイトメーカー「そうですね。年齢。誕生日。血液型。星座で数を稼ぎつつ、夏休みにどこへ行って何をしたかを軽く書きましょう。こんな感じでどうでしょう」

<html>
<head>
<title>自己紹介サイト</title>
</head>
<body>
<font color="red">自己紹介サイト</font>
<br>
どうもどうも。こんにちは。大分県の<font color="grean">東</font>がつく名前の小学校の4年生です。
<br>
皆からは<font color="blue">タッキー</font>と呼ばれています。
<br>
9月生まれの乙女座です（男なのに）。
<br>
<font color="blue">血液型</font>はワガママで有名な<font color="maroon">B型</font>ですが、実際の私は皆さんもご存知の通りすごく<font color="oliverab">やさしい</font>性格（？）です。
<br>
今年の夏休みはおばあちゃん家にいきました。おじいちゃんと一緒に<font color="silver">魚釣り</font>にもいきました。
<br>
虫取りでは、でっかい<font color="sienna">アリ</font>をみつけました。今まで見た中で一番でかい<font color="sienna">アリ</font>だったので、すこしびっくりしました（笑）。
<br>
海にも行きました。実は私はまだ浮き輪が無いと<font color="yellow">泳げません</font>。いつ泳げるようになるのでしょうか？
<br>
砂浜でめちゃくちゃ小さな<font color="purple">貝殻</font>も少し拾いました。ただ、砂浜超熱かった！
<br>
夏休みももうすぐ終わりです！泣きそうです！宿題まだ終わってません！<font color="hotpink">助けて</font>！
</body>
</html>

ホーム君「サイトメーカー。文字の大きさも変えたいんだけど」

サイトメーカー「了解です。とりあえず、一番上の赤い色の『自己紹介サイト』という部分を大きくしてみますか」

<html>
<head>
<title>自己紹介サイト</title>
</head>
<body>
<font size="12"><font color="red">自己紹介サイト</font></font>
<br>
どうもどうも。こんにちは。大分県の<font color="grean">東</font>がつく名前の小学校の4年生です。
<br>
皆からは<font color="blue">タッキー</font>と呼ばれています。
<br>
9月生まれの乙女座です（男なのに）。
<br>
<font color="blue">血液型</font>はワガママで有名な<font color="maroon">B型</font>ですが、実際の私は皆さんもご存知の通りすごく<font color="oliverab">やさしい</font>性格（？）です。
<br>
今年の夏休みはおばあちゃん家にいきました。おじいちゃんと一緒に<font color="silver">魚釣り</font>にもいきました。
<br>
虫取りでは、でっかい<font color="sienna">アリ</font>をみつけました。今まで見た中で一番でかい<font color="sienna">アリ</font>だったので、すこしびっくりしました（笑）。
<br>
海にも行きました。実は私はまだ浮き輪が無いと<font color="yellow">泳げません</font>。いつ泳げるようになるのでしょうか？
<br>
砂浜でめちゃくちゃ小さな<font color="purple">貝殻</font>も少し拾いました。ただ、砂浜超熱かった！
<br>
夏休みももうすぐ終わりです！泣きそうです！宿題まだ終わってません！<font color="hotpink">助けて</font>！
</body>
</html>

サイトメーカー「文字の大きさもfontタグで指定できます。キーワードみたいな感じでキーワードの部分の文字サイズを変更できます。ぜひ数字を色々と変えて確かめて見てください。また、例の用に色をつけながら大きさを変えることもできます。自己紹介サイト。こんな感じですが、別に色指定が先でサイズ指定が後でも構いません。自己紹介サイトでも同じ意味です。」

サイトメーカー「さて、そろそろタグの数が多すぎて、基本のサンドイッチ型を間違えるようになる頃です。開始タグはちゃんと終了タグで終えましょう。<A>キーワード</A>はダメですよ。<A>キーワード</A>が正しい書き方ですよ」

サイトメーカー「ホーム君、どうですか？調子は」

ホーム君「文字の大きさを色々変えて、サイトに動きを出してみたよ」

<html>
<head>
<title>自己紹介サイト</title>
</head>
<body>
<font size="12"><font color="red">自己紹介サイト</font></font>
<br>
どうもどうも。こんにちは。大分県の<font size="8"><font color="grean">東</font></font>がつく名前の小学校の<font size="9">4年生</font>です。
<br>
皆からは<font color="blue">タッキー</font>と呼ばれています。
<br>
9月生まれの乙女座です<font size="10">（男なのに）</font>。
<br>
<font color="blue">血液型</font>はワガママで有名な<font size="9"><font color="maroon">B型</font></font>ですが、実際の私は皆さんもご存知の通りすごく<font color="oliverab">やさしい</font>性格（？）です。
<br>
今年の夏休みはおばあちゃん家にいきました。おじいちゃんと一緒に<font size="10"><font color="silver">魚釣り</font></font>にもいきました。
<br>
虫取りでは、<font size="14">でっかい<font color="sienna">アリ</font>をみつけました</font>。今まで見た中で一番<font size="14">でかい<font color="sienna">アリ</font></font>だったので、すこしびっくりしました（笑）。
<br>
海にも行きました。実は私はまだ浮き輪が無いと<font size="9"><font color="yellow">泳げません</font></font>。いつ泳げるようになるのでしょうか？
<br>
砂浜でめちゃくちゃ小さな<font color="purple">貝殻</font>も少し拾いました。ただ、砂浜超<font size="8">熱かった！</font>
<br>
夏休みももうすぐ終わりです！泣きそうです！宿題まだ終わってません！<font size="13"><font color="hotpink">助けて！</font></font>
</body>
</html>

サイトメーカー「タグの数が多すぎて少し見づらいですね。実はタグとは二つ同時に使うときは〜というように一つにまとめることができます。つまり、ホーム君が書いたものは次の様に書き直せます」

<html>
<head>
<title>自己紹介サイト</title>
</head>
<body>
<font size="12" color="red">自己紹介サイト</font>
<br>
どうもどうも。こんにちは。大分県の<font size="8" color="grean">東</font>がつく名前の小学校の<font size="9">4年生</font>です。
<br>
皆からは<font color="blue">タッキー</font>と呼ばれています。
<br>
9月生まれの乙女座です<font size="10">（男なのに）</font>。
<br>
<font color="blue">血液型</font>はワガママで有名な<font size="9" color="maroon">B型</font>ですが、実際の私は皆さんもご存知の通りすごく<font color="oliverab">やさしい</font>性格（？）です。
<br>
今年の夏休みはおばあちゃん家にいきました。おじいちゃんと一緒に<font size="10" color="silver">魚釣り</font>にもいきました。
<br>
虫取りでは、<font size="14">でっかい<font color="sienna">アリ</font>をみつけました</font>。今まで見た中で一番<font size="14">でかい<font color="sienna">アリ</font></font>だったので、すこしびっくりしました（笑）。
<br>
海にも行きました。実は私はまだ浮き輪が無いと<font size="9" color="yellow">泳げません</font>。いつ泳げるようになるのでしょうか？
<br>
砂浜でめちゃくちゃ小さな<font color="purple">貝殻</font>も少し拾いました。ただ、砂浜超<font size="8">熱かった！</font>
<br>
夏休みももうすぐ終わりです！泣きそうです！宿題まだ終わってません！<font size="13" color="hotpink">助けて！</font>
</body>
</html>

ホーム君「うーん……。でも、初心者の僕には逆に分かりにくい」

サイトメーカー「そうかもしれません。まぁ、気が向いたらまとめようみたいな気分で良いと思います。トップページはこんな感じでいいんじゃないかな。ただ、自由研究という宿題としては後1、2ページ欲しいね。次回は2ページ目の作成と、tableタグの登場だ（tableタグの登場！）」

夏休みの宿題にホームページを作ろう

8.文字に色をつけよう