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で左右に別々の背景を連続させる際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSSで左右に別々の背景を連続させる方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
Partner