ネガティブマージンを使ってレイアウトしてみる

Category
： CSS リファレンス

ネガティブマージン使用例

↑の画像のようなレイアウトってよく使われていると思うですが、こういうレイアウトをネガティブマージンを使う事でソース上も綺麗に収まりますし、使いけっこう使いがってもいいのでオススメしたいと思います。

ネガティブマージン使用例

XHTML

<div class="column">
    <h3>ネガティブマージンを使った例</h3>
    <p>テキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキスト</p>
<!--/ .column--></div>

CSS

.column	{
	width: 560px;
	background: url(image/article.jpg) no-repeat bottom;
	padding:0 10px 10px;
	margin-bottom: 30px;
}
#contents .column h3	{
	background: url(image/related_article.jpg) no-repeat;
	padding: 12px 15px 10px;
	margin: 0 -10px 10px;
	font-size: 133.3%;
}
#contents .main .column p	{
	margin-bottom: 10px;
}

ポイントとしてcolumnで指定した右左のpadding10pxの分をcolumn内のh3の左右をでmarginで-10pxする事です。

margin-left: -10px;でいいじゃないか？って思う人っていると思うですが、それだとIE6では上手くいかないので、注意して下さい。

自分は以前までは上記ソースで言うcolumnのpで右左にmarginをとっていたんですけど、そうすると他の要素が出てきた場合、その要素も追加しないといけない。ってな感じで面倒な事をしてたいんです...
いざ使ってみたらけっこう使えるので、是非みなさんも試してみて下さい。