そんな疑問にお答えします。
背景色を２色にする方法として２つの方法を紹介します。
その２つとは
- 「background」の「linear-gradient」を使う方法
- 擬似要素を使う方法
です。
両方ともHTMLを触ることなくCSSだけでコーディングが完了します。
ではそれぞれを見ていきましょう。
「background」の「linear-gradient」を使う方法
横に分割
See the Pen
背景２色（linear-gradient） by toshi (@toshi78)
on CodePen.
縦に分割
See the Pen
背景２色（linear-gradient）縦分割 by toshi (@toshi78)
on CodePen.
斜めに分割
See the Pen
背景２色（linear-gradient）斜め分割 by toshi (@toshi78)
on CodePen.
コード解説
ポイントは「方向角度」と「色の位置」の指定です。
方向角度とはグラデーションの向きです。
- 180degは↓（上から下へ）
- 90degは→（左から右へ）
- 45degは斜め
色の位置を簡単に解説します。
下のコードを見てください。
background: linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);この場合まず0%から50%まで青色のグラデーションと指定されています。
次に50%から100%まで赤色のグラデーションと指定されています。
グラデーションの指定となっていますが実際は「青→青」「赤→赤」となっているのでグラデーションにはならず、同色で塗りつぶされます。
よって0~50%まで青色、50%~100%まで赤色の２色で分割されることになります。
ここまで理解できると分割されている原理がわかると思います。
縦に分割
background: linear-gradient(180deg,#000 0%, #000 50%, #00CC99 50%, #00CC99 100%);
横に分割
background: linear-gradient(90deg,#000 0%, #000 50%, #00CC99 50%, #00CC99 100%);
斜めに分割
background: linear-gradient(45deg,#000 0%, #000 50%, #00CC99 50%, #00CC99 100%);
今回はちょうど半分で区切っているので50%で指定していますが、ここを変更することでいろんな割合で分割することができます。
See the Pen
背景２色（linear-gradient）px区切り by toshi (@toshi78)
on CodePen.
background: linear-gradient(90deg,#000 0%, #000 200px, #00CC99 200px, #00CC99 100%);このようにピクセルでの指定も可能です。
擬似要素を使う方法
See the Pen
背景2色（擬似要素） by toshi (@toshi78)
on CodePen.
まずHTMLで背景を分割させるブロックを用意します。
<div class="background"></div>
この要素に対してCSSを当てます。
.background {
width: 100%;
height: 400px;
position: relative;
background: #000;
}
.background::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background: #00CC99;
}ポイントは「position: relative;」「position: absolute;」を使って擬似要素を画面右側へ配置させていることです。
「left: 50%;」「width: 50%;」とすることで右側半分に配置されます。
仮に「left: 0;」ならば左半分に配置されます。
ここを調整することによっていろんな割合で分割することができます。
たとえば「left: 20%;」「width: 80%;」と指定するとこのようになります。
See the Pen
背景2色（擬似要素） by toshi (@toshi78)
on CodePen.
.background::before {
content: '';
position: absolute;
top: 0;
left: 20%;
width: 80%;
height: 100%;
background: #00CC99;
}
背景色を2色で分割表示する場面というのは結構出てくると思います。
「background」の「linear-gradient」を使う方法、擬似要素を使う方法の両方を知っていればまず困ることはないかと思います。
以上です。
投稿者 トシ
コメントを残す