表示編　6　「背景画像を用意せずに背景をグラデーション化させる」


	ホームページの背景には、あなたはどんな物を使いますか? シームレス(つなぎ目のない)パターンの画像ですか?お気に入りの一色で塗りつぶしますか? 実はここでは背景をグラデーションで表示してみようと思います。ただ、グラデーションのイメージ画像は用意しない方法です。これって、スタイルシートの定義をタグに組むだけでいいんです。何よりも、わざわざグラデーションの画像を作り、用意しなくてすむのは注目すべき点です。

背景画像を用意せずに背景をグラデーション化させる

<body style="filter:progid:DXImageTransform.Microsoft.Gradient
(gradientType='1',startColorstr='●●(色の名前か16進コード)',
endColorstr='●●(色の名前か16進コード)');">

・・・あなたのホームページのタグ・・・

</body>
</html>

ここで注目して欲しいのが、
緑の文字(ここでいう「gradientType='1'」)
赤の文字(ここでいう「●●(色の名前か16進コード)」
青の文字(ここでいう「●●(色の名前か16進コード)」の3つの色付きタグです。

まず緑の文字の数字は、グラデーションをかける方向を表します。縦にかけるか横にかけるかを0か1かの数字で決めます。

方向を決めたら、いよいよグラデーションの着色です。色の設定は「#●●●●●●」の16進コードか、「black」「white」「blue」といった「色名」で指定します。

赤の文字の色指定が「グラデーションの始まりの色(数字を0にした場合は画面の上の方の色)」、

青の文字の色指定が「グラデーションの終わりの色(数字を0にした場合は画面の下の方の色)」となります。

グラデーションをかける方向を表す数字

0	グラデーションを上から下にかける
1	グラデーションを左から右にかける

カラーコード

カラーコードは「#○○○○○○」のように、16進法で入力するか、「white」や「blue」のように、アルファベットで入力します。
カラーコードの参考

　更に応用してみましょう。