|
■テーブルの色と文字の色 テーブルの色は bgcolor= で指定できます。 ・表のひとつひとつのセル単位で指定するには TD タグのなかで bgcolor= を指定します。 ・表の横列の行単位で指定するには TR タグのなかで bgcolor= を指定します。 ・表全体の背景をまとめて指定するには TABLE タグのなかで bgcolor= を指定します。 文字の色は <FONT COLOR=(色コードまたは色名)>文字 </FONT> で指定できます。 たとえばテーブルの背景色とフォントの色を組み合わせることでこんな表現ができます
<TABLE border="0"> <TR><TD align="left" width="200" bgcolor="#6699FF"> <FONT color="#ffffff"><B>青い背景に白い文字</B></FONT> </TD></TR></TABLE> ほとんどの人はこれを問題なく見ることができるはずですが、ネットスケープのバージョン２でみると、このバージョンはテーブルの背景色をサポートしていないので背景は白色になり、そして文字が白ですから。。。内容がまったく読めないということになります。
そんなわけで、もしも旧式ブラウザでの閲覧まで考慮するならば、テーブル内の文字はテーブルの背景色がなくても読める色にするという配慮が必要なのです。 もっとも、閲覧ブラウザの基本をネットスケープ２以後にしぼるなら問題ありませんが．． ver 3 以下のブラウザはいろいろな問題があります(最新のにもありますが。。)ので、それを使っていること自体リスキーですし、あまりに旧ブラウザに拘泥すると先に進めなくなってしまうというのも事実です。いずれにせよいちおうキホンはこういうことだ、と知っているのはよいことだと思います。 ■Top |
| ■ ページの表示を速くするコツ |
まず必ず押さえておくべきポイントがあります。
テーブルの中に画像を出すときは、かならずサイズ指定をおこなう ということです。 なぜかというと、サイズを指定しなかった場合、画像の読み込みが完全に終わるまで画面に何も表示されない状態が続くからです。これは混雑時には相当に気になります。初めて訪問してくれた人がこんなページに遭遇したら、即他のウェブに去ってしまうでしょう。 この現象への対応法は簡単です。タグの中で画像のサイズを指定してやればよいのです。  <IMG src="pen5b.gif" alt="pen" height="25" width="25"> height は画像の高さ、width は幅です。ピクセルであらわします。こうすることでまずページに画像の表示エリアが確保され、画像本体の読み込みは後回しにされますので、感覚的な待ち時間が大幅に少なくなります。ALT= を使って説明を書いておけば、ユーザーは画像が表示される前に内容を把握することができるのでさらに便利です。
たとえば CGI や外部サイトを利用したアクセスカウンターなど、画像サイズの指定が難しい＆混雑時は重くなりそう．．こんな場合は、カウンターを意識的にテーブルの外に出すか完全に独立したテーブルに入れてしまうようなページデザインにしてしまいましょう。広告の掲示部も同様なことがいえますね。 画像についてつけ加えるなら、画像の縦横サイズはオリジナルに合わせ正確に指定しましょう。 サイズ指定を変えることで画像の大きさを調整できるというような説明をしているところもありますが、これはおすすめしません。棒線や単色画像のような単純なものならともかく、ほとんどの場合設計時点のサイズを変えるとデザインががたがたになります。つまりあなたのページがカッコ悪くなるということです。 ■Top |
| ■ テーブルの幅と画像の関係 |
画像は必ずサイズ指定して使うということは上で説明しました。ここではもう少し突っ込んで、サイズとテーブルの幅の関係を説明しましょう。 テーブルの幅を調整するときは width= を使います。
さて、テーブルを使ってウェブに画像を表示しようと思います。 幅25ピクセルの画像をテーブルを使わずに普通に並べればこうなります   テーブルの width 指定を使って間隔を調整します。width=40 で指定したのが下の表です。 (わかりやすいように border="1" で枠線をだしてあります)
<TABLE border="1"> <TR> <TD width="40"><IMG SRC="pen5b.gif" height="25" width="25"></TD> <TD width="40"><IMG SRC="pen6b.gif" height="25" width="25"></TD> <TD width="40"><IMG SRC="pen7b.gif" height="25" width="25"></TD> </TR> </TABLE> こんな指定をしています。 今度はうっかり間違えて、画像の幅よりも狭く width 指定をやってしまいました。 真ん中だけ width="15" (画像よりも10ピクセル狭い)としてあります。
<TABLE border="1"> <TR> <TD width="40"><IMG SRC="pen5b.gif" height="25" width="25"></TD> <TD width="15"><IMG SRC="pen6b.gif" height="25" width="25"></TD> <TD width="40"><IMG SRC="pen7b.gif" height="25" width="25"></TD> </TR> </TABLE> おそらくほとんどのブラウザではテーブルの幅は狭まるものの、画像は正しく表示できているはずです。ところがこれをネットスケープ３で見るとこんな感じになります。  ネットスケープ３でのキャプチャ図です悲惨ですね。思わぬ盲点ですが、 テーブルでは必ず画像幅と同じかそれ以上の width 指定になっているかチェックする ことをこころがけるようにしましょう・・・といいつつ、私もよくやってしまいます。 ちなみに高さの指定 height= は間違えても大丈夫でした。 ■Top |
| ■ テーブルの中の画像のアレンジ |
テーブルの中で画像をアレンジしたいときがあります。そんなときに使う方法です。 まずは左右の位置のアレンジです。画像を枠の左端・真ん中・右端にアレンジします。 (画像の幅よりも広い幅の枠を WIDTH= で確保しておきます)
<TABLE border="1"> <TR> <TD width="40"> <IMG SRC="pen5b.gif" height="25" width="25"></TD> <TD width="40" ALIGN="CENTER"> <IMG SRC="pen6b.gif" height="25" width="25"></TD> <TD width="40" ALIGN="RIGHT"> <IMG SRC="pen7b.gif" height="25" width="25"></TD> </TR> </TABLE> このように、左右の調整は ALIGN= でおこないます。無指定は左端に(LEFT)なります。 つぎは上下の位置のアレンジです。画像を枠の下端・真ん中・上端にアレンジします。 (画像の高さよりも広い高さの枠を HEIGHT= で確保しておきます)
<TABLE border="1"> <TR> <TD width="40" height="50" VALIGN="bottom"> <IMG SRC="pen5b.gif" height="25" width="25"></TD> <TD width="40" height="50" VALIGN="middle"> <IMG SRC="pen6b.gif" height="25" width="25"></TD> <TD width="40" height="50" VALIGN="top"> <IMG SRC="pen7b.gif" height="25" width="25"></TD> </TR> </TABLE> このように、上下の調整は VALIGN= でおこないます。無指定は middle と同じになります。 ※ top の代わりに absmiddle も使えます ■Top |
| ■ テーブルの中の画像のアレンジ・余白 |
画像のまわりの余白 これは IMG タグのオプションですが、画像にテキストが加わったときなどに使える調整です。 画像の左右に余白を置きたいときは hspace を使います。
<TABLE border="1"> <TR><TD width="200"> <IMG SRC="pen5b.gif"height="25"width="25" hspace="8">■８ピクセル離します</TD> </TR></TABLE> このようにすると画像とテキストの間に余白ができるので、テキストが読みやすくなります これ以外には画像の上下余白を調整するものに vspace があります。 ◎おまけ テキストを無視して画像を右端に配置したいときは IMG タグの中で align="right" を使います
<TABLE border="1"> <TR><TD width="200"> <IMG SRC="pen5b.gif" height="25" width="25" hspace="8" align="right">■画像を右寄せします</TD> </TR></TABLE> ■Top |
| ■ みえないページをつくる・・？ |
『見えないページ』をつくってみましょう。もちろん正しい使い方ではありません。 <TABLE> <TR><TD> 見えないページ１行目 <TABLE> <TR><TD> 見えないページ２行目 </TD></TR> </TD></TR> </TABLE> テーブルの中にまたテーブルがある指定です。 上のタグは、ｉｅでは正常に見えます。ところがネットスケープだとまったく見えない、空白のページになります(ver 4.01J で確認)。 何が悪いのでしょう？ よくみるとわかりますが、</TABLE> がひとつ足りず、テーブルタグが完全に閉じていません。赤い太字に対応する </TABLE> タグが無いのです。  <TABLE>〜</TABLE>のように、開始と終了がペアになっているタグを書くときにはコツがあります。最初に開始・終了タグだけを先に書いてしまい、その中に内容を書いてゆくようにすればよいのです。プログラムの書き方と一緒ですが、こうすれば最後の</TABLE>を忘れることがなくなります。 ■Top ←テーブル１へ |
| Ushikai and Icons Room |