【CSS】グラデーションが効かないときの解決策【linear-gradient】

ある日Webサイトをコーディングしたときのこと。

背景にグラデーションをつけたデザインにしたかったのですが、どうしてもグラデーションをつけることができませんでした。

CSSだけでグラデーションを背景につけることができますが、なぜCSSが効かなかったでしょうか。

今回はCSSでグラデーションが効かないときの原因と解決策を解説していきます。

それでは解説していきます。

グラデーションがつけたい人（著者:ゴロー）

グラデーションがつけたい！

今回のGOAL

まず、今回のGOALを整理します。

グラデーションというのは以下のような色をイメージしてもらえば大丈夫です。

作り方ですが、以下の関数を使用してCSSだけでグラデーションを作ることができるのは、すでにご存知かと思います。

 linear-gradient();

上記の方法でグラデーションを作っていきます。

どんな状況

コードが書いてChromeで確認したところ、このようなエラーがでています。以下は間違ったコードです。

よくみていただくと、気づくかたもいるかと思います。（A☆H☆A体験をぜひ）

結論

原因は後述しますので、先に結論の解決策をいいます。

画像のコードではなく以下のように書きます。

background-image: linear-gradient(to bottom, #ed58bb, #ffe554);

画像と見比べてもらうとわかりやすいかと思いますが、間違ったコードでは、background-colorプロパティを使っています。

それに対し正しいコードでは、background-imageプロパティを使っています。

似ているのでよく見てみてください。はい。違いますね。

間違えた原因

間違えた原因は、使用するプロパティを間違えたことです。

background-imageプロパティを使用してみてください。

おすすめ書籍

もっとHTML・CSSを勉強したい方へおすすめ書籍を紹介します。

標準デザインシリーズは本当にわかりやすく、また深く説明してくれます。

このシリーズには広く深くという印象をもっています。

よろしければぜひ見てみてください！

詳細はこちら

まとめ

今回の記事をまとめます。

今回は、CSSのグラデーションが効かないときの解決策について解説しました。

皆さんも良いコーディングライフを^^ /〜