1年ほど前に、画像を使わないで、CSSを使ってグラデーションする!!(IE対応)という記事を書いたのですが、久しぶりにIEを立ち上げてデモを見てみると。。ちゃんと見えない。。
という事態が起きていたので修正し、改めてここで復習の意味も込めてまとめておこうと思います。
大きな変更点
これまでのバージョンでも様々な記述方法がありますが、ここでは、IE10のみに絞って書いて行きます。
- ベンダープレフィックスなしでの記述
- 方向などのキーワード
ベンダープレフィックスなしでの記述
今までつけていた -ms-
をつけない形式でサポートされる。
2011 年2 月の W3C 草案にあるプレフィックスありの記述もサポートしているみたいなので、一応従来通り記述していれば問題無さそう。
方向などのキーワード
ここが実にぐぬぬぅとなりそうなところです。
方向キーワード
top
、bottom
、left
、right
キーワードの前に" to " が置かれ、終了点に基づいてグラデーション線の方向を示します
具体的には、上から下へは以下のようになります。
1 2 3 4 5 |
/* 今まで */ -ms-linear-gradient(top, #000, #FFF); /* IE10 */ linear-gradient(to bottom, #000, #FFF); |
角キーワード
角キーワードは "to" の後に置かれ、指定された四分円から開始して反対の四分円で終わるグラデーション線を指定します。グラデーション線の中央点は、他の 2 つの角の間に描かれる線と交差します。
これもキーワードの前に "to" が置かれます。
具体的には、左上から左下へは以下のようになります。
1 2 3 4 5 |
/* 今まで */ -ms-linear-gradient(top left, #000, #FFF); /* IE10 */ linear-gradient(to bottom right, #000, #FFF); |
角度の方向
反時計回りに大きくなるから、時計回りに大きくなるへ変更になっています。

円形グラデーション
位置のキーワードまたは長さの前に" at " が付くようになります。
位置
具体的には、中心からは以下のようになります。
1 2 3 4 5 |
/* 今まで */ -ms-radial-gradient(center, #000, #FFF); /* IE10 */ radial-gradient(at center, #000, #FFF); |
ここまでがさっくりとした変更点のまとめです。
IE5.5-10まで対応
では、実際に古いIEから新しいIEまでを、グラデーションをさせたいときはというと、
上から下への基本的なもの
1 2 3 4 5 6 7 8 |
/* IE 5.5-7 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=0); /* IE 8+ */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=0)"; /* IE 10 */ background: linear-gradient(to bottom, #000, #fff); |
と、書けばよさげです。
ブラウザ対応表
ほかのブラウザ状況も合わせて書こうかと思ったのですが、とても綺麗にまとめて表にしてくださっている方がいたのでそちらをご紹介させていただきたいと思います。
すごく参考になりました。
Pingback: IE10に対応するためにCSS3のlinear-gradientはどう書いたらいいのかなというお話 | Friend Of A Friend()
Pingback: IE10に対応するためにCSS3のlinear-gradientはどう書いたらいいのかなというお話FriendOfAFriend | FriendOfAFriend()