犬の手も借りたいあなたに最適な記事を届けます

【CSS】色のグラデーションの使い方(linear-gradient)

いぬのて
いぬのて

こんにちは。いぬのてです。

本記事では、CSSの色における、グラデーションの使い方をお教えします。

CSSについてまだ詳しくわからない人は先にこちらをお読みください。

グラデーション

グラデーションとは、

百聞は一見にしかず、こちらをご覧ください。

このように、ある色からある色に徐々に変化していくのが、グラデーションです。

では早速使い方を学んでいきましょう。

グラデーションの使い方

グラデーションを使用するには、「linear-gradient」と指定します。

読み方は(ライナーグラディエント)です。

間にあるのは、半角のハイフンです。

全角だったり、日本語のー(伸ばし棒)と間違えないように気をつけましょう。

この「linear-gradient」はcssプロパティーではありません。

なので、

CSS
h2{linear-gradient:blue,red}

とするのは、間違いです。

上記では、何をグラデーションさせるのか指定をしていないですね。

正しくは以下です。

CSS
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指定することで、色の割合を決めることができます。