てくてく歩く

一歩踏み出そう!

それじゃあ始めようか!前回の内容は覚えているかな?

はい、確か、背景色を透明で塗りつぶすんですよね

そうだね、今日のレッスンでは、背景を二色で二分割するよ

それでは、今日のコードだよ

<div style="width:100%;height:100%;background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);"></div>

できました!

background:linear-gradient(方向角度,色 位置,色 位置,...);のように記述するんだよ

また、90deg → (左から右へ)となるよ

方向を省略した場合はどうなるんですか?

いい質問だね、方向を省略した場合は、to bottom(180deg)となるよ

なるほど~、いろいろ試してみます!