< 新しい記事

新着記事一覧(全11076件)

過去の記事 >

全て | カテゴリ未分類 | HTML文字画像リンク | HTMLタグ（テーブル） | HTML（応用編） | 楽天で購入した商品 | スポーツ,アウトドア,車,バイク | 心緒 | インテリア,ライト,収納,ベビー,キッズ | アフィリエイト入門編 | TV・オーディオ・カメラ | 自己管理,美容,インナー | DVD,CD,本,旅,楽器 | 生活,美容,健康,家電 | 金運アップ,風水,自己トレ | ユーザービリティとSEO | 楽天市場のPR | アフィリエイト | 音楽 | 食品,グルメ,飲料 | ダイエット,健康,食品 | 園芸,DIY,ペット,おもちゃゲーム | 日用品雑貨,キッチン用品,寝具 | パソコン・周辺機器 | ファッション,ジュエリー,アクセサリー,靴 | 防災,介護,医療 | ブランド雑貨,時計 | 酒場放浪記 | 天気気象予報 | 気になる動画 | 最近チェックした商品 | 血圧測定 | 気になるニュース | 人生の名言集
2006.07.21
XML

楽天広場HTML講座・背景をグラデーションにする

テーマ： ホームページ作成の悩み(550)
カテゴリ： HTML（応用編）
・応用編





前回は、カラフルなテーブル枠3を学びました。
今回は、背景をヨコにグラデーションして遊んでみます。



今回は
「 filter: alpha(opacity=100,finishopacity=30,style=1); 」
をつかいます。





入力ソースはこちら。
&LT;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) ;" &GT;
&LT;tr&GT;&LT;td&GT;&LT;/td&GT;&LT;/tr&GT;&LT;/table&GT;




まずは、「 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

もっと見る



【毎日開催】
15記事にいいね！で1ポイント
10秒滞在
いいね! -- / --
次の日記を探す
おめでとうございます！
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X
© Rakuten Group, Inc.
X

Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: