CSS3を使ってグラデーションをつくる方法

グラデーションはCSSで作れる

グラデーションの付いたボタンや背景など、ホームページにはグラデーションを付けて装飾したい部分がありますよね。
特にボタンはグラデーションをうまく付ける事で盛り上がって見えるので、ボタンらしさが出ます。
フラットデザインが主流ですが、グラデーションがなくなったわけではありません。
昔ほどきついグラデーションは減りましたが、よく見ると若干の変化があるようなボタンや背景をよく見かけます。

グラデーションを付けたボタンや背景はどうやって作るのでしょうか・・・
やはり画像にしてしまうのが手っ取り早いと思ってしまいますが、CSS3で追加されたプロパティを使えば、画像なしで作ることができるんです。

グラデーションを再現するCSSはこちら

グレーのグラデーションを表現するCSSになります。
上から下へ向かって色の変化がだせます。

色の指定に「rgba」を使っています。
これは「r=赤」「g=緑」「b=青」で色指定した物と「a=透明度」を指定する書き方です。
例では最後のaが1になっていますが、これは100%の表示になります。
半透明にしたい場合であれば「1を0.6」などにすることで60%の透明度を表現できるので、何かと便利な方法です。
但し古いブラウザなど一部のインターネットブラウザーでは表現できないので注意が必要です。

まず初めに「background」で背景色を単色指定します。
これがないと、グラデーションを再現できないブラウザでページを見た時、背景に色がなにも付かないので違和感が出てしまいます。
なので単色でも何か色を付けて、上に重ねた文字などを見やすくするために付ける色を指定をしておきます。

続いての記述は各ブラウザ毎の表示指定になります。
ブラウザの仕組みによって書き方が異なるので、それぞれをきちんと書いておきましょう。

rgbaの前後にある「%は開始位置」です。
グラデーションを付けるブロックの0%の位置の時はこの色、100%の時はこの色といった具合に色の指定ができるんです。
例では2色しか指定していませんが、何色でも入れる事ができるので、細かなグラデーションを指定することもできるんですよ。
色の指定は、「,（カンマ）」でつなげて書きます。最後の指定には付ける必要がないので注意です。

グラデーションを付けるCSSを生成するサービスも！

色をrgbで指定できれば、数値を入れ替えるだけで簡単にグラデーションを付ける事ができますが、rgbでの色指定なんてなかなか覚えられるものでもありませんよね。
16進数を使ったカラーコードでの色指定もたくさんあるので、覚えきるのは難しいです。
そんな時は画像作成ソフトなどで色を拾って、数値を見るのも一つの方法ですが、インターネット上にとても便利なページがあるんです。

http://www.colorzilla.com/gradient-editor/

このページを使えば、直感的に色を選択して、CSSが自動生成できます！
またグラデーションのプリセットも用意してあるので、簡単にきれいなグラデーションを作る事ができます。
とても便利なので活用してみてください。

グラデーション背景に模様を付けたいとき

印刷物であれば印刷する紙の質感がいいアクセントになるので、単色でも綺麗に見えますが、ホームページの場合だとモニターに表示されます。
モニターはほとんどツルツル・テカテカしているので質感に変化がありません・・・
なので水玉やドット、和紙の様な背景を付けて質感を持たせたいと思うことはよくあると思います。
さすがに模様までCSSのみで作ることはできないので、どうしても画像が必要になってきます。

そんなときは、「<a><span>模様を付けるボタン</span></a>」この様に子要素を使ってみてください。
親要素（a要素）に先ほどのグラデーション背景を指定して、子要素（span要素）に模様の付いた画像を背景へ指定することで、柄のある背景を作る事ができます。

まとめ

・グラデーションはCSS3で作ることができる
・古いブラウザなど一部のインターネットブラウザーでは再現できない場合がある
・子要素を使えば模様のついた背景も付けることができる