CSS Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

あわせて読みたい
【コピペOK!】CSSグラデーションの作り方まとめ
CSSグラデーションの作り方まとめ【コピペOK!】

続きを見る

重要なコード以外は省略している箇所が多いので、全部見たい人はCodePen左上のHTML・CSSをクリックして下さい。

 

完全無料のプログラミングスクール『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.

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

  • 0deg:下から上方向(角度)
  • pink 0%, pink 50%:一番下から真ん中までpink
  • skyblue 50%, skyblue 100%:真ん中から一番上までskyblue
.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になっただけです。

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

  • 90deg:左から右方向(角度)
  • pink 0%, pink 50%:一番左から真ん中までpink
  • skyblue 50%, skyblue 100%:真ん中から一番右までskyblue

 

斜めに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.

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

  • 0deg:下から上方向(角度)
  • pink 33%:一番下〜1/3までpink
  • skyblue 33%, skyblue 66%:下から1/3〜2/3までskyblue
  • lightgreen 66%:下から2/3〜一番上までlightgreen

 

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

色を分割するポイント

  • degは角度
  • 0deg:下から上
  • 180deg:上から下
  • 45deg:斜め(0・90・180・270以外は全部斜めとも言える)
  • 90deg:左から右
  • 270deg:右から左
  • どこからどこまでを何色にするか指定する

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作