お取り寄せいいもの見つけたよ！

楽天カード

購入履歴

カレンダー

プロフィール

かずさか

フォローする

カテゴリ

楽天ｔｏｔｏ

(1)

サイド自由欄

< 新しい記事

新着記事一覧(全5054件)

過去の記事 >

2005年01月13日

テーブル（　table　）のセルを使って枠飾り　グラデーション枠にしてみましょう

カテゴリ：日記用テンプレート

グラデーション枠にしてみましょう

３行３列のテーブル
全体の設定
背景色　bgcolor="#000033"　テーブルを中央に表示　align="center"

１行１列目のセル
背景色 #0000ff　を指定
１行２列目のセル
１行３列のテーブルの背景色をグラデーション表示
#ff0000ff　→　#ffff00ff　→　#ffff0000　→　#ffffff00
１行３列目のセル
背景色 #ffff00　を指定

２行１列目のセル
３行１列のテーブルの背景色をグラデーション表示
#ff0000ff　→　#ffff00ff　→　#ffff0000　→　#ffffff00
２行２列目のセル　　テキストボックス（　div タグ　に指定　）
内容があふれた場合はスクロールバーをつけて表示　overflow:auto;
スクロールバー色の設定
基本色　　　　scrollbar-base-color:#000066;
背面部分の色　scrollbar-track-color:#000033;
矢印の色　　　scrollbar-arrow-color:#ffffff;
文字色　color:#ffffcc;
フォントサイズ　font-size:12pt;
行揃えを左寄せ　text-align:left;
１行の高さフォントサイズの1.5倍　line-height:1.5;
２行３列目のセル
３行１列のテーブルの背景色をグラデーション表示
#ffffff00　→　#ff00ff00　→　#ff00ffff　→　#ff0000ff

３行１列目のセル
背景色 #ffff00　を指定
３行２列目のセル
１行３列のテーブルの背景色をグラデーション表示
#ffffff00　→　#ff00ff00　→　#ff00ffff　→　#ff0000ff
３行３列目のセル
背景色 #0000ff　を指定

グラデーションの指定（　ＩＥ5.5以上対応　）

グラデーションの方向を指定します。
GradientType=0　縦方向効果　　GradientType=1　横方向効果

グラデーション開始時の　透明度　と　色　を指定します。
StartColorStr=#aarrggbb
設定値は８桁表示で#00000000～#ffffffffとなります。
aaは透明度　rrggbbは赤・緑・青の６桁のカラーコードです。

グラデーション終了時の　透明度　と　色　を指定します。
EndColorStr=#aarrggbb
指定方法は　開始時と同じ

ＨＴＭＬタグ　（　半角で約２７００文字　）は

<table border="0" width="530" height="530" bgcolor="#000033" cellspacing="0" cellpadding="0" align="center"><tr><td width="10" height="10" bgcolor="#0000ff"></td><td width="510"><table border="0" width="100%" height="10" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff0000ff,EndColorStr=#ffff00ff);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffff00ff,EndColorStr=#ffff0000);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffff0000,EndColorStr=#ffffff00);" width="33%"></td></tr></table></td><td width="10" bgcolor="#ffff00"></td></tr><tr><td height="510"><table border="0" width="10" height="510" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff0000ff,EndColorStr=#ffff00ff);" height="170">
</td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffff00ff,EndColorStr=#ffff0000);" height="170">
</td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffff0000,EndColorStr=#ffffff00);" height="170"></td></tr></table></td><td align="center" valign="middle"><div style="overflow:auto;width:500px;height:500px;color:#ffffcc;font-size:12pt;text-align:left;line-height:1.5;scrollbar-base-color:#000066;scrollbar-track-color:#000033;scrollbar-arrow-color:#ffffff;">
テーブルのセルを使って枠飾り<BR>グラデーション枠にしてみましょう<BR><BR>
３行３列のテーブル<BR>全体の設定<BR>背景色　bgcolor="#000033"　テーブルを中央に表示　align="center"<BR><BR>
１行１列目のセル<BR>背景色 #0000ff　を指定<BR>
１行２列目のセル<BR>１行３列のテーブルの背景色をグラデーション表示<BR>#ff0000ff　→　#ffff00ff　→　#ffff0000　→　#ffffff00<BR>
１行３列目のセル<BR>背景色 #ffff00　を指定<BR><BR>
２行１列目のセル<BR>３行１列のテーブルの背景色をグラデーション表示<BR>#ff0000ff　→　#ffff00ff　→　#ffff0000　→　#ffffff00<BR>
２行２列目のセル　　テキストボックス（　div タグ　に指定　）<BR>
内容があふれた場合はスクロールバーをつけて表示　overflow:auto;<BR>スクロールバー色の設定<BR>基本色　　　　scrollbar-base-color:#000066;<BR>背面部分の色　scrollbar-track-color:#000033;<BR>矢印の色　　　scrollbar-arrow-color:#ffffff;<BR>文字色　color:#ffffcc;<BR>フォントサイズ　font-size:12pt;<BR>行揃えを左寄せ　text-align:left;<BR>１行の高さフォントサイズの1.5倍　line-height:1.5;<BR>
２行３列目のセル<BR>３行１列のテーブルの背景色をグラデーション表示<BR>#ffffff00　→　#ff00ff00　→　#ff00ffff　→　#ff0000ff<BR><BR>
３行１列目のセル<BR>背景色 #ffff00　を指定<BR>
３行２列目のセル<BR>１行３列のテーブルの背景色をグラデーション表示<BR>#ffffff00　→　#ff00ff00　→　#ff00ffff　→　#ff0000ff<BR>
３行３列目のセル<BR>背景色 #0000ff　を指定<BR>

</div></td><td><table border="0" width="10" height="510" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff00,EndColorStr=#ff00ff00);" height="170">
</td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff00ff00,EndColorStr=#ff00ffff);" height="170">
</td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff00ffff,EndColorStr=#ff0000ff);" height="170"></td></tr></table></td></tr><tr><td height="10" bgcolor="#ffff00"></td><td><table border="0" width="100%" height="10" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffffff00,EndColorStr=#ff00ff00);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff00ff00,EndColorStr=#ff00ffff);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff00ffff,EndColorStr=#ff0000ff);" width="33%"></td></tr></table></td><td bgcolor="#0000ff"></td></tr></table>

お気に入りの記事を「いいね！」で応援しよう