###その五・・・・バーガーもいろいろ工夫###
用意する物 | |
・道具・・・・・・ | PC PC内メモ帳(windows) Symple Text(マック) 適当な画像 今まで作ったhtmlファイル ブラウザ(オフラインモードで使用) ※ブラウザは、インターネットエクスプローラー(IE)か ネットスケープ(ネスケ)がいいです。 私が他のものをもってないので、確認できない為です。 決して回し者ではありません。/^-^; |
●今回は容器(tableタグ)をカラフルにしたりいろいろ変えていきます。 いきなりソースでいきます。 |
|||||||
ソース(1) | 画面表示(1) | ||||||
<html> <head> <title> 練習のページ </title> </head> <body bgcolor="white"> <center> <br><br> <table border="5" bgcolor="blue" bordercolorlight="lime" bordercolordark="green"> <tr> <td><font color="white">いろいろ試そう♪</font></td> </tr> <tr> <td bgcolor="white">セルの中の色も変わるよ></td> </tr> </table> </center> </body> </html> |
|
||||||
bgcolor="blue"→表の背景色を指定 border="5"→枠線の太さを指定 bordercolorlight="lime"→表枠の左と上の色を指定(明るい色)※但しネスケでは指定色にはならない bordercolordark="green"→表枠の下と右の色を指定(暗い色)※但しネスケでは指定色にはならない <td bgcolor="white">→セルの背景色を指定 ※表の背景もセルの背景も、もちろん画像表示もできます。 そのときは、bodyタグの中に打ったbackground="画像ファイル名"で指定します。 ※ネスケ=ネットスケープ(ブラウザ) |
|||||||
セルの中が窮屈そうだ、と感じた人いませんか? そんなときは、こうしましょう。 (表のみのソースにします。) |
|||||||
ソース(2) | 画面表示(2) | ||||||
<table border="5" bgcolor="blue"
bordercolorlight="lime" bordercolordark="green" sellpadding="5"
cellspacing="10"> <tr> <td><font color="white">いろいろ試そう♪</font></td> </tr> <tr> <td bgcolor="white">セルの中の色も変わるよ></td> </tr> </table> |
|
||||||
sellpadding="5"→セル内のスペースを5ピクセルに指定。(文字や画像と枠との距離) cellspacing="10"→セルとセルの間のスペースを10ピクセルに指定。 |
|||||||
では、一気に複雑化してしまおう・・・f^-^; | |||||||
ソース(3) | 画面表示(3) | ||||||
<table border="1" bordercolorlight="lime"
bordercolordark="green" sellpadding="10"
cellspacing="0"> <tr> <th colspan="2" bgcolor="blue"><font color="white">いろいろ試そう♪(横2つ分)</font></th> </tr> <tr> <td rowspan="3">(下3つ分)</td> <td>いろいろ</td> </tr> <tr> <td>変えて</td> </tr> <tr> <td>確かめてみよう</td> </tr> </table> |
|
||||||
<th></th>→中央表示、太字にしてくれる <td>でやりたい場合は、<td align="center"><b>いろいろ試そう♪</b></td> としないと上のように表示されない。 colspan="○"→○の部分には数値を入れる。 上の場合は2なので、同じ行の2つのセルを合わせた幅のものになる。 rowspan="○"→○の部分には数値を入れる。 上の場合は3なので、下方向に3つのセルを合わせた幅のものになる。 ※rowspanは、指定ナシの場合、縦方向の真ん中表示になります。 セルの上部に表示させる場合は、"align="top"" セルの下の方に表示させる場合は、"align="bottom"と指定します。、 ※colspanは、指定ナシの場合、標準の左寄せになります。 真ん中に表示させる場合は、align="center" 右寄せがいい場合は、align="right"で指定します。 |
|||||||
※表の中に表をいれることもできます。 色をつけて重ねたりすると額縁みたいにみえます。 (ただし、ネットスケープでは色がきちんと表示されません。) このページの画面表示の表も表の中に表が入っていることになります。 ※<td>*</td>あるいは<th>*</th>の*の部分に表のタグを入れればOKです。 きちんと挟んであれば、OKです。 |
|||||||
例) <table border="2" bgcolor="teal"> <tr><td> <table border="2" bgcolor="white"> <tr><td> ここには、文章でも画像でも、またもう一つ表でもOK。 </td></tr></table> </td></tr> </table> |
|||||||
1つ目(外側)の表 | 2つ目(内側)の表 | ||||||
<table border="2" bgcolor="teal"> <tr><td> </td></tr> </table> |
<table border="2" bgcolor="white"> <tr><td> ここには、文章でも画像でも、またもう一つ表でもOK。 </td></tr></table> |
||||||
ソース(4) | 画面表示(4) | ||||||
<table border="2" bgcolor="green"> <tr><td> <table border="2" bgcolor="yellow" cellpadding="5"> <tr><td> <img src="guruguru-s.jpg"> </td></tr></table> </td></tr> </table> |
|
||||||
ネスケの場合、上のソースは、 ※1つ目の表の枠の色は、ページ背景色の色、白色。 ※2つ目の表の枠が、1つ目の表の指定色、緑色。 勿論、両方とも、中のセル内はそれぞれに指定された色になります。 ブラウザを複数持っている方は、試してみてください。 ※私はIE(インターネットエクスプローラー)とネスケしか持っていませんので、他のブラウザの場合はわかりません。 |
ページができたら、今回のものも見やすいように、
他のページとリンクさせておきましょう。
あと、注意点としては、インターネットエクスプローラーと
ネットスケープとは、かなり表示が違う場合があります。
例えば枠の色とか背景色とかなんですが、そこは・・試してみて下さい。
というわけで、『HTML入門編』も『表』まで済みました。
ここまで見てくださりありがとうございました。m(__)m
個人的に、HTMLソースは、ホワイトソースより簡単かも?と思ってみたり・・(笑)
どっちも注意深くやればいいんですけどね。
ここまで慣れてくれば、もうタグ辞典を買ってきても大丈夫。
自分のホームページをどんどんいいものに育てていきましょう。
(・・・・といいつつ、私ってやってない?!(汗))
解説希望などございましたら、お気軽にどうぞ〜♪