いいモノみーつけた!


  パソコン使い方教室:ホームページ小技集


  HOME


  

背景関連


   

グラデーション



  

画像関連


   

サムネイル(1)


   

サムネイル(2)


   

スライドショウ


   

クリックで切り替え



  

日付・時間表示関連


   

時刻表示(1)


   

時刻表示(2)


   

時間別メッセージ


   

曜日別メッセージ


   

日別メッセージ



  

テキスト関連


   

文字列の点滅



  

ウインドウ関連


   

サブウインドウの表示



  

一般的な便利技


   

クリッカブル マップ


  

関連サイト


   

パソコン使い方教室


   

ホームページ講座


   

CSS 講座




背景色のグラデーション


この例は、テーブルの背景色をグラデーションにしています。
勿論、ウェブページ全体の背景色にも利用できます。



上の例のタグソースは、次の通りです。


行数

タグソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
<head>
<title>背景色のグラデーション</title>
</head>
<body>

<div align="center">
<table border="0" width="550">
<tr>
<td height="150" bgcolor="#ffffff" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#ff7fffd4, endColorStr=#ffffe4b5)">
<p align="center"><b>この例は、テーブルの背景色をグラデーションにしています。<br>勿論、ウェブページ全体の背景色にも利用できます。</b></p>
</td>
</tr>
</table>
</div>

</body>
</html>


11行目の gradientType=0, の値はグラデーション方向で、0 が上から下、1 が左から右になります。
12行目のカラーコード # の後の桁数は8桁になっていますが、前の2桁は透明度を指定しています。
00・・・・・・99,ff の範囲で指定しますが、00 が透明、ff が不透明です。
この透明度の指定に続く6桁が、カラーコードです。

下のボタンを押すと、グラデーションのテストツールが別ウインドウで開きます。



Copyright (C) N.Hamano All Rights Reserved