超便利!CSSグラデーション基礎と簡単に作れるジェネレーターまとめ

超便利!CSSグラデーション基礎と簡単に作れるジェネレーターまとめ

ホームページデザインに彩りを添えてくれるグラデーションは、たくさんのホームページで使われていますよね。しかし、いざコードを書くとなると長くて面倒なのがこのCSSグラデーション。何種類もグラデーション用のコードを書かないといけない謎な仕様だったり、長いコードの意味がよくわからなかったり…。

そこで今回はこのグラデーション技術の基礎をご紹介していきます。簡単にグラデーション用のコードが作れるジェネレーターもご紹介するのでお見逃しなく!

目次
  1. グラデーションコードの基礎
  2. グラデーションの実装の仕方
  3. 基本的な表記方法
  4. 簡単にグラデーションが作れる便利ツール
  5. Grad3
  6. Ultimate CSS Gradient Generator
  7. CSS3 GENERATOR
  8. フラットデザインから流行が変わったグラデーション

image

グラデーションコードの基礎

色の移り変わりがとても綺麗なグラデーションですが、CSSでグラデーションを表現するには、linear-gradient()関数を使います。linear-gradient()関数は線型のグラデーションを表現してくれる関数。しかしこの関数、ブラウザによって書き方が変わるのが曲者です。

なぜブラウザによって実装方法が変わるの?

余談になりますが、これにはブラウザのエンジンの話が必要でしょう。WebブラウザやWebをベースにして動くアプリケーションにはHTMLレンダリングエンジンというものが搭載されています。ざっくり言うとこのエンジンがHTMLやCSSなどを解析(レンダリング)してホームページを見せてくれるのですが、このエンジン、ブラウザによって使われているものが違うんですよね。

代表的なHTMLレンダリングエンジンと搭載ブラウザ

代表的な例だとGoogleChromeやSafariにはAppleが中心となって開発しているWebkitというエンジン(※)、FireFoxなどMozila系ブラウザやアプリケーションにはGeckoというエンジン、InternetExplorerにはTridentというエンジンが搭載されるなど、バラバラなんですね。

このようにレンダリングするエンジンの種類が違うのでブラウザごとに違うコードが必要になる場合があります。
※Google Chrome28以降のレンダリングエンジンはBlinkに変更となっています。

image

CSSを応用したい方にこちらもよく読まれています。

グラデーションの実装の仕方

基本的な表記方法

では早速、webkit系とMozila系のグラデーションを例に基本的な書き方を見ていきましょう。まずはwebkit系のグラデーションの基本的な書き方です。webkit系ではグラデーションの種類、開始位置、終了位置、開始色、途中色(複数指定可能)、終了色の要領で設定します。試しにパープル系のグラデーションを作成してみました。

このサンプルでは途中色を2色使っており、2色使うとこんな風にガラス風の表現ができます。※最新のGoogle ChromeやSafariでは-webkit-linear-gradient();が出来るようになっています。

[css]
background-image:-webkit-gradient(
                  グラデーションの方向
                , 開始位置
                , 終了位置
                , from(開始色)
                , color-stop(位置, 途中色)
                , to(終了色));

background-image: -webkit-gradient(
                  linear
                , left top
                , left bottom
                , from(#b2b2ed)
                , color-stop(0.49, #5050a5)
                , color-stop(0.50, #1c1c60)
                , to(#050519));

[/css]

post-4189_6

次にMozila系のグラデーションです。Mozila系では開始位置と角度を最初に指定し、開始色、途中色、終了色を%表記で設定していきます。サンプルでは途中色1を49%、途中色2を50%とする事で真ん中辺りで2色に分けてみました。これで上のwebkit系のグラデーション表記と同じ表現になります。ちなみに開始位置と角度は省略可能ですが、その場合には初期値のtopになります。

[css]

    background-image: -moz-linear-gradient(
        開始位置と角度
        , 開始色 領域(%)
        , 途中色 領域(%)
        , 途中色 領域(%)
        , 終了色);
    background-image: -moz-linear-gradient(
          top
        , #b2b2ed 0%
        , #5050a5 49%
        , #1c1c60 50%
        , #050519);

[/css]

post-4189_7a

簡単にグラデーションが作れる便利ツール

という事でグラデーションの基礎をご紹介しましたが、結構ややこしいのがグラデーションです。そこで、ジェネレーターを使ってみてははいかがでしょうか?スライドバーで色の調整をできるものもあり、美しいグラデーションが簡単に作成できます。

Grad3

post-4189_2grad3http://grad3.ecoloniq.jp/

スライダーを動かして色を調整する直感的なGUIでグラデーションが作れるのがgrad3。サンプルのグラデーションイメージも用意されていて、そのまま使う事もできれば自分で色をカスタマイズする事もできます。6種類ものブラウザに対応したコードを生成してくれるのも魅力です。
・Grad3: http://grad3.ecoloniq.jp/

Ultimate CSS Gradient Generator

post-4189_3

まるでPhotoshopで作るような感覚でグラデーションを作成できるのがUltimate CSS Gradient Generator。色を足したり抜いたりがスライドバーにスポイドを足し引きするだけでできるのが素晴らしい!プレビュー画面も見やすく親切で、複数ブラウザ用のコードを作ってくれる他IE9対応も可能です。

・Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/

CSS3 GENERATOR

post-4189_4

こちらのCSS3 GENERATORはなんとグラデーションはもちろん、角丸や不透明度まで調整できるスグレモノです。スライドバーで角丸の具合やドロップシャドウ、不透明度を調整できるのは嬉しいですね。グラデーションの方は上2つに比べて細かい調整はできませんが、開始色と終了色、方向の指定が可能。

・CSS3 GENERATOR:http://www.css3.me/

フラットデザインから流行が変わったグラデーション

このように綺麗なデザインができるグラデーションですが、最近はフラットデザインの影響で「グラデーションとわからないグラデーション」が流行ってきていそうです。windows8の普及で主流になってきた、ぺっとりとしたシンプルな印象が特徴的なフラットデザイン。

これはぺっとりとした質感が重要なので、グラデーションは淡めに入れて微妙な質感を表現するに留めるのだとか。Appleの新OS・yosemiteでもこれまでよりも淡いグラデーションが微妙に使われて、こういう使い方も綺麗ですね。post-4189_5

さて、今回はグラデーションの基礎的なお話と簡単にグラデーションが作成できるジェネレーター、そしてブラウザのHTMLレンダリングエンジンとグラデーションの流行についてもご紹介しました。Webは時代と共に変わっていく生き物のようなもので、それを表現するプログラムやデザインも日々進化したり流行があるものです。

特にグラデーションには進化の歴史があり、初期の頃から随分実装方法が変わっています。進化や流行に乗り遅れないように情報収集するのは、プログラマやデザイナーにとって大切そうですね。プログラマやデザイナーにはそういった”常に新しいモノを追い続ける”のが好きな人が多いのも納得です。

image

山崎 響
ライター
山崎 響

関連記事