こんにちは。いぬのてです。
本記事では、CSSの色における、グラデーションの使い方をお教えします。
CSSについてまだ詳しくわからない人は先にこちらをお読みください。
グラデーションとは、
百聞は一見にしかず、こちらをご覧ください。
このように、ある色からある色に徐々に変化していくのが、グラデーションです。
では早速使い方を学んでいきましょう。
グラデーションを使用するには、「linear-gradient」と指定します。
読み方は（ライナーグラディエント）です。
間にあるのは、半角のハイフンです。
全角だったり、日本語のー（伸ばし棒）と間違えないように気をつけましょう。
この「linear-gradient」はcssプロパティーではありません。
なので、
h2{linear-gradient:blue,red}とするのは、間違いです。
上記では、何をグラデーションさせるのか指定をしていないですね。
正しくは以下です。
h2｛color:linear-gradient(blue,green)｝このようにh2要素の色をグラデーションで青と緑
という風に指定します。
ここまでは簡単です。
では次にlinear-gradient（）の（）の中身を解決します。
linear-gradient()内
もちろん上記の（blue,green）でもグラデーションはできますが、細かな指定ができていない状態です。
もっと詳しく細かくグラデーションを設定したい場合は、（）の中身を指定する必要があります。
（to 方向,色,色）
()の中身は（to 方向,色,色）という風に指定します。
もし、to bottom と指定すると、下に向かってグラデーションします。
to bottom leftとすると、右上から左下にかけて、グラデーションします。
方向を角度で表すこともできます。
0度はto topを表します。
90度はto rightを表します。
360度の円があり、中心からその度合いの向きに向かった、グラデーションを指定できます。
色
色はどのくらいその色を使用するか、範囲を決めることができます。
(to 方向, red 70%,blue 30%)という風に、色の後に、半角スペース、%もしくはpx指定することで、色の割合を決めることができます。
