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

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

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

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

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

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で背景色を分割する方法を解説しました。

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

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！