全て
| カテゴリ未分類
| HTML文字画像リンク
| HTMLタグ（テーブル）
| HTML（応用編）
| 楽天で購入した商品
| スポーツ,アウトドア,車,バイク
| 心緒
| インテリア,ライト,収納,ベビー,キッズ
| アフィリエイト入門編
| TV・オーディオ・カメラ
| 自己管理,美容,インナー
| DVD,CD,本,旅,楽器
| 生活,美容,健康,家電
| 金運アップ,風水,自己トレ
| ユーザービリティとSEO
| 楽天市場のPR
| アフィリエイト
| 音楽
| 食品,グルメ,飲料
| ダイエット,健康,食品
| 園芸,DIY,ペット,おもちゃゲーム
| 日用品雑貨,キッチン用品,寝具
| パソコン・周辺機器
| ファッション,ジュエリー,アクセサリー,靴
| 防災,介護,医療
| ブランド雑貨,時計
| 酒場放浪記
| 天気気象予報
| 気になる動画
| 最近チェックした商品
| 血圧測定
| 気になるニュース
| 人生の名言集
2006.07.21
テーマ： ホームページ作成の悩み(550)
カテゴリ： HTML（応用編）
・背景をグラデーションにする2
前回は、背景をヨコにグラデーションしました。
今回は、背景をタテにグラデーションして遊んでみます。
今回は
をつかいます。
入力ソースはこちら。
前回のパターンに、「 startx=100 」「 finishy=10 」が追加されました。
まず、「 startx=100 」ですが、タテのグラデーションのときは、
この数字は「 100 」のままにしておきます。
つぎに「 finishy=10 」ですが、これはタテのグラデーションの度合いを設定します。
（数字は 49 まで設定できます）
「 finishy=49 」のとき。（こんなにはっきりしちゃいます）
入力ソース。
ちなみに「 opacity=50 」にすると・・・
こんな感じに全体が薄くなりました。
入力ソース。
「td」にも設定できます。
入力ソース。
次回は、スタイルシートをつかって文字をカスタマイズします。
前回は、背景をヨコにグラデーションしました。
今回は、背景をタテにグラデーションして遊んでみます。
今回は
「 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>
<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>
<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>
<tr><td></td></tr></table>
「td」にも設定できます。
入力ソース。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #0066ff;">
次回は、スタイルシートをつかって文字をカスタマイズします。
お気に入りの記事を「いいね！」で応援しよう
Last updated
2008.12.21 10:30:47
[HTML（応用編）] カテゴリの最新記事
-
ホームページＨＴＭＬソースの基本構造 2008.04.04
-
カーソルの形状を変更する方法 2008.03.22
-
楽天広場HTML講座 スクロールバーのテンプ… 2007.06.30
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
