<TABLE>を使ってオリジナルのバーを作ってみましょう♪

はじめに：<TABLE>タグをレイアウトに用いるのはあまり望ましくない、と聞きますが、個人のホームページでなら使ってみても良いのではないでしょうか？このたきにゃん工房ですら訪れる方のほとんどがIE4です。次にネットスケープですが、どちらもバージョンの古い方がお越しになるのはまれです。ですから、不特定多数へ向けての発信ではなく、お友達にみてもらいたい、自己紹介代わりに作っておきたい、という方は使っちゃっても良いんじゃないでしょうかね。
もうすでに色つきテーブルでほとんどの皆さんがレイアウトしてるようですし。もうひと手間かけてみましょうよ。

ただし、用いる場合は意図したとおりに見てもらえない可能性があることを自覚して、重要な事は書かないとか、デザインが崩れることもあるのを覚悟する、なーんてことは大事かもしれませんね。（気にくわない！とされて、WEBサイトを全く見てもらえない可能性だってあります。）また、ソースを見ていただいたらわかるように、記述する文章量がものすごく増えるのでその分読み込みは遅くなります。

この先また変わってくるかもしれませんが、せっかくこういう技があるのだから、ひとまずお使いになってみて下さい。

	Welcome!!

上の絵、一つの絵に見えますよね。でも表の枠を表示してみるとこのようになってます。

	Welcome!!

表は実際このようになっています。

表のセルに色を付ける方法は説明しません。それはご自分で覚えて下さい。
この場合、A,B,D,Eに色をつけます。素材の色は#fec2e2なのでそれを指定します。

後はGに左下用の素材を１つ、Hに下中央用の素材を12こ、Iに右下用の素材を１つ、Fに右中央用の素材を5つ、Cに右上用の素材を１つ入れてやります。

A	B
D	E

A,B,Dに文字が入ると崩れるので、消しますね。

	E

ココで注意！IEをお使いの方は何も気づかないでしょうが、ネットスケープだとA,B,Dのセルの背景色が消えてしまっているはずです。（枠が太くなってセルが無くなってますよね？）ネットスケープはセルの中身が空っぽだといくら<TD bgcolor="#fec2e2"></TD>と指定しても色を付けてくれません。
そこで、小さなGIFをこっそりしのばせることにします。コレ→　です。見えませんか？見えちゃ困ります(笑)しのばせるぐらいなので1*1ピクセルのちっちゃなちっちゃな透過GIFです。
IEを使っている方ももちろんやらないとダメですよ。自分ではきれいに見えていても、ネットスケープでやってきたお客さんにはボロボロの絵が見えると言うとんでもなくダサイ事が起きてしまいます。
ではそれをしのばせて、枠を消してみましょう。<TABLE border="0" cellspacing="0" cellpadding="0">です。枠、罫線の幅、セル内の余白すべてを0にします。

	でーきた！ ああ、疲れた・・・

出来ました。Eの部分には自由に文字を書くことが出来ます。文字量に応じて、横幅をH、高さをFで調節できます。並べるGIFファイルの数で自由に変えられます。画像で作ると文字を変えたいときは１から作り直しですが、これはただ文字を打ち直すだけですから便利です。

	応用例

Eのところは好きにいじくり回しても良いわけです。HとFで隙間のないようにしてあげれば。
真ん中の行が増えても、無くてもいけます。

りんご みかん バナナ

新着情報 自己紹介

新着情報 自己紹介 長さが思いのままに。

素材の組み合わせでこんな事もできます。

	What's NEW!!
	Music
	Link

我が家のNetscape Navigator Version 2.01 [ja]でどう見えているか画像にしてみました。こちらへどうぞ。
この程度なら良いのではないでしょうか。注意すべきは、本来のバックグラウンドカラーの上でも読める色で文字を書くと言うことですね。