Eyecatch html css

HTML,CSS

【CSS】CSS3でグラデーションを作るメモ。

2015/01/24

CSS3でグラデーションを作る際、コピペですぐ出来るよう、忘備録としてポストします。

CSS3でグラデーション

主要ブラウザのベンダープレフィックス

まずは各ブラウザに対応するベンダープレフィックスの一覧。

  • -webkit- ・・・ Chrome、Safari
  • -moz- ・・・ Firefox
  • -ms- ・・・ IE
  • -o- ・・・ Opera

とりあえず、-webkit- と -moz- 、ベンダープレフィックスなしとを併記という形が良さそうです。

linear-gradient() でグラデーション作成

実際に書く際は、ブラウザそれぞれで先に挙げたベンダープレフィックスが必要になってきます。
尚、IEはバージョン10以降で linear-gradient() に対応しています。

ということで、まずは以下のように。

これで、上から【白 → 灰色】のグラデが出来上がります。

linear-gradient()リファレンス

Androidに対応させる

Android は linear-gradient() に4.0以降で対応していますが、2.* では -webkit-gradient() という独自拡張で対応しているようです。

なので、先ほどのCSSに追加して以下のように。
記述は現行バージョンの書き方よりも先に記述し、最新バージョンでは -webkit-linear-gradient() が優先されるようにします。

-webkit-gradient() リファレンス

必要な物を取捨選択

と、ここまで来ましたが、5個も書くのは面倒。
そもそもベンダープレフィックスは本当に必要なのかという疑問が浮かびます。

例えばIE。
バージョン10以降で linear-gradient() に対応、とあるのに、-ms-linear-gradient() とすると書いています。
なんか矛盾してますね。

他のブラウザの linear-gradient() のサポート状況も調べると、

IE
IE10から linear-gradient() サポート
Chrome
Chrome26以降でlinear-gradient でサポート
Firefox
Firefox16(2012.10リリース)以降:linear-gradient でサポート
safari
safari6.1, Safari7.0以降:linear-gradient でサポート
Opera
Opera12.1, Opera15以降(2013.7リリース):linear-gradient でサポート
iOS
iOS7.0以降:linear-gradient でサポート
Android
Android2.1-3.0:-webkit-gradient()で先行実装
Android4.0以降:-webkit-linear-gradient()で先行実装
linear-gradient のサポートなし

以上のようになっていたので、最終結果は、以下のようにしてみました。(IE9以前には非対応)

内訳は
1行目:古いAndroid用
2行目:Android4.0以降用
3行目:その他、linear-gradient対応ブラウザ用

となっています。

参考サイト

HTML5やCSS3を使ってサイトを制作する場合には必須のサイト「caniuse.com」 - おしい県でWebに携わって働く人のブログ

線形グラデーションを表示するには? - linear-gradientの解説 - CSS3リファレンス

-HTML,CSS
-, , ,