NEW ENTRY

例えば、サイドメニューとメインコンテンツが横並び(2カラム)になっていて、それぞれ背景色が違う場合、それぞれの高さが違っても、下まで背景色を揃えたいときがあります。

例えば、サイドメニューとメインコンテンツを囲んだdiv要素に2種類の色に分けた背景画像を設定する方法、ネガティブマージン(margin-bottom:-32768px; padding-bottom:32768px;)を利用する方法などがあります。

前者のほうは、レスポンシブなデザインには向きませんし、後者はIEの印刷時に問題があります。

そこで、:before擬似要素を利用すれば、CSSのみでレスポンシブにも対応したやり方ができるのではないかと試行錯誤してみたところできました!

(X)HTMLコード

<div id="contents">
	<div id="sub">
	</div><!-- /#sub -->
	<div id="main">
	</div><!-- /#main -->
</div><!-- /#contents -->

CSSコード

#contents {
	position:relative;
	overflow:hidden;
	width:980px;
	margin:0 auto;
	background:#fbfbfb;
}

#contents:before {
	position:absolute;
	top:0;
	left:0;
	width:30%;
	height:100%;
	content: '';
	background:#1f2124;
}

#sub {
	position:relative;
	float:left;
	width:30%;
}

#main {
	position:relative;
	float:right;
	width:70%;
}

ポイントは、それぞれの要素に『position』を指定することです。

今回は、メインコンテンツの背景に表示させたい色を親要素に指定して、サイドメニューの背景に表示させたい色を親要素の:before擬似要素に指定しています。

INDEX

CSSの基本

CSSの小技

ヘルプ

リファレンス

最近のブログ記事