CSSネガティブマージンのすすめ

コーディングを進めていくにあたって、コンテンツ領域からはみ出ているデザインや、一部分だけ余白を取らないようなレイアウトの時に、ネガティブマージンを利用しています。

IE6での崩れも少なく（多少解釈が違う箇所もあります）、色々なところで使えるので、備忘録のためにもどのような場面で利用したのか控えておこうと思います。

見出し部分だけ左右の余白がないレイアウト

見出し部分だけ左右の余白がなく背景が敷いてあるようなレイアウトの際に、いちいち見出しの時だけ余白のスタイルのdivから外す方法もあると思いますが、ネガティブマージンを用いればその必要も無くなります。

見出しの時だけdivから外す方法

<h2>見出し2</h2>
<div class="inner">
	<p>本文本文本文本文本文</p>
</div>
<h2>見出し2</h2>
<div class="inner">
	<p>本文本文本文本文本文</p>
</div>

h2 {
	margin:15px 0;
}
.inner {
	padding:0 15px;
}

見出しにネガティブマージンを指定する方法

<div class="inner">
	<h2>見出し2</h2>
	<p>本文本文本文本文本文</p>
	<h2>見出し2</h2>
	<p>本文本文本文本文本文</p>
</div>

h2 {
	margin:15px -15px;
}
.inner {
	padding:0 15px;
}

ある意味見出しと本文が同じ階層になってしまうので、分かり辛いと言えばそうかもしれませんが、記述自体は減っていると思います。

※マーク等の時に2行目以降にスペースを空ける

少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックスでも取り上げられてる方法で、こちらもネガティブマージン…では無いですが、マイナスの値を与えることで実現可能です。

設定していなくても読む文には困りませんが、こうした小さな気遣いが後々重要になってくると思っています。

p {
	padding-left: 1em;
	text-indent: -1em;
}

SEOを考慮した3カラムレイアウト

SEOを考慮すると、なるべくコンテンツエリアを始めに持ってきたほうが良いと言われていますが、3カラムレイアウトの時にはfloatの調整だけではコンテンツエリアを上に持ってくることが出来ません。

そこで、ネガティブマージンを利用することでHTMLの記述を、コンテンツエリア＞左メニュー＞右メニューの順に並べることが可能となります。

<div id="wrap">
	<div id="cont">
		<p>コンテンツエリア</p>
	</div>
	<div id="lMenu" class="side">
		<p>左メニュー</p>
	</div>
	<div id="rMenu" class="side">
		<p>右メニュー</p>
	</div>
</div>

#wrap {
	width:800px;
	margin:0 auto;
}
#cont {
	float:left;
	display:inline;
	width:400px;
	margin-left:200px;
}
.side {
	float:left;
	width:200px;
}
#lMenu {
	display:inline;
	margin-left:-600px;
}