【簡単】CSSで背景にグラデーションを実装する【サンプルコードつき】

グラデーションアイキャッチプログラム
スポンサーリンク

この記事では、要素の背景にグラデーションを実装する方法を説明します。

グラデーションの形は2種類あります。

  • 線形に変化していくもの
  • 円形に変化していくもの

サンプルは以下のとおりです。

See the Pen Gradient1 by gsg0222 (@gsg0222) on CodePen.

See the Pen Gradient2 by gsg0222 (@gsg0222) on CodePen.

それでは順番に説明していきましょう。

線形のグラデーション

線形のグラデーションを背景に指定するためには、background-imageにlinear-gradientを指定します。

(他のページではbackgroundに指定しているところもありますが、このページでは明示的にどこに指名しているのか示すため、background-imageを利用しています)

linear-gradientは特殊な画像なのだと考えれば、理解しやすいでしょう。

linear-gradientの指定の仕方は、

linear-gradient(向き, 開始色, 終了色)

です。もう一度サンプルを見てみましょう。

See the Pen Gradient1 by gsg0222 (@gsg0222) on CodePen.

第1引数、向き

linear-gradientの最初の引数は「to right」で、これは右向きに色を変化させることを示しています。

一番左を開始色、一番右を終了色とせよという指示です。

「to 向き」で指定する方法は、以下のようになります。

to right左から右90deg
to bottom上から下180deg
to left右から左270deg
to top下から上0deg
to bottom right左上から右下135deg
to top right左下から右上45deg
角度の指定方法サンプル

縦横だけでなく、斜めへの指定も可能です。

また、上の表にも書いてありますが、数値での指定も可能になっています。

数値での指定の場合、下から上(to top)が0degです。

後は表のとおり、左から右が90deg、上から下が180degといった具合になります。

第2引数と第3引数、色の指定

第2引数と第3引数は、開始色と終了色の指定です。

サンプルでは2色で指定していますが、より複雑に3色以上を指定したりそれぞれの色の幅を指定したりもできます。

このページでは難しくなりすぎるので説明しません。

MDN web docsでサンプルコードを眺めて見るのもいいでしょう。

CSS グラデーションの使用

円形のグラデーション

円形のグラデーションを背景に指定するためには、background-imageにradial-gradientを指定します。

linear-gradientと同じく、こちらも画像扱いです。

See the Pen Gradient2 by gsg0222 (@gsg0222) on CodePen.

第1引数と第2引数、色の指定

第1引数で指定するのは中央の色、第2引数は一番外側の色になります。

サンプルのような単純なグラデーションだと、指定するのはこの2つだけです。

複雑な円形のグラデーション

より複雑なグラデーションも実装可能です。

例えば下記のサンプルは、グラデーションの中心を上から40px、左から40pxの場所に指定しています。

See the Pen Gradient3 at syntax by gsg0222 (@gsg0222) on CodePen.

第1引数の「farthest-corner at 40px 40px」が、「中心を中心を上から40px、左から40pxにして、一番遠い隅までグラデーションをかける」という指定になります。

第2と第3引数は色の指定です。

ただ、ちょっとややこしいしあまり使わない気もするので、こんなことも出来るんだというサンプルとしての提示にとどめておきたいと思います。

詳しく知りたい方はMDN web docsを確認してください。

radial-gradient()

対応しているブラウザ

linear-gradientとradial-gradientは比較的新しく定義されたCSSです。(とはいえ、既に10年は立っていますが)

なので、古いブラウザでは対応していないこともあります。

しかし、caniuse.comで確認したところ、2020年4月時点でlinear-gradientは94.23%、radial-gradientも94.23%のブラウザが対応していました。

実用上ほとんど問題にならないかと思います。

グラデーションを使って表示にアクセントをつけよう

linear-gradientとradial-gradientを使うと、比較的単純なCSSでグラデーションを作ることができます。

より複雑なことも出来るのですが、このページでは説明しません。

勉強熱心な方は、以下のページにサンプルコードとともに説明がのっているので、読みに行ってみるのも良いかと思います。

CSS グラデーションの使用

radial-gradient()

CSSをより勉強したいなら次の本がおすすめです
いろいろなパターンのCSSの説明もされていますが、それよりも設計(要するにクラスなどの命名)について説明された本です。
大きくて複雑なサイトを作成する際にCSS設計は必須の技術だと思います。
この本では2種類(BEMとPRECSS)の設計技法について書かれていますが、BEMのほうがメジャーなのでまずはBEMの方だけ読んでいくのが良いでしょう。

コメント

タイトルとURLをコピーしました