【CSS】background-colorの範囲を調整したい・半分にしたい【linear-gradient】

コーディング
スポンサーリンク

背景カラーを全体じゃなくて半分だけにしたい、一部だけにしたい

背景に色をつけるのは CSSでbackground-colorを設定すればいいのですが、普通に設定すると全体に色がついてしまいます。
例えば、半分にだけ色をつけたい時に普通の方法では思った通りにできません・・・。

 

linear-gradientが使える

linear-gradientはグラデーションを設定するのに使えるCSSです。

背景グラデーションの書き方
background: linear-gradient(グラデーションの方向, 始まりの色, 終わりの色);

See the Pen
OJRPYxw
by nzm (@nzm)
on CodePen.

 

色の範囲の指定を”どこからどこまで”をはっきり書くことでパッキリ色が分かれた背景を設定することができます。

background: linear-gradient(色の方向, 1色目 0%, 1色目 50%, 2色目 50%, 2色目 100%);

See the Pen
jOMEoWQ
by nzm (@nzm)
on CodePen.

 

%を調整してbackground-colorの比率を変える

2色の区切りを30%にして、白の割合を30%、青を70%にしてみました。

See the Pen
QWKwROo
by nzm (@nzm)
on CodePen.

 

3色でも

色追加して何色でもいけます。

See the Pen
poEvmaM
by nzm (@nzm)
on CodePen.

 


簡単なのでぜひ使ってみてください。
少しでも参考になれば幸いです。

コメント

タイトルとURLをコピーしました