【初心者向け】CSSで装飾!gradientまとめ

2022.11.08
CSSで装飾!gradientまとめ

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

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

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

  • CSSのgradientの使い方が分かる

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

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色指定です。シンプルな具体例で見ていきましょう。

html
<div id="sample">
SAMPLE
</div>
css
#sample {
background-image: linear-gradient(#ffd6d6, #d6d6ff);
}

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

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

色を追加する

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

html
<div id="sample">
SAMPLE
</div>
css
#sample {
background-image: linear-gradient(#ffd6d6, #d6d6ff, #d6ffeb);
}

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

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

グラデーションの向きを変える(横向き)

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

html
<div id="sample">
SAMPLE
</div>
css
#sample {
background-image: linear-gradient(to right, #ffd6d6, #d6d6ff);
}

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

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

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

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

html
<div id="sample">
SAMPLE
</div>
css
#sample {
background-image: linear-gradient(#ffd6d6 40%, #d6d6ff 80%, #d6ffeb 90%);
}

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

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

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

html
<div id="sample">
SAMPLE
</div>
css
#sample {
background-image: linear-gradient(45deg, #ffd6d6 ,#d6d6ff);
}

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

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

cssのradial gradient 基本の書き方

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

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

基本の書き方

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

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

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

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

css
#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つに比べると登場頻度は低いですが扇形のグラデーションのつけ方を紹介します。

基本の書き方

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

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

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

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

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

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

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

まとめ

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

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

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

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5