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


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

グラデーションの設定をスタイルシートに登録することでの応用

このテクニックは一つのページにいくつも適応することが出来ます。テーブルの1つ1つのセルに割り当てることももちろん、指定した文字にマーカーのように表現することも可能。
スタイルシートのIDの属性を使い、各IDに好きな名前を付けてそれぞれのIDに違う色や向きを決めておけば、グラデーションの画像ファイルを1つも用意することなくカラフルなページを作成できます。

→カラフルな碁盤形の表を作ってみましょう。

早速、各セルに割り当てたい好きなグラデーションをあらかじめ決めて、スタイルシートに登録してみましょう。
例として、ここで4種類のグラデーションのサンプルを決めてみました。

(ここではInternet Explorer以外のブラウザーを使っている方にも分かるように、あえて画像を用意してあります)

水色から紫(■#70d3f3→■#7f1084) 向きは縦	ピンクから赤(■#f9c4d1→■#e60011) 向きは縦
黄緑から深緑(■#a1e205→■#324a15) 向きは縦	白から橙色(□white→■#fc5c00) 向きは横

まず、この4種類のグラデーションを、タグとして記入します。それぞれのグラデーションに付ける(スタイルシートでの)IDは、分かりやすいように、「grad1」「grad2」「grad3」「grad4」としましょう。
!　スタイルシートでのIDの名前はHTMLのタグに使われる名前は指定できません。

ではこれを、表示したいページのHTMLタグの「HEAD内」にスタイルシートの属性として書き込みます。

<head>
<title>テストパターン</title>
<style type="text/css" media="screen">

</style>
</head>

太字で書いてある「.grad1」「.grad2」のように、スタイルシートのIDの属性で定義する名前には必ず「.(ピリオド)」を最初に付ける事がお約束です。
また、headタグの中でこれらの情報を定義すればいいわけですから、例えばタイトルタグの手前に入れたりするのでも大丈夫です。

さて、これで「grad1」「grad2」「grad3」「grad4」という名前でスタイルシートのタグを書き込めばすぐにグラデーションがつけれるよ、という準備が出来ました。
では実際に、4×4マスのテーブルを作成し、それぞれのマスにグラデーションをかけてみましょう。
今回は600×200ピクセルのテーブル、縦と横をそれぞれ4分割した物を使います。
このテーブルのタグはこうなります。

ではこのテーブルの1マスごとにグラデーションで着色していきましょう。ここで先程定義したスタイルシートのIDの名前をタグに追加して書き込んでいきます。

このように、「td」のあとに、「class=」で付けたいグラデーションのスタイルシートのIDの属性を加えていきます。ちなみにここでは「.(ピリオド)」は付けずに、IDの名前を記入します。(つまり、最初にHEAD内でスタイルシートの設定を書き込むときのみ、「.」を追加する、と覚えれば分かりやすいです。)
各マスごとに異なる属性を当てることが出来るので、思い通りの表現を実現できます。

完成例はこちら。