遠近感のあるテーブル


	● 　遠近感のあるテーブル　 ● 遠近感を感じる台形のフレームです。左右の三角の素材は小さな物をブラウザで拡大表示している為いくら大きなテーブルにしても超軽量！というのがウリです。使い勝手が良いかどうかは別問題という事で(笑) 道路バージョンも作ってみました。【透過処理済】

下の20ｘ20ｐｘの三角をタグで大きくして、縦３つに割ったテーブルの左右に貼ります。
例・<IMG src="frame_tr01.gif" width="20" height="100" border="0">
詳しくは下のＱ＆Ａを見てね！

▲おもちゃを置いてみました。▲

▼タグ見本▼

画像	ファイル名	大きさ(px)	色
	frame_tr01.gif	20x20	#FFFFFF
	frame_tr02.gif	20x20	〃
	frame_tr03.gif	20x20	#FF3300
	frame_tr04.gif	20x20	〃
	frame_tr05.gif	20x20	#000000
	frame_tr06.gif	20x20	〃
	frame_tr07.gif	20x20	#CCCCC
	frame_tr08.gif	20x20	〃
	frame_tr09.gif	10x25	－

▲道路バージョンです。▲

▼タグ見本▼

●遠近感のあるテーブルQ＆A●

◆なんだか良くわかりません◆

こんな感じです↓

画像として貼り付けます

セルの背景に三角と同じ色を設定してください

こちらも画像として<IMG src="三角のファイル名">です

画像として貼り付けた三角を縦方向height="ピクセル数"横方向width="ピクセル数"で拡大します。
テーブルの枠は消してください。例・<TABLE cellpadding="0" cellspacing="0">
真ん中のセルの横幅を変えれば文字などを入れるスペースが大きくなります。

◆台形が崩れる◆

三角の縦幅は左右同じにしてください。
三角の縦幅よりも真ん中のセルの内容が大きいと台形が崩れてしまいます。
三角を大きめにするか、どのブラウザでも文字が一定に表示されるようにスタイルシートで文字の大きさを指定してください。

◆応用編◆

左右の三角の幅を変えると斜めから見た感じの遠近感になります。
下は三角とタグ打ちのみで作った入り口のイメージ。


入り口	・