楽天市場・総合オンラインショッピングモール【格安・激安 専門市場 価格比較サイト】訳あり・本日の最安値特売商品も多数掲載・内職応援・LemonのアフィリエイトStyle日記
全て
| カテゴリ未分類
| HTML文字画像リンク
| HTMLタグ（テーブル）
| HTML（応用編）
| アフィリエイト入門編
| ユーザービリティとSEO
| 楽天で購入した商品
| 生活,美容,健康,家電
| スポーツ,アウトドア,オート
| 金運アップ,風水,自己トレ
| 楽天市場のPR
| 食品,グルメ,飲料
| ダイエット,健康,食品
| おもちゃゲーム,園芸,ペット
| 日用品雑貨キッチン寝具
| ファッション,香水,オシャレ
| パソコン・周辺機器
| 年間行事,介護,防災,医療
| 人気家電,AV機器,カメラ
| 自己管理,美容,グッズ
| アフィリエイト
| DVD,CD,本,旅,楽器
| インテリア,ライト,ベビー,キッズ
| 想い
| 音楽
| brand
楽天広場HTML講座・背景をグラデーションにする
「ホームページ作成の悩み(17366)」
|
[ HTML（応用編） ]
|
・応用編
■ 背景をグラデーションにする
前回は、カラフルなテーブル枠3を学びました。
今回は、背景をヨコにグラデーションして遊んでみます。
今回は| 「filter: alpha(opacity=100,finishopacity=30,style=1);」 |
をつかいます。
入力ソースはこちら。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=1);">
<tr><td></td></tr></table>
|
まずは、「opacity=100」の部分。
これは前回もでてきましたが、背景自体の透明度を設定します。
（数字が小さいほど、背景が透明になります）
入力ソース。
「opacity=50」のとき。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=50,finishopacity=30,style=1);">
<tr><td></td></tr></table>
|
つぎに「finishopacity=30」の部分。
グラデーションの度合いを設定します。
（数字が小さいほど、グラデーションの割合が大きくなります）
「finishopacity=70」のとき。
入力ソース。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=70,style=1);">
<tr><td></td></tr></table>
|
「finishopacity=10」のとき。
入力ソース。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=10,style=1);">
<tr><td></td></tr></table>
|
つぎに「style=1」の部分。
グラデーションのパターンを設定します。
（style=1かstyle=2）
「style=1」のとき。
入力ソース。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=1);">
<tr><td></td></tr></table>
|
「style=2」のとき。
入力ソース。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=2);">
<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);"></td></tr><tr><td width="100%" height="70%"></td></tr></table>
|
次回は、このグラデーションをタテにしてみます。
Last updated
2008.12.21 10:29:34
|