ネガティブマージンを使ってレイアウトの解説

ネガティブマージンを使った例

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキスト

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では上手くいかないので、注意して下さい。

ページトップへ