【2017年決定版】CSS3グラデーション(gradient)の書き方


グラデーションのプロパティは、一見すると複雑でわかりにくく感じてしまいがちです。

過去の仕様策定にあたって、ブラウザベンダーごとに必要なプレフィックスが途中で二度ほど変更になり、構文(syntax)が変わっています。サイトによっては、それらの記述方法が入り混じっているので、参考にしたくてもいったいどう書けばいいのやら…と混乱している方もいるかもしれません。

でも、要点をおさえるとじつはすっきり理解しやすいんです。

そこで、理解しやすさと、2017年7月現在でどんな記述が必須なのか(何が必要ないのか)に絞ってまとめてみました。

CSS3でのgradientの基礎ポイント

まず構文に関しておぼえておきたいのは次の二種類です。

  1. gradientには、基本的にlinear-gradient直線状とradial-gradient放射線状がある
  2. linear-gradient

    radial-gradient

  3. linear-gradientは、少し古い構文と新しい構文の二種類を使う
    • 少し古い構文:-webkit-linear-gradient()
    • 新しい構文:linear-gradient()

linear-gradient

まず、linear-gradientについてみていきます。

構文

古い構文のポイント

  • 古い構文では、ベンダープレフィックス(「-webkit-」)を入れてやります。
  • 古い構文のプロパティは、「どこから」を書くことで方向を示します。

「left(左) top(上)から右下へ、greenからはじまってwhiteで終わる」グラデーション

新しい構文のポイント

  • 新しい構文では、ベンダープレフィックス(「-webkit-」)を取ります。
  • 新しい構文のプロパティは、「どこへ」を書くことで方向を示します。

「(左上から)right(右) bottom(下)へ、greenからはじまってwhiteで終わる」グラデーション

古い構文と新しい構文をあわせる

  • どちらも対応しないブラウザ向けにフォールバックとして単色のバックグラウンドを指定する

構文の応用

角度

方向の指定は、leftやtopといった単語だけでなく、角度を書くことができます。
(プレフィックスつきだと別の描写になるブラウザがあるので気をつけてください。)

カラーストップ

色は二色だけでなく、多色で描写させることが可能です。その場合は色と場所を指定します。

これは方向は指定していますが、特定の色の始点(または終点)の位置を指定していません。そのときは自動的に等間隔に配置されます。

中央の黄色のみ場所を30%と指定しています。(三色なので、最初と最後は自然に0%と100%になる)

radial-gradient

つぎにradial-gradientですが、linear-gradientと違って単純です。
中心から放物線状に色を変えていきます。

構文

位置を指定しないもの。自動で計算されます。

位置を指定したもの。

他にも応用例はありますが、ややこしくなるのでこの辺で。

補足

ベンダープレフィックスに関して補足します。少しややこしいですが興味のある方はぜひお読みください。

なぜ-webkit-のベンダープレフィックスを使うか

すでに最新ブラウザではすべてlinear-gradientをサポートしているため、ベンダーごとの識別子は必要ありません。

ただし、-webkit-のベンダープレフィックスつきで実装されたiOS(5.0-6.1)、Safari(safari5.1-6.0)、Chrome(Chrome10-25)、Android(4.0-4.3)に関してはまだブラウザシェアもあるため、残しておく必要があります。

少しややこしくなりますが、それ以前に-webkit-gradient()という構文で先行的に実装されたことがありました。でもブラウザシェアを考慮すると、もう-webkit-gradient()は使う必要ありません。(後に詳述)

firefox等向けのベンダープレフィックスについて

従来、旧版のfirefoxには「-moz-」というベンダープレフィックスをつけて対応してきました。しかし、firefoxはfirefox16からlinear-gradientをサポートしており(現Versionは54)、旧firefoxのシェアは無視してよいほど低いため、「-moz-」はもう使う必要はありません。ちなみに、旧ブラウザは公式サポートを終了し、自動アップデートされるようになっています。旧operaの「-o-」、旧IEの「-ms-」も同様にサヨナラです。

考慮すべきは古いスマホのOS別シェアだけです。

-webkit-gradient()は必要ないという根拠

下記は、スマホのOSバージョン別のシェアです。

スマホOSバージョン別のシェア

Androidでは、プレフィックスなしと-webkit-プレフィックスで99.81%をカバーしており、古い-webkit-gradientプレフィックスが必要なものは0.19%にすぎません。

また、iOSではプレフィックスなしと-webkit-プレフィックスで99.92%をカバーし、古い-webkit-gradientプレフィックスが必要なものはわずか0.08%です。

ときどきWEBサイトで見かける、-webkit-gradientプレフィックスは必要という論調は古いものなので、気にしなくていいと思います。

まとめ

グラデーションを作るための便利なジェネレーターがありますが、そこから応用しようとするとプレフィックスを含めて基礎的な知識は必須です。
まず基本をしっかり押さえて、活用していきたいですね。