ホームページ楽々講座225


 No.215でご紹介した背景色のグラデーションをテーブルのセルの背景色に応用しました。
 上のラインは横3個のセルに分け、それぞれにグラデーションを付けました。
<TABLE CELLSPACING="0" WIDTH="100%"><TR> <TD STYLE="width:33%;height:5;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorstr=#ff0000,endColorstr=#00ff00)"></TD> <TD STYLE="width:34%;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorstr=#00ff00,endColorstr=#0000ff)"></TD> <TD STYLE="width:33%;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorstr=#0000ff,endColorstr=#ff0000)"></TD> </TR></TABLE>

ホームページ楽々講座225
 四角の上下のバーは背景色を透過して背景画像を表示し、本文欄はグラデーションのみを付けました。
<TABLE STYLE="font-size:11pt;color:navy;" CELLPADDING="10" ALIGN="center"> <TR><TD STYLE="height:30;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorstr=#558B4513,endColorstr=#55DEB887)" BACKGROUND="bg.gif"> <FONT SIZE="5" COLOR="#ffffff"><B>ホームページ楽々講座225</B></FONT></TD></TR> <TR><TD STYLE="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#ffffff,endColorstr=#f5f5dc)">表示する文字列</TD></TR> <TR><TD STYLE="height:20;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorstr=#558B4513,endColorstr=#55DEB887)" BACKGROUND="bg.gif"></TD></TR> </TABLE>