【CSS】背景色(background)を2色に分割する方法(斜めも解説)

背景色を2色に分割したいけどどうやるの？

divタグが2つあれば何も難しいことはありませんが、1つの場合に2色に分割するにはどうしたらいいでしょうか？

グラデーションで変化させる方法は以下の記事で解説していますが、今回はグラデーションではなく綺麗に半分に分割する方法を解説します。

CSSで背景を2色に分割(半分)する方法

今回基本となるHTMLはこちらです。

<div class="container">
  <p>横に2分割</p>
</div>

pタグは解説用なので、なくても構いません。

それでは解説していきます。

横に2分割

CSSはこちら。

.container {
  background: linear-gradient(0deg, pink 0%, pink 50%, skyblue 50%, skyblue 100%);
}

サンプルはこちら。

See the Pen
横に2分割 by junpei (@junpei-sugiyama)
on CodePen.

コードを分解してみると、以下のような意味になります。

.container {
  background: linear-gradient(0deg, pink 0%, pink 50%, skyblue 50%, skyblue 100%);
}
↓↓↓
.container {
  background: linear-gradient(角度(向き), 最初の色, 次の色);
}

そして0degが180degであれば、下から上方向ではなく上から下方向になるので、以下のように先ほどと逆向きになります。

See the Pen
横に2分割（上下逆） by junpei (@junpei-sugiyama)
on CodePen.

もしくはdegはそのままでカラーコードを入れ替えても逆になります。

縦に2分割

CSSはこちら。

.container {
  background: linear-gradient(90deg, pink 0%, pink 50%, skyblue 50%, skyblue 100%);
}

サンプルはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

横に2分割と違うのは角度が0degから90degになっただけです。

コードを分解してみると、以下のような意味になります。

斜めに2分割

CSSはこちら。

.container {
  background: linear-gradient(45deg, pink 0%, pink 50%, skyblue 50%, skyblue 100%);
}

サンプルはこちら。

See the Pen
斜めに2分割 by junpei (@junpei-sugiyama)
on CodePen.

ここまでの解説を見れば分かると思いますが、これも角度が45°の45degになっただけです。

CSSで背景を3色に分割する方法

今度は3分割にしてみます。

横に3分割

CSSはこちら。

.container {
  background: linear-gradient(0deg, pink 33%, skyblue 33%, skyblue 66%, lightgreen 66%);
}

サンプルはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

コードを分解してみると、以下のような意味になります。

縦に3分割

ここまで来たらもうどうすればいいか分かると思います。

CSSはこちら。

.container {
  background: linear-gradient(90deg, pink 33%, skyblue 33%, skyblue 66%, lightgreen 66%);
}

サンプルはこちら。

See the Pen
縦に3分割 by junpei (@junpei-sugiyama)
on CodePen.

横の場合は0deg、縦の場合は90degですね。

まとめ

今回はCSSで背景色を分割する方法を解説しました。

グラデーションでは綺麗に半分に分けられませんでしたが、書き方自体はグラデーションとほぼ同じです。

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

2023年12月31日まで！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら