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

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

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

…ここからが続き

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

XHTML

<div class="column">
    <h2>ネガティブマージンを使った例</h2>
    <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 h2	{
	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内のh2の左右をでmarginで-10pxする事です。

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

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

Download

Domo Page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article