[css]背景を左右で分ける方法

2016/1/5 2019/8/26 WEB, 未分類

Reading Time: 1 minute

規模がでかいから混乱したけど普通にやってることの応用で済んだ。
多分一番すっきりした組み方だと思う。

<div class="back">
	<div class="table">
		<div class="cell"></div>
		<div class="cell"></div>
	</div>
</div>

</div>

.back{
	width:100%;
	position:relative;
	background:#aaa;
	}
.back:before{
	width:50%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:#ddd;
	z-index:0;
	}
.table{
	width:960px;
	margin:0 auto;
	display:table;
	position:relative;
	z-index:1;
	}
.cell{
	width:50%;
	display:table-cell;
	}

.back{

width:100%;

position:relative;

background:#aaa;

}

.back:before{

width:50%;

height:100%;

position:absolute;

top:0;

left:0;

background:#ddd;

z-index:0;

}

.table{

width:960px;

margin:0 auto;

display:table;

position:relative;

z-index:1;

}

.cell{

width:50%;

display:table-cell;

}

上の例はブラウザいっぱいに背景を表示してコンテンツを中央寄せする感じの組み方。
「.back:before」で左半分を指定してる。
backgroundで済むので当然画像を差し込むこともできる。
右半分をどうこうしたい場合は「.back」なり「.back:after」なりでやればいい。

で、背景に適応させてコンテンツを載せたい場合は「.table」みたくやる。
背景同様に中央で割ってるので背景とコンテンツが被ることがない。