ネガティブマージンをIE6.0でも使う

HTMLの構造（ソース）を、サイトを通じて考えるときに、
できるだけ同じ構造にしておくと、
修正や更新の時にも、わかりやすくスムースに作業ができるので、
ナイスなのですが、レイアウトの状態によっては、
どうしても、構造を変えなくてはならないケースが出てきます。






例えば、
トップページのタイトル画像だけ、めいっぱい大きくして目立たせたいけれど、
HTMLの構造はサイト全体で同じにしたい。


というケースがあるとして、


レイアウト領域が横幅最大950px、
左側に横幅230pxのサイドバー、
右側は横幅700pxのコンテンツスペース、
とします。


さらに、
ページのタイトル画像をコンテンツスペースに入れる
HTMLの構造にした場合、


トップページのみ、
タイトル画像を横幅950pxいっぱいに広げようと思っても、


通常では、左右分割で使う、
float: left; と、float: right;　だけではうまくいかず、
HTMLの構造を変える必要が生じます。




が、ここで、
ネガティブマージンを使えば、
HTMLの構造を同じで、
トップページのみ、コンテンツ領域をはみだして、
タイトル画像のスペースを広げることができてしまいます。




以下は、タイトル画像が、
トップページでは横幅950px、高さ幅400px。
それ以外のページでは横幅700px、高さ幅150px。
とする例です。


【HTML】

<div id="wrapper">


<!-- 横幅700pxの右側メインコンテンツ領域 -->
<div id="content">

<h1><img src="title.jpg" alt="これがページタイトル用の画像です。通常は横幅700pxで作成し、トップページのみ950pxで作成します。SEOを意識してスタイルシートで背景とする場合もあります。" /></h1>

<p>実際は色々なコンテンツが入ります。</p>

</div>


<!-- 横幅230pxの左側サイドバー領域 -->
<div id="sidebar">

<p>左側の横幅230pxのサイドバーです。ナビゲーションなど、実際はいろんなコンテンツが入ります。</p>

</div>



<br class="clear-both" />
</div>



【CSS】
＜サイト全体＞
div#wrapper{
width: 950px; margin: 0px auto;
}
div#content{
float: right; width: 700px; margin: 0px 0px 0px auto;
}
div#content h1{
width: 700px; height: 150px; margin: 0px 0px 10px;
}
div#sidebar{
float: left; width: 230px;
}
br.clear-both{
clear: both;
}


＜トップページのみ＞
div#content h1{
width: 950px; height: 400px; position: relative; margin-left: -250px;
}
div#sidebar{
margin-top: 400px;
}



上記のように、トップページだけ、別のスタイルシートをあてがうようにして、
タイトル画像部分（<h1></h1>）にネガティブマージンをかけておけば、
HTMLの構造をサイト全体で統一することができます。


ポイントになるのが「position: relative;」の部分です。
IE6.0対策になるのですが、IE6.0ではネガティブマージンを使っても、
「ー（マイナス）」部分のピクセルは表示されません。
「position: relative;」を併記することによって、
（なぜか）SafariやFirefoxのように、きちんと表示してくれます。


今回のケースでは、左右にボックスをフロートさせているので、
そのままでは、トップページは
タイトル画像にサイドバーの内容が重なってしまいます。
そこで、margin-topを使って、サイドバーの上側間隔を
空けてやるようにします。




【まとめ】
ネガティブマージンを使えば、横幅を固定したレイアウト領域をはみだしてコンテンツ（画像など）を表示させることができる。ただし、IE6.0では「position: relative;」の併記が必要。


【MEMO】
あるボックスの中で、タイトルの画像だけ、
そのボックスの両端を一定量はみだす、といったケースでも、
ネガティブマージンは威力を発揮します。

Comments

こんばんは。泣きながらIE6のネガティブマージンとたたかっていましたところ、こちらにたどり着きました。もちろん、解決です。もう泣かずにすみます。ありがとうございました。

Posted by ロバオ at 2009年04月30日 01:42

＞ロバオさん

初めまして。
書き込みありがとうございました。
（すみません、書き込みに気がつくのに1ヶ月近くたってしまいました）

ネガティブマージンでIE6には、おまじない「position: relative;」が必要だなんて、知らないとナゼ？ナゼ？　になりますよね。

お役に立ててよかったです。

Posted by polka at 2009年05月27日 03:58

こんにちは。大変助かりました。　ありがとうございます。

Posted by hnt at 2010年06月08日 07:35