CSS3でグラデーションの基本をおさらい、めんどくさい方はジェネレーターでどうぞ

デザイン

こんにちは、つばさ（@tsubasa123）です。

最近、カエレバ・ヨメレバボタンのカスタマイズにはまっています。そのうちコピペコード第2弾をお届けしたいと思っていますのでよければご利用ください。

今回はボタンカスタマイズの過程でCSSのグラデーション指定について基礎を学び直したのでちょっとメモしておこうと思います。

  1. CSSなら手軽にグラデがかけられる
  2. ベンダープレフィックスはめんどくさい
  3. 最近はそこまでしっかり書かなくてもいいんじゃないかな
  4. グラデーションの指定方法
    1. 基本的な使い方1（中間地点なし）
    2. 基本的な使い方2（中間地点あり）
  5. おすすめのジェネレーターを3つほど
    1. Ultimate CSS Gradient Generator
    2. CSS3 Generator
    3. shade
  6. さいごに

CSSなら手軽にグラデがかけられる

私はデザイナーではないのでそんなに使う機会はないのですが、CSSで気軽にグラデーションがかけられるというのはとても便利なことでして。

昔はボタンにグラデーションをかけたければ、画像編集ソフトを利用してグラデーションをかけた画像を作成し、それをボタンの背景などに指定してデザインを作成していました。

まぁ、皆さん慣れてらっしゃいますのでそんなに手間ではないのかもしれませんが、いちいち画像を作成し直してボタンに反映させるというのはちょっと無駄な作業のように感じます。その時間を他の仕事にまわしたい。

もう1つの弱点として、画像編集ソフトを持っている人しか修正ができません。高いんですよね画像編集ソフトって。

これがCSSで指定できるとなるとテキストエディタで修正が可能になりますので、ちょちょっと色の指定部分を変更するだけでグラデーションの修正が可能になります。カラーコードを調べる必要はありますが、それさえできれば後は誰でも修正が可能になります。

また、CSSの情報はJavaScriptから動的に設定が可能ですので、条件に合わせてグラデーションの色を変更することができたりなど夢が広がります。やったね。

ベンダープレフィックスはめんどくさい

とても便利なCSSでのグラデーション指定なのですが、ちょっと記述が煩雑です。後で紹介しますが、ジェネレーターを利用して作成したサンプルソースがこちら。

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

長いですね。どうしてこんなことになったのか。それはブラウザによってCSSを解釈する仕組みに違いがあるからです。

詳しい説明は省略しますが、一般的に普及しているInternetExplorer、FireFox、GoogleChromeでは、それぞれHTMLやCSSを解釈する仕組み（レンダリングエンジンと呼ばれます）に異なるものを利用しています。

まぁ、それぞれ開発を行っている会社が違いますからね。当然と言えば当然なんですが。

InternetExplorerはTrident、Windows10からデフォルトブラウザになったMicrosoft EdgeはEdgeHTML系、FireFoxはGecko、GoogleChromeはBlinkというものがそれぞれ使われています。まぁ、特に覚える必要はないですけどね。

とにかく、これらの各レンダリングエンジンの解釈に差異があるため、それぞれのレンダリングエンジン向けにグラデーションの指定を書く必要がありました。これをベンダープレフィックスと呼びます。

最近はそこまでしっかり書かなくてもいいんじゃないかな

私の記憶ではCSSでグラデーションの指定が使われ出したのが大体2012年くらいだったと思います。

当時はまだブラウザ間での実装に異がありましたので、グラデーションを使いたければベンダープレフィックスは必須なものでした。

しかしそれから時間もたち、繰り返し行われたブラウザのアップデートによって解釈の差はだいぶなくなり、この記事の投稿時点では最新のモダンブラウザにおいてはベンダープレフィックス無しでもグラデーションが利用できるようになっています。

IE9がベンダープレフィックス無しだとグラデが効かないのが痛いところですが、Chrome、FireFoxに関してはよっぽど古いバージョンを敢えて利用しているユーザー以外はベンダープレフィックス無しでも大丈夫なはずです。

書くの大変ですからね。ブラウザの対応条件を確認して、IE9が含まれていないのであれば思い切ってベンダープレフィックスを省略してもいいんじゃないかと思います。

グラデーションの指定方法

前置きが長くなりました。ここからはCSSでのグラデーションの指定方法の説明です。ベンダープレフィックスは思い切ってなし。IE9は無視する方向で。

基本的な使い方1（中間地点なし）

Box1
.grade1 {
background: linear-gradient(to bottom,  #1e5799 0%, #7db9e8 100%);
}

ちょっとわかりにくいかな。一番シンプルな指定方法がこちら。3つの項目を指定します。それぞれ

  1. グラデーションの向き
  2. グラデーションの開始色と開始位置
  3. グラデーションの終了色と終了位置

になります。開始位置が0%、終了位置が100%の時は記述を省略することも可能です。
グラデーションの向きは

  • top
  • bottom
  • left
  • right

の4方向を指定します。先のサンプルですと「to bottom」と指定しているので、要素の上辺から0%の位置から開始色が始まり、要素の下辺100&の位置が終了色となるようなグラデーションが作成できます。

グラデーションの向きを「to right bottom」のように指定すると、左上から右下に向けて斜めのグラデーションを作成できます。あんまり使わないかもですが。

向きでの指定だけでなく角度での指定もできます。

.grade1 {
background: linear-gradient(180deg, #1e5799 0%, #7db9e8 100%);
}

これで「to bottom」と同じ、上から下へのグラデーションになります。上を起点に時計回りに角度を指定することができます。

基本的な使い方2（中間地点あり）

Box2
.grade2 {
background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
}

一昔前によく見かけたデザインじゃないでしょうか。ナビゲーションやメニューバーとかにもよく使われていたデザインだと思います。

使い方1では開始位置と終了位置でしたが、この位置は任意の数に増やすことが可能です。今回の例では4つ。間に中間地点を設けることで複数のグラデーションを設定することが可能です。

f:id:tsubasa123:20161213145324j:plain

こんなイメージですね。伝わったかな？

おすすめのジェネレーターを3つほど

私はボタンのカスタマイズを行う為に基礎的な使い方を覚える必要がありましたが、ちょっとそこまでは。。。という方はジェネレーターを使えば直感的にグラデーションを作成することができます。

色々なサービスがありますが、私がよく使うものとこの記事を書いてる最中に見つけたものを3つほどご紹介。どれも非常に便利なサービスですので覚えておいて損はないかなと思います。

Ultimate CSS Gradient Generator

www.colorzilla.com

私がいつもお世話になっているのはこちら。結構昔からあるジェネレーターです。ベンダープレフィックスもちゃんとつけてくれます。プリセットが用意されているのが嬉しいです。

UIがフォトショップに似ているので、普段フォトショを利用している方は直感的に利用できるのではないでしょうか。

CSS3 Generator

www.css3.me

グラデーション以外にも角丸やらシャドウやらなんやらも作成できるジェネレーター。グラデーション以外のプロパティも一緒に利用する場合はこっちのほうが効率よく作業できそうです。

shade

jxnblk.com

グラデーションの作成とはちょっと違うかもですが、きれいなグラデーションを眺めてニヤニヤできるサービス。これはすごい。この記事を書くまで知りませんでした。良い収穫です。

さいごに

CSS3でグラデーションを設定する方法の初歩の初歩を学びました。まぁ、私はそこまで本格的なグラデーションを利用する機会はあまりないと思うのでこんなもんで満足です。後はお気に入りのグラデーションパターンを探すのみ。

ちょっとボタンをオシャレにしたいだけの方であれば、わざわざ使い方を覚えなくてもご紹介したジェネレーターを使えば十分だと思います。ジェネレーターの作者様に感謝ですね。

ではでは、最後までお付き合いいただきありがとうございました。

コメント

ホーム
トップ