Webページ上で左右に違う背景を連続させるのは以前はわりと手間のかかることでしたが、CSSの進化と共に疑似要素やグラデーションを使ってとても簡単に実装することが可能になりました。
そんな背景を左右で違うものを連続させる方法について、CSS疑似要素の「:before」と、CSSグラデーションを使った2パターンで実装する方法を紹介してみます。
【:before】CSSで左右に別々の背景を連続させる方法
【:before】を使って画面全体で背景を2分割するパターン
「【:before】を使って画面全体で背景を2分割するパターン」サンプルを別枠で表示
まずは疑似要素の「:before」を使ってbody全体（画面全体）で背景を2分割する方法です。
上記のサンプル画面では画面左が赤、画面右が黒の背景がブラウザ枠を伸ばしても連続して表示されます。
これを実装するにはHTMLには特に記述する必要があるものはなく、CSSのみでの実装になります。
◆CSS
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
line-height: 1.6;
color: #000;
text-align: center;
background: #f00;
}
body:before {
top: 0;
left: 50%;
width: 50%;
height: 100%;
content: '';
position: absolute;
background: #000;
z-index: -1;
}
bodyタグ自体に必要なプロパティは画面左に連続させる背景色になり、ここでは「background: #f00;」になります。
他のプロパティについては特に必要な指定はありません。
bodyタグ自体の指定に加えて、bodyの疑似要素「:before」に対して、画面右半分の要素を生成し画面右側に連続させる背景色を指定します。
要素自体は「position:absolute;」で絶対値指定にして「left:50%;」「width: 50%;」の指定にて画面右半分の領域として形成しています。
この様にbodyに対して「:before」と組み合わせた指定をすることで、画面全体で左右にそれぞれ違った背景を連続させることができます。
「:before」を使って特定の領域のみ背景を2分割するパターン
「【:before】CSSで左右に別々の背景を連続させる方法」サンプルを別枠で表示
一つ目のサンプルと違って、Webページ全体ではなくて一部の領域のみで背景画像を左右に分割して連続させる方法を紹介します。
HTMLには背景を2分割させる領域をブロック要素で用意します。
◆HTML <div class="bgDivide"></div>
サンプルではクラス「bgDivide」がついた領域を背景色を2分割させます。
このブロック要素に対してのCSSは以下になります。
◆CSS
.bgDivide {
width: 100%;
height: 300px;
position: relative;
background: #f00;
}
.bgDivide:before {
top: 0;
left: 50%;
width: 50%;
height: 100%;
content: '';
position: absolute;
background: #000;
}
基本的な構造は一つ目のサンプルと同じで高さを固定したブロック要素に対して、左右で別々の背景色を連続させています。
大枠のブロック要素に画面左側に連続させる背景色を指定し「:before」で生成する要素に画面右側に連続させる背景色を指定し要素自体を画面右側へ配置します。
この様に特定のブロック要素に対して「:before」と組み合わせた指定をすることで、ページ内の特定のブロックのみで左右にそれぞれ違った背景を連続させることができます。
【CSSグラデーション】CSSで左右に別々の背景を連続させる方法
【CSSグラデーション】を使って画面全体で背景を2分割するパターン
「【CSSグラデーション】を使って画面全体で背景を2分割するパターン」サンプルを別枠で表示
続いては「:before」疑似要素ではなく、CSSグラデーションを使って背景を2分割する方法です。
こちらも「:before」と同様に、まずはbody全体（画面全体）で背景を2分割する方法から。
一つ目のサンプル画面と同じく画面左が赤、画面右が黒の背景がブラウザ枠を伸ばしても連続して表示されます。
「:before」の時と同じようにこちらでも特にHTMLには記述する必要があるものはなく、CSSのみでの実装になります。
◆CSS
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 1em;
line-height: 1.6;
color: #000;
text-align: center;
background: linear-gradient(90deg,#f00 0%,#f00 50%,#000 50%,#000 100%);
}
bodyタグの背景に「background: linear-gradien」のグラデーション指定を使って指定します。
グラデーションさせる方向を「90deg」で左右にしたら「0%～50%」の間には画面左側の色を指定し「50%～100%」の間には画面右側の色を指定します。
CSSグラデーションを使っての指定の場合はこれだけで左右に別々の背景色を連続させられます。
サンプルでは特にベンダープレフィックスをつけていませんが、制作する時の対象ブラウザの範囲によっては適宜ベンダープレフィックスをつけて指定してください。
この様にbodyに対してCSSグラデーションを使うことで、画面全体で左右にそれぞれ違った背景色を連続させることが可能になります。
「CSSグラデーション」を使って特定の領域のみ背景を2分割するパターン
「【CSSグラデーション】CSSで左右に別々の背景を連続させる方法」サンプルを別枠で表示
最後に、CSSグラデーションを使ってWebページ全体ではなく一部の領域のみで背景を左右に分割して連続させる方法を紹介します。
こちらの場合も同様にHTMLには背景を2分割させる領域をブロック要素で用意します。
◆HTML <div class="bgDivide"></div>
「bgDivide」のクラスがついた領に対して背景色を2分割させます。
このブロック要素に対してのCSSは以下になります。
◆CSS
.bgDivide {
width: 100%;
height: 300px;
background: linear-gradient(90deg,#f00 0%,#f00 50%,#000 50%,#000 100%);
}
bodyタグにCSSグラデーション「background: linear-gradien」を使って背景にグラデーション指定を使って指定したのと同様に、グラデーションさせる方向を「90deg」で左右にしたら「0%～50%」の間には画面左側の色を指定し「50%～100%」の間には画面右側の色を指定します。
こちらでもサンプルでは特にベンダープレフィックスをつけていませんが、制作する時の対象ブラウザの範囲によっては適宜ベンダープレフィックスをつけて指定してください。
この様に特定のブロック要素にに対してCSSグラデーションで指定することで、ページ内の特定のブロックのみにそれぞれ違った背景色を連続させることが可能になります。
以上がCSSでWebページの左右に別々の背景を連続させる方法の紹介でした。
「:before」を使って左右を分けた場合は、背景色だけでなく背景画像も連続させることができるメリットがありますが、単純な背景色を使っての左右分割の場合は「CSSグラデーション」の方法の方が手軽かもしれません。
背景を2分割する場合でも状況によって「:before」と「CSSグラデーション」それぞれを使い分けるといいかと思います。
CSSで左右に別々の背景を連続させる際にぜひ。。。