| 問題２を見ましょう |
今回からは問題に沿って説明していきますね。
ではさっそく、次の問題２をクリックして画面に出してください。
新しいウインドウが開いたでしょう。
次に、問題２のウインドウ内にマウスを置き、右クリック → ソースの表示 をクリック。
問題２のhtmlが見えたでしょうか？（この見方はパート２で説明しましたよね）
できない方は、もう一度やり直してくださいね。絶対にできますから・・・
この３つのウインドウができるだけ同時に見えるようにそれぞれ幅を狭くしましょう。
|
|
| 表に色を付ける |
問題２は表の淵が赤で、２つ枠は
水色と黄色というようにカラフルになってますね。いろんなＨＰでこのように表に色がついたものを
見かけますね。
このようにするには、どのようなタグを使えばできるのか順を追って説明します。
まず、2-1を見てください。
表全体が赤になってます。
これは、BGCOLOR=xxxx というタグを使います。
つまり
<TABLE BGCOLOR=RED BORDER=1>
<TR>
<TD>表全体を赤にしました。</TD>
<TD>こんにちは</TD></TR>
</TABLE>
このタグでわかりましたか？そうです、TABLE の後に BGCOLOR=RED と
記入するだけでなのです。
ここでBORDER=1ってありますが、これは、表の外枠の太さを指定してます。
BORDER=0とすると仕切る枠がなくなりますし、数字を大きくすると仕切る枠の太さが太くなります。
（枠の中が太くなる訳ではありません！仕切る外枠のラインが太くなるのですよ）
何の指定もしなければ、BORDER=0と同じです。
話を元に戻して、BGCOLOR=XXXとすることによって表全体に色が付くことがわかりましたね。
では、他の色はどんな色があるのでしょうか？例えば WHITE BLUE YELLOW GRAY GREEN ORANGE ・・・
といった感じで、およそみなさんが思いつく色を英語にすればたいていはその色が出てきます。
もうひとつ別の指定方法があり、それはＲ（レッド）Ｇ（グリーン）Ｂ（ブルー）を1バイトづつ
合計3バイトをそれぞれ16進数で指定する方法です。
例えば、FF0000 はレッド、00FF00 はグリーン、0000FF はブルーとなります。
16進数とは、0〜9とA〜Fまでの16種類の数字と文字を使って表現するもので、
00〜FFまで256通りの表現ができます。
タグは、BGCOLOR="#FF0000" とします。この時、# を絶対忘れないようにしましょう。
因みに 000000 はブラック、 FFFFFF はホワイトになります。
この3色の指定で1677万色も表現できます。
一度、いろいろ指定して試してみてください。
|
|
|
各枠の中の色を変えみよう！ |
今度は、2-2を見てください。
こんにちは の文字の枠だけピンクとなって色が違いますよね。
これは、どうすればいいでしょうか？
答えは次のとおりです。
<TABLE BGCOLOR=RED BORDER=1>
<TR>
<TD>表全体を赤にしました。</TD>
<TD BGCOLOR=PINK>こんにちは</TD></TR>
</TABLE>
このように色を変えたい枠には <TD BGCOLOR=XXX> とすればよいのです。
どうです、わかってきたでしょう！
ついでに <TR BGCOLOR=XXX> とすれば、その <TR> に属している
<TD> 全部に <TD BGCOLOR=XXX> と指定したことになります。
では仮に、<TR BGCOLOR=RED> と指定してさらに属している <TD> に
<TD BGCOLOR=GREEN> と指定すればどのようになるでしょう？
答えはGREENが優先します。
つまり、直近のタグを実行するようになります。
ほとんどが同じ色で一部の枠だけ違う色の時、この特性を利用して TR と TD
に BGCOLOR の指定をうまく使いわけします。
|
|
|
もうひとつの枠の色も変えよう |
2-3を見てください。
もうひとつの枠の色を変えることにしましょう。
これは、たいへん簡単ですよね。
前項の説明からしてもわかるよに <TD BGCOLOR=XXX> と記入すればよいだけです。
（この場合の色はLIGHTBULEにしました）
これは、あまり詳しく説明する必要がないと思いますのでちょっと手抜きして省略します。（^^;
|
|
| 枠線の太さを変えよう |
2-4を見てください。
2-3では、枠と枠の間の赤色が2-4の表では細くなっているのがわかります。
この枠と枠の間の太さをコントロールするタグが CELLSPACING です。
<TABLE BGCOLOR=RED CELLSPACING=1>
<TR>
<TD BGCOLOR=LIGHTBLUE>水色にしました。</TD>
<TD BGCOLOR=PINK>こんにちは</TD></TR>
</TABLE>
このように TABLE の後に記入すればいいのです。
ここで注意する必要があるのは、省略すれば CELLSPACING=2 と同じになります。
もちろん、 CELLSPACING=0 にすれば枠線はなくなり、数字を大きくすれば枠線も太く
なります。
また、前項にあった BORDER （外枠だけ）とも違いますので気をつけてくださいね。
あ、上の例では、BORDER=1 は省略しました。
|
|
| 枠の中を大きくしてみよう |
2-5を見てください。
枠が大きくなって、ゆとりがあるのがわかります。
表を作る時、あまりキューキューした感じだと文字が見にくくなりますので
ある程度ゆとりがあったほうがいいでしょう。
という訳で、枠の中の大きさをコントロールするのが CELLPADDING です。
<TABLE BGCOLOR=RED CELLSPACING=1 CELLPADDING=10>
<TR>
<TD BGCOLOR=LIGHTBLUE>水色にしました。</TD>
<TD BGCOLOR=PINK>こんにちは</TD></TR>
</TABLE>
CELLSPACINGの時と同じように TABLE の後に記入すればいいのです。
CELLPADDING は、一般の表では 4程度にすれば窮屈間はありません。
省略した場合は、CELLPADDING=1 と同じです。
下図は CELLPADDING CELLSPACING の関係を示したものです。
これで問題２はできたでしょう！！
今回のことはセンスのいいＨＰを作るためには絶対に理解してください。
理解しておかないと後々かっこいいＨＰは作れないと言っても過言ではありません。
そんなことなので、しっかりと復習してくださ〜〜い。
え〜っと、前回、文字の色や大きさなどのタグを説明すると言いましたが、
これも説明すると長くなりますので今回は、やめときます。
次回も表に関して説明します。
では、ごきげんよう〜
あ、最後に日本絶対に勝ちますよね〜〜 ガンバレ〜〜〜！！！
|
|
