みなさんこんにちは！
今回は背景色を２色に分ける方法を解説します！
また、画像と背景を重ねたレイアウトにも使える方法を
応用編としてご紹介しています！
背景を２色に分けるには？
背景を２色に分ける場合、セクション別などブロックで指定する場合は
それぞれに背景色を指定してあげればいいので簡単です。
背景を指定する方法はbackgroundプロパティです。
別記事にてbackgroundプロパティについて書いてありますので
詳しく知りたい方はそちらをご覧ください。
では一つの要素内で背景色を分けるにはどうしたらいいのでしょうか？
正解はタイトルにもあるようにbackgroundプロパティのlinear-gradientを使います。
linear-gradientは主にグラデーションを作るときに使用します。
こちらも別記事で解説してますので詳しく知りたい方はご覧ください。
linear-gradientを使って背景を２色に分けよう
では早速、linear-gradientを使った方法を解説していきましょう！
グラデーションを表現することも可能なlinear-gradientですが
色の表示位置を指定してあげることによって
グラデーションではなく、はっきりと分けた配色もできます。
上下で配色する場合
.background {
background: linear-gradient(0deg, orange 0, orange 100px, lightgreen 100px, lightgreen 200px);
}degは角度を指定しています。
今回の場合は0degなので水平です。
基準は下から上なので下から100pxまではorange、
100pxから200pxまではlightgreenということになります。
See the Pen 背景色２色 by kanae (@suzukana) on CodePen.
左右で配色する場合
左右で分けたい場合はこちらです。
.background {
background: linear-gradient(90deg, orange 0, orange 50%, lightgreen 50%, lightgreen 100%);
}角度の値を90degにします。
そうすると垂直になります。
基準は左からなので半分の50%までorange、そこから半分はlightgreenになります。
%で指定するとレスポンシブ対応になり
画面幅が変わってもずっと半分ずつ配色してくれます。
See the Pen 左右配色 by kanae (@suzukana) on CodePen.
画面の一部分だけ色を分けたい場合
画面の半分だけ色を指定したい場合はどうしたらいいでしょうか？
このような場合の時は色をつけたくない方に
元々の背景色またはtransparentを指定しましょう。
今回の場合は左側は色を指定したくないので
0%から50%までをtransparentを指定しました。
background: linear-gradient(90deg, transparent 0%, transparent 50%,#7f9df6 50%, #7f9df6 100%);See the Pen 背景三分の一 by kanae (@suzukana) on CodePen.
画像などのコンテンツと背景を重ねて表示させたい時は？
画像の後ろの背景を２色に配色したい時もありますよね？
こういったものもlinear-gradientを使えば出来ます。
まず画像をimgタグで設置し、divで囲みます。
<div class="picture">
<img src="画像のパスが入ります" alt="">
</div>そのdivに擬似要素を作り、そこに背景を指定します。
※詳しいコードはcodepenを見てください。
.picture::before {
background: linear-gradient(0deg, gray 0%, gray 60%, bisque 60% , bisque 100%);
}See the Pen 画像を重ねる by kanae (@suzukana) on CodePen.
まとめ
linear-gradientを使って背景色を分ける方法を解説してきました。
degの値を変えたり色の配色を変えたり
背景色を表示させる範囲を変更すれば色々なサイズで背景色を指定できます。
ぜひ試してみてください。
