【初心者向け】CSSのlinear gradientまとめ
「webサイト上で背景色にグラデーションをつけてみたい」
こう思う方も多いのではないでしょうか。
本記事をお読みいただくと以下が分かります。
- cssのlinear gradientの使い方が分かる
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()：繰り返しの扇形グラデーション
見ていただいて分かる通り、主には「線形」「放射」「扇形」があり、本記事では線形のグラデーションを紹介していきます。
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);
}
最初に角度を指定することで、その角度の方向にグラデーションをつけることができます。
まとめ
いかがでしたでしょうか。いくつか代表的なグラデーションのつけ方を紹介しましたが、非常に簡単に設定できることがお分かりいただけたと思います。
是非本記事をきっかけに、ユーザにとって読みやすいサイト設計を進めてください。
