ホームへ

CSSのグラデーションで2色、3色を指定する方法

2021年09月25日

CSSでは色の指定において、単色のみならずグラデーションを指定することができます。

グラデーションは当然1色ではなく、2色、3色と指定するものです。

CSSのグラデーションで2色、3色、4色を指定する方法を解説します。

グラデーション指定の基本

background: linear-gradient(向き, 最初の色, 次の色);

CSSでグラデーションを指定するには上記のように指定します。

向きは「to」で指定する方法と角度を指定する方法があります。

色の指定は最低2つ指定します。3色以上指定する場合は「, 次の色」のようにカンマと色を追加で指定します。最後の色の後ろにはカンマはいりません。

2色グラデーション

background: linear-gradient(to right, yellow, red)
background-image: linear-gradient(to right, yellow, red)

3色グラデーション

background: linear-gradient(to right, yellow, red, purple)
background: linear-gradient(to right, yellow, red, purple)

4色グラデーション

background: linear-gradient(to right, yellow, red, purple, blue)
background: linear-gradient(to right, yellow, red, purple, blue)

5色以上の場合も「,色」を追加することができます。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

色の位置を指定する方法

3色指定したとき、1色目は一番左、3色目は一番右、2色目はそのちょうど真ん中になります。

しかし、デザインによってはこの位置を調整したいことでしょう。

全体を0~100%としたときの位置を%で指定しましょう。

background: linear-gradient(向き, 最初の色 位置%, 次の色 位置%, 次の色 位置%);

background: linear-gradient(to right, yellow, red 20%, purple 70%)
background: linear-gradient(to right, yellow, red 20%, purple 70%)

ポイントは「,色 位置%」でワンセットであることです。半角スペースやカンマの位置に注意しましょう。

中間の位置を指定する方法

色と色の間に「,位置%」だけ指定すると中間の位置を指定できます。

background: linear-gradient(to right, yellow, 20%, red)
background: linear-gradient(to right, yellow, 20%, red)

黄色と赤の間の色はオレンジです。その位置を指定するとき「オレンジ」を省略できます。

中間色を調べて記述するより楽ですね。

linear-gradientを使って複数色背景を表現する

上記を応用して、グラデーションしない明確な複数色の背景を表現することも可能です。

前の色の終わる位置と次の色の始まる位置を同じ位置に指定しましょう。

2色背景

background-image: linear-gradient(to right, yellow 50%, red 50%)
background-image: linear-gradient(to right, yellow 50%, red 50%)

3色背景

background-image: linear-gradient(to right, yellow 33%, red 33%, red 66%, purple 66%);
background-image: linear-gradient(to right, yellow 33%, red 33%, red 66%, purple 66%)

4色背景

background-image: linear-gradient(to right, yellow 25%, red 25%, red 50%, purple 50%, purple 75%, blue 75%);
background-image: linear-gradient(to right, yellow 25%, red 25%, red 50%, purple 50%, purple 75%, blue 75%);

まとめ

background: linear-gradient(向き, 最初の色, 次の色);

色を追加するには「, 次の色」を追加していく。

色の位置を指定するには「,色 位置%」のように、色の後ろに位置%を指定する。

以上、CSSのグラデーションで2色、3色、4色を指定する方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ