ホームへ

【CSS】グラデーション(linear-gradient)で角度,方向を指定して斜めにする方法

2021年09月16日

CSSではグラデーションを指定することができます。

単色と違いグラデーションには方向ができます。よって斜めのグラデーションにしたいこともあるでしょう。

グラデーション(linear-gradient)で角度,方向を指定して斜めにする方法を解説します。

角度指定と方向指定

グラデーションを斜めにするには「角度を指定する方法」と「方向を指定する方法」の2つがあります。

「角度を指定する方法」 は「45度」のように角度を数値で指定します。

「方向を指定する方法」 は「左下から右上」のように頂点同士を結んだ方向を指定します。

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

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

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

グラデーションの角度の指定

background: linear-gradient(角度,開始の色,終わりの色)

角度の単位はdegです。45度なら45degです。

下記は具体例です。

background: linear-gradient(45deg, yellow, red)
background: linear-gradient(45deg, yellow, red)

グラデーションを指定するCSSはbackground-imageです。backgroundだけでまとめて指定することも可能です。

background-colorではありませんので注意しましょう。

background-image: linear-gradient(45deg, yellow, red)

角度一覧

0度のときは下から上、つまり12時の方向です。ここから時計回りに回っていきます。

90度は左から右、3時の方向です。

角度を指定しない場合は180度、上から下、6時の方向になります。

0度

background: linear-gradient(0deg, yellow, red)

30度

background: linear-gradient(30deg, yellow, red)

60度

background: linear-gradient(60deg, yellow, red)

90度

background: linear-gradient(60deg, yellow, red)

120度

background: linear-gradient(120deg, yellow, red)

150度

background: linear-gradient(150deg, yellow, red)

180度(指定なし)

background: linear-gradient(yellow, red)

15度

background: linear-gradient(15deg, yellow, red)

45度

background: linear-gradient(45deg, yellow, red)

75度

background: linear-gradient(75deg, yellow, red)

105度

background: linear-gradient(105deg, yellow, red)

135度

background: linear-gradient(135deg, yellow, red)

165度

background: linear-gradient(165deg, yellow, red)

向きを逆にしたいときは180度以降の数値を入れるか、マイナス値にするか、色の指定位置を逆にしましょう。

グラデーションの方向の指定

background: linear-gradient(to 方向,開始の色,終わりの色)

toのあとには「left right top bottom」を使って方向を指定します。

toの先にはゴール先を指定します。

「(左下から)右上へ」のときは「to right top」と指定します。

下記は具体例です。

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

頂点から頂点へ対角線上に変化します。

方向一覧

下へ(指定なし)

background: linear-gradient(yellow, red)

左へ

background: linear-gradient(to left, yellow, red)

上へ

background: linear-gradient(to top, yellow, red)

右へ

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

左下へ

background: linear-gradient(to left bottom, yellow, red)

左上へ

background: linear-gradient(to left top, yellow, red)

右上へ

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

右下へ

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

方向指定と角度指定の違い

方向指定と角度指定の違いを見比べてみましょう。

方向指定(左下から右上へ)

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

角度指定(45度)

background: linear-gradient(45deg, yellow, red)

左下から右上へ指定した場合、左下の頂点から右下の頂点、対角線の角度となります。

要素が正方形なら45度ですが、長方形なら45度にはなりませんね。

要素が横や縦に伸びる場合は方向指定か角度指定かどちらが適切か考えて指定しましょう。

まとめ

グラデーションの角度の指定

background: linear-gradient(角度,開始の色,終わりの色)

角度の単位はdeg。45度なら45deg。

0度は下から上、そこから時計回りに回り、90度は左から右。

角度を指定しないときは180度と同じ上から下となる。

グラデーションの方向の指定

background: linear-gradient(to 方向,開始の色,終わりの色)

toのあとには「left right top bottom」を使ってゴール先を指定する。

「(左下から)右上へ」のときは「to right top」と指定。

以上、CSSでグラデーション(linear-gradient)を斜めにする方法でした。

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

CSSやhtmlをマンガで学ぶ