より表現力が豊かに！もう一度学び直したいCSSグラデーションの基礎

グラデーション（gradient）とは、色や濃淡を連続した階調で表現することで、最近ではインスタグラムのロゴを始め、様々なところでグラデーションが多様されています。

確かに、色を単色で利用するよりも、グラデーションを使ったほうがより生き生きとした雰囲気を表現することができます。しかし、グラデーションをWeb技術で表現するときに、どのようにすればいいかご存知ですか？

そこで今回は、もう一度学び直したい CSS グラデーションの基礎についてまとめていきました。

グラデーション自体は以前から表現可能だったわけですが、ここで改めてその表現方法や応用例などをご紹介していきます。
　　

まずは CSS グラデーションの「基本」の”キ”

Web ブラウザ でグラデーションを表現できるようになったのはだいぶ前からですが、2016年を境にグラデーションに関する関心があらためて高まってきています。

グラデーションを CSS で作成することができなかった「不便な」時代には、グラデーションのスライス画像を作成して、「background」でグラデーション画像を指定することで「擬似的に」グラデーションを表現していましたが、現在では CSS で簡単にグラデーションを表現できるようになっています。

最も簡単な形は、「background」に「linear-gradient」もしくは「radial-gradient」を指定することです。中でも、直線的にグラデーションを指定する「linear-gradient」が最も基本的な形としてよく使われます。

.wrap {
　　background: linear-gradient(#000046, #1cb5e0 );   
}

デフォルトでは、以下のように上から下に引くようになっています。

続いて、最初に方向を表す属性を色の前に付け加えることで、グラデーションの方向を決めることができます。

.wrap {
　　background: linear-gradient(to right , #000046, #1cb5e0 );   
}

上の図では、「to right」を指定することで右方向にまっすぐグラデーションを指定していきます。同様に、このパラメーターを「to top right」にすれば、右上に向かってグラデーションをかけることになります。これは、実際に「45deg」（45度）を指定するのと同じ状態になります。

グラデーションの使用は、2色にとどまりません。実際に、3色、4色……と付け加えていくことが可能です。

.wrap {
　　background: linear-gradient(to right, orange, deeppink, blueviolet, cyan);   
}

また、グラデーションのある特定の色の幅を広く取ることもできます。その場合には、以下のようにパーセンテージを指定します。

.wrap {
　　background: linear-gradient(to right , #000046 80%, #1cb5e0 );   
}

　　

より実践的なテクニック

以上が基本的な CSS でのグラデーションの使い方ですが、ここからはより実践的なテクニックをご紹介していきます。
　　

1. オーバーレイ

CSS を使って、画像に薄いオーバーレイをかける方法があります。画像にオーバーレイをかける方法は非常に簡単で、「background」プロパティの「linear-gradient」部分の色にrbga()関数を使用した透過配色を使用し、url()関数で画像の URL を指定すればいいのです。

.overlay {
　　background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)),    url(https://bg.jpg);
}

上の例では2色になっていますが、もちろんこれらの色は何色も追加することができます。Photoshopで編集するよりも簡単にノスタルジックな画像ができ上がるので、ぜひこのテクニックをホームページに取り入れてみてはいかがでしょうか。
　　

2. テキスト にグラデーションをかける

CSS の テキスト にグラデーションをかける方法は、全ての ブラウザ で完璧に実装されているわけではありません。しかし、「background-clip」（もしくはベンダープレフィックスを使った「-webkit-background-clip」）プロパティを使うことで、背景から前景を除いた部分を表示することが可能になります。

h1 {
　　background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
　　-webkit-background-clip: text;
　　background-clip: text;
　　color: transparent;
}

ここで重要なのは、 テキスト の色自体には「transparent」(透明色)を指定しておくことです。これがないと、前景が邪魔になってグラデーションが上手く表示されなくなってしまうので、注意しましょう。
　　

3. ボーダーにグラデーションをかける

最近ではボーダーだけで背景がくりぬかれた「ゴーストボタン」をよく見かけますが、中にはボーダー部分にだけグラデーションがかかっているものを見たことはありませんか？

これを実装するには、3段階のステップを踏む必要があります。まず、透明な「border」を用意しながら、「border-image」でグラデーションを指定します。最後に、ボーダーで囲まれた中央部分を非表示にすることで完成します。

具体的には、以下のソースで完成します。

.box {
　　border: 5px solid transparent;
　　border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d);
　　border-image-slice: 1;
}

　　

まとめ

一口にグラデーションといっても、様々な発想によってどうにでも使い倒すことができそうです。画像にグラデーションのオーバーレイをかけたり、 テキスト にグラデーションをかけたりと、使い方次第で様々な応用もできます。

単色で使うよりも、グラデーションを使ったほうが、より表現力が豊かになるのは言うまでもありません。

ぜひ、グラデーションを使って、イマジネーションあふれるサイトを作成してみましょう。