楽天広場HTML講座・背景をグラデーションにする２
・背景をグラデーションにする2■ グラデーションをタテにする前回は、背景をヨコにグラデーションしました。今回は、背景をタテにグラデーションして遊んでみます。今回は「filter:alpha(opacity=100,finishopacity=30,style=1,startx=100,finishy=10);」をつかいます。入力ソースはこちら。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #339933;background-color:#ccffcc;filter:alpha(opacity=100,finishopacity=30,style=1,startx=100,finishy=10);"><tr><td></td></tr></table>前回のパターンに、「startx=100」「finishy=10」が追加されました。まず、「startx=100」ですが、タテのグラデーションのときは、この数字は「100」のままにしておきます。つぎに「finishy=10」ですが、これはタテのグラデーションの度合いを設定します。（数字は49まで設定できます）「finishy=49」のとき。（こんなにはっきりしちゃいます）入力ソース。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #339933;background-color:#ccffcc;filter:alpha(opacity=100,finishopacity=30,style=1,startx=100,finishy=49);"><tr><td></td></tr></table>ちなみに「opacity=50」にすると・・・こんな感じに全体が薄くなりました。入力ソース。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #339933;background-color:#ccffcc;filter:alpha(opacity=50,finishopacity=30,style=1,startx=100,finishy=10);"><tr><td></td></tr></table>「td」にも設定できます。入力ソース。<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #0066ff;"><tr><td width="100%" height="30%" style="background-color:#ccffff;filter:alpha(opacity=100,finishopacity=30,style=1,startx=100,finishy=10);"></td></tr><tr><td width="100%" height="70%"></td></tr></table>次回は、スタイルシートをつかって文字をカスタマイズします。[トップページへ戻る][次のページ⇒]
出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒
ペット
趣味・ゲーム
映画・ＴＶ
音楽
読書・コミック
旅行・海外情報
園芸
スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル
