「CSSで色々なグラデーション装飾をつけてみたい」

こう思う方も多いのではないでしょうか。

本記事をお読みいただくと以下が分かります。

HTMLやCSSに少し慣れてくると、よりユーザにとって見やすいサイト設計を進めていく段階だと思います。是非本記事をお読みいただき理解を深めてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

cssのグラデーションの種類

一言でグラデーションと言っても、グラデーションの形によっていくつか種類があります。

• linear-gradient()：線形のグラデーション
• repeating-linear-gradient()：繰り返しの線形グラデーション
• radial-gradient()：放射のグラデーション
• repeating-radial-gradient()：繰り返しの放射グラデーション
• conic-gradient()：扇形のグラデーション
• repeating-conic-gradient()：繰り返しの扇形グラデーション

見ていただいて分かる通り、主には「線形」「放射」「扇形」があり、本記事では順を追って1つずつ紹介していきます。

CSSのlinear gradient　基本の書き方

それでは早速、linear gradientの基本の書き方をいくつか紹介していきます。

2色指定

CSSのグラデーションで最も基本的なパターンは、この2色指定です。シンプルな具体例で見ていきましょう。

<div id="sample">
SAMPLE
</div>

#sample {
background-image: linear-gradient(#ffd6d6, #d6d6ff);
}

いかがでしょうか。コピーアンドペーストでいいので、試してみてください。「SAMPLE」という文字に背景色がつき、ピンクと水色のようなパステルカラーでグラデーションがついたことがお分かりいただけると思います。

上記の例のように「linear-gradient」の中にグラデーションさせたい色を指定することで、簡単に背景色にグラデーションをつけることができます。

色を追加する

先ほどはシンプルな2色の例でしたが、1色追加して3色のグラデーションを試してみましょう。

<div id="sample">
SAMPLE
</div>

#sample {
background-image: linear-gradient(#ffd6d6, #d6d6ff, #d6ffeb);
}

色を追加したい時は、linear-gradientの中に色をカンマ区切りで追加してあげれば大丈夫です。1つ注意点としては、このように非常に簡単に色を追加できてしまうので凝りすぎて逆に見づらい背景にならないようにしてください。

目的はあくまでユーザにとって見やすいサイト設計であるはずなので、自分でこだわりが強くなりすぎると見づらいサイトになり、かえってユーザの離脱につながりかねません。

グラデーションの向きを変える（横向き）

先ほどまでは縦向きにグラデーションをつけていましたが、横向き（左から右）にグラデーションをつけるやり方を見ていきましょう。

<div id="sample">
SAMPLE
</div>

#sample {
background-image: linear-gradient(to right, #ffd6d6, #d6d6ff);
}

このように「to right」をつけることで、左から右にかけてピンクから水色のグラデーションをつけることができます。

実際に試していただければ分かりますが、グラデーションを縦向きにつけるか横向きにつけるかで印象はかなり変わりますので、必ず自分の目で確かめて設計するようにしてください。

色が変わる位置を指定する

ここまでの例では、グラデーションをつけた際の各色の割合は均等になっていました。ここでは、色が変わる位置を指定するやり方を紹介します。

<div id="sample">
SAMPLE
</div>

#sample {
background-image: linear-gradient(#ffd6d6 40%, #d6d6ff 80%, #d6ffeb 90%);
}

このように、各色の後に%で指定することで、どの位置までその色をつけるかを決めることができます。

グラデーションの角度を指定する

ここまでは、「縦向きか」「横向きか」のどちらかのグラデーションパターンでしたが、角度を指定することもできます。

<div id="sample">
SAMPLE
</div>

#sample {
background-image: linear-gradient(45deg, #ffd6d6 ,#d6d6ff);
}

最初に角度を指定することで、その角度の方向にグラデーションをつけることができます。

ここまででCSSのlinear gradientの紹介は終了です。

cssのradial gradient　基本の書き方

続いて、放射のグラデーションの基本の書き方についてです。放射というと少し難しく感じる方がいるかもしれないですが、簡単に言うと「円形」のグラデーションをつけたいときに使います。

放射のグラデーションをつけるにはradial gradientを使います。このradial gradientを使って様々な装飾を付けることができますが、実際にwebサイトで使うのは基本的な円形のグラデーションがメインだと思うので、本記事では基本の円形グラデーションのつけ方を紹介します。

基本の書き方

#sample {
background: -moz-radial-gradient(#ffd6d6, #d6d6ff); 
background: -webkit-radial-gradient(#ffd6d6, #d6d6ff); 
background: radial-gradient(#ffd6d6, #d6d6ff); 
}

このように、backgroundに先ほどまではlinear-gradientを指定していましたが、放射にしたい場合はradial-gradientを指定します。

色が変わる位置を指定する

基本的な放射の書き方に加え、よく使われるのは「どれくらいの位置で色を切り替えるか」だと思います。

#sample {
  background: -moz-radial-gradient(#ffd6d6 30%, #d6d6ff 70%); 
  background: -webkit-radial-gradient(#ffd6d6 30%, #d6d6ff 70%); 
  background: radial-gradient(#ffd6d6 30%, #d6d6ff 70%); 
}

考え方はlinear gradientと同じで、色を切り替える場所を「%」で指定します。

※上記の例では、0~30%までは#ffd6d6で、30~70%がグラデーション、70%以降が#d6d6ffになるというわけです。

以上でradial gradientの紹介は終了です。linear gradientに比べると少ないですが、あまり使われないテクニックばかり紹介しても仕方ないので、radial gradientについては本記事で紹介した内容をおさえておけば十分でしょう。

cssのconic gradient　基本の書き方

最後に、今までの2つに比べると登場頻度は低いですが扇形のグラデーションのつけ方を紹介します。

基本の書き方

#sample {
background-image: conic-gradient(#ffd6d6, #d6d6ff);
}

考え方はlinear gradientとradial gradientと全く同じで、gradientの前に今度はconicをつければ大丈夫です。

グラデーションの開始位置を指定する

本記事の内容の中では実際に使われる頻度は低いと思いますが、グラデーションの開始位置の指定の仕方も紹介します。

#sample {
background-image: conic-gradient(from 30deg, #ffd6d6, #d6d6ff);
}

上記のようにfromをつけることで「30度からグラデーションの開始」と指定することができます。実際にやって見ると分かりますが、扇形はどこからグラデーションを始めるかで見た目の印象が大きく変わります。

まるで別のオブジェクトであるかのように見せることもできるので、是非色々試してみてください。

まとめ

いかがでしたでしょうか。CSSのグラデーションで使われる主な3つ（linear gradient, radial gradient, conic gradient）を紹介してきました。

どれも基本の書き方は同じで、シンプルなコードで実装できることがお分かりいただけたと思います。本記事中でもお伝えしましたが、大切なことはユーザにとって見やすいサイト設計をすることです。

「デザインすること」が目的になり、凝ったオブジェクトを作りすぎるとかえって見づらくなりユーザ離脱につながりかねません。

是非目的を見失わずにサイト設計を進めてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP