Web ページのデザインで、ある要素がコンテンツエリアを突き破ってはみ出ている場合、それを簡単に再現するための CSS のソースコード例です。親要素の Width が指定されていて、そこからはみ出る要素がある想定で行います。

• 動作確認用の demo

親要素から子要素をはみ出させたい場合、子要素の margin にマイナスを指定することで子要素の横幅を広げることができます。以下にそのサンプルコードを示します。このサンプルコードの例では親要素の横幅が 200px、その子要素の横幅は300px となります。

<div style="width:200px;">
<div style="margin-right:-100px;">子要素</div>
</div>

確認しやすいように border, background などを指定してレンダリングすると以下のような結果となります。

<div style="width:200px; padding:5px; border:1px solid red;">
<div style="margin-right:-100px; background:#ccc;">子要素</div>
</div>

Firefox, Opera, Safari では意図したとおりにレンダリングされますが、IE でははみ出させたい部分が切れてしまうので IE には zoom プロパティなどを指定し hasLayout を true にして、さらに、 position プロパティに relative を指定することではみ出させたい部分が切れてしまうことなくレンダリングされます。

<div style="width:200px; padding:5px; border:1px solid red;">
<div style="margin-right:-100px; background:#ccc; position:relative; zoom:1;">子要素</div>
</div>

この方法を使えば、親要素の幅を広げるなどの手間のかかることをしないですみます。

ドロップシャドウの箇所が少しだけはみ出ているケースなどにもに便利です。

トラックバックURI

http://www.yomotsu.net/lab/css/widen-area/trackback

実験室に戻る