こんにちは！衣替えのタイミングを見図り中のゆぅです！

今回のテーマは「CSS3でグラデーションはじめの一歩」！

前々からぼちぼち始めなければと思っていたCSS3。。。
「IEで使えないのがネックなのよねぇ。」ともやもや。

前回の簡単アコーディオンのデモ作成中（実験中）に簡単に見栄え良くできないもんかな～と探していたところ、Webクリエイターボックスさんの「Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える」の「グラデーションを使った見出し」を発見。

「こりゃ、便利やわ～」ってことで単品でまとめておいたほうが後々使いやすそうだなってことで、まとめます。（結局、前回のエントリーには使わなかったのです。。。）

材料

PIE.htc をご用意下さい。
リンクは配布元サイト。配布元サイトの右のDownloadをクリックしてzipをダウンロード。今回、解凍した中身のPIE.htcだけ使用します。

PIE.htcとはIEでもCSS3を使えるようにするbehaviorスクリプトで、

• border-radius (角丸)
• box-shadow (シャドウ)
• border-image (枠線を画像に)
• multiple background images (背景に複数画像指定)
• linear-gradient as background image (今回紹介するグラデーション)

が、IEでも使えるようになります！素晴らしい！もやっと解消！

使い方

使い方はグラデーションを指定したいcssセレクターにbehaviorの指定でPIE.htcを設定するだけです。

HTML

<ul class="accordion pink">
    <li>
        <div class="accordion_head">リストもアコーディオンします。</div>
       <div class="accordion_body">これは中身。divタグです</div>
　　　/* 以下　中身省略*/
    </li>
</ul>

前回のアコーディオンのやつを流用してるのでこんな感じ。。。（←手抜きで申し訳）
見栄えを良くしたい.accordion_headに適用させますぞ。

CSS

/*-----------pink------------*/
#contents ul.pink {
	border:solid 1px #ff99cc;
	border-bottom:none;
}
#contents ul.pink li {
	border-bottom:solid 1px #ff99cc;
}
#contents ul.pink li .accordion_head {
	background: #FB2B75;
	background: -webkit-gradient(linear, left top, left bottom, from(#fd6ca0), to(#FB2B75));/* webkit */
	background: -moz-linear-gradient(top,  #fd6ca0,  #FB2B75);/* fx */

	/*------PIE setting-------*/
    -pie-background:linear-gradient(top,  #fd6ca0,  #FB2B75);
    behavior: url(PIE.htc);
	/*------------------------*/

	border:solid 1px #FFFFFF;
	color:#FFFFFF;
}

グラデーションの設定をしているのは11行目からですね。
safari、chrome用の-webkit-gradientを設定。
Firefox用の-moz-linear-gradientを設定。
そして、IE用の-pie-backgroundを設定し、behaviorの設定をする。

グラデーションのCSSの基本的な書き方。ブラウザごとに指定方法がちょっとずつ違いますが、
大体「位置決めて、開始色、終了色」って感じでしょうか。

結果

適用結果は。。。

Firefoxはちゃんとグラデーションしてますねぇ。問題なし！

IEでもちゃんとグラデーションしてます。ばっちり。

注意点としては外部cssに記述する際には、behaviorの指定を絶対パスにしてください。

参考URL

• Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス
• たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス
• css3 PIEでIEの背景のグラデーションを反映させる 四方山tips
• IE6-8でもCSS3が使えるようになる「CSS3 PIE」:phpspot開発日誌
• HTC (Behavior)ファイル使用の共通注意点 Hiro Konda’s Web

デモ

最後に、グラデーションすることにテンション上がってしまった結果のデモをご覧下さい。

デモを見る

やりすぎた。。。