| 例題３−４を見ましょう |
ではさっそく、次の例題３−４をクリックして画面に出してください。
新しいウインドウが開いたでしょう。
次に、例題３−４のウインドウ内にマウスを置き、右クリック → ソースの表示 をクリック。
例題３−４のhtmlが見えたでしょうか？（この見方はパート２で説明しましたよね）
できない方は、もう一度やり直してくださいね。絶対にできますから・・・
この３つのウインドウができるだけ同時に見えるようにそれぞれ幅を狭くしましょう。
|
|
| 背景色やベースの文字色を指定する |
例題３−４は背景色がうすい水色になってますよね。
今までは、白とかグレーになっていたと思います。
これは、タグで指定しなければ、みなさんが見ているパソコンの指定色になっているのです。
ここで気をつけなければいけないのは、背景色を指定せずに、ホームページを作っていると
作っているパソコンの背景色に合わせて作るため、他の方が見られた時のイメージが違って
くる ということです。
したがって、必ず、指定をしましょう。
背景色の指定方法は、
<BODY> の中でBGCOLOR=XXXXXと指定します。
例題では <BODY BGCOLOR=LIGHTBLUE> としてます。LIGHTBLUEはうすいブルーです。
同じようにベースとなる文字の色も指定できます。
文字の色の指定方法は
<BODY> の中でTEXT=BLACKと指定します。BLACKは黒です。
ベースとなる文字の色を黒、背景色をうすい水色にする場合は
<BODY BGCOLOR=LIGHTBLUE TEXT=BLACK> と BODY の中に続けて記入すればいいのです。
※なお、文字の色も指定をしなければ、見ているパソコンの指定色となりますので注意してください。
|
|
|
例題３の表って？ |
例題３の表（テーブル）って今までお話してきた表とちょっと違っているでしょ。
１行目が2行目以降と違って１つになってるのがわかると思います。
こんな表って結構必要でしょ。
では、もったいぶらずに教えましょう。
今1行目以外は、２列ですね。そこで他の列を一まとめにするCOLSPAN という指定を
します。例題では、
<TD COLSPAN=2 ALIGN=CENTER><FONT COLOR=BLUE><B>私のプロフィール</B></FONT></TD></TR>
つまり、２列を１列にまとめます という指定なのです。
この指定で、列を１つに出来るので表のタイトルなどに利用すればいいと思います。
もちろん、例えば５列のうちの３列だけまとめることもできますよ。
COLSPAN は、列に対しての指定ですが、行に対しての指定もあり ROWSPANで指定します。
ALIGN=CENTERっていうのは、<TD>〜</TD> の中の文字や画像を中央に配置するタグです。
|
|
| 表枠を魅力的にしよう |
例題４を見てください。
例題３の表枠とでは、外枠にもう1本枠がついてますよね。
こんなふうにすると、より強調できたり、枠に別の色を付けたりで、より魅力的に表現できます。
HTMLをあまりご存知ない方が表を強調する場合、BORDERを指定しますが、我々から見ると
あれは、かなり不細工に感じております。（失礼）あのような表を見るとセンスを疑いたくなりますね。
ここで、ホームページのセンスについてあまり多く語ることはしませんが、ついでにお話しておきますと
センスがいいというのは、全体的にまとまっていて、それでいて目立つところはちゃんと視線が行くように
出来ているページである と思ってます。
例えば、やたら色をたくさん使って派手にしても、色を使い過ぎることによってかえって全部が目立つ
ので視線は落着かず、目がチカチカするだけとなり、文字を読むのが嫌になります。
文字の大きさなどもあまりにも不均等であればこれも問題！
本当に必要な個所だけ大きくする といったことが肝心だと思います。
また、奇抜なデザインなどに懲りすぎて一目でリンクボタンなどがわからない、何の表現かわからない
などもセンスがいいと言えません。
センスがいいというのは、DownLoad時間は短く、見やすく、ゆっくりと眺めたくなるページなのです。
だから表など作る時、あまりごつごつとして暑苦しい表にするのは絶対お勧めできません。
これらのことは、改めてお話するつもりです。
さてもとに戻りまして、そのようなことで外枠にもう一つ例題４のような枠を付けることで
あなたのページは、魅力的になるでしょう！
では、その方法をお話ししますね。
まず、テーブルの作り方はわかったと思いますが、例題４のような表を作るには、表の中に表を作る
必要があります。
例題３の外にもう２つ表をつくるのです。
<TABLE BORDER=0 CELPADDING=0 CELLSPACING=1 BGCOLOR=BLUE>
<TR>
<TD>
<TABLE BORDER=0 CELPADDING=0 CELLSPACING=1 BGCOLOR=WHITE>
<TR>
<TD>
例題３のテーブルのタグをそのまま記入
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
どうです、わかりますか？
ここで最初のテーブルの BGCOLOR=BLUE は、一番外の枠の色（青）の指定で、CELLSPACING=1 は、
その枠の太さの指定です。(以前にお話しましたよね)
さらに、下段のテーブルでも同じようにしてますが、BGCOLOR=WHITE としており、外枠から中への
の枠の色が白であることがわかります。（大きく外枠は青・白・青となっているでしょ）
このようにして、テーブルの中にテーブルタグを挿入することで、様々なことができるのです。
このHTMLを応用していろいろと試してみてはいかがでしょうか？
そうすれば、ますます表のおもしろさがわかり、センスのいいページを作る能力ができるに
違いありません！！
今回は、短めにしましたけどかなり凝縮しておりますのでこの位にしておきますね。
物足りないと言われるかもしれませんが、とにかく何度も復習してください。
前回同様、とても大切なところです。
では、また次回までお楽しみに・・・
|
|
