こういう所で使ったら便利なネガティブマージン

こういう所で使ったら便利なネガティブマージン

以前ネガティブマージンを使ってレイアウトしてみるでネガティブマージンの使い方については紹介したのですが、実際にどういう所に使うのか分からない...って事も聞きましたので、実際にこういう所で使ったら便利だと思う所をいくつか紹介したいと思います。

…ここからが続き

hタグ要素だけ左右少し横に出したい

hタグ要素だけ左右少し横に出したい 1

上記画像の様に、見出しタグのみ他のコンテンツより幅をもたせたいって事はデザインのバランス上よくあるかと思います。divを分けたり、増やしたりしたらこの問題は解決出来るのですが、ネガティブマージンを使う事によって div も一つで済みますし、ソース上でも分かりやすくなりますし他にいろいろ利便性があるかと思います。

hタグ要素だけ左右少し横に出したい 2

demo page

img要素にborderを使う場合

img要素にborderを使う場合

上記画像の様にコンテンツ幅一杯に画像があり、その要素をborderを使いたい時に使う場合にも使うと便利です。

demo page

こいつだけ横飛び出してるんですけど!?

img要素にborderを使う場合

デザインデータが貰い、コーディングから自分が担当する場合もあるんですが、こういう時によく上記画像みたいな感じに、「こいつだけ飛び出してるんですど!?」って事は珍しい事ではありません。

こういう時にネガティブマージンを使うと随分楽になりますね。

サンプルはちょい手抜きします...そのバナー2の要素だけ margin: 0 -10px; と指定すればレイアウトが崩れずに思った用に表示してくれますよ!

まとめ

上記の3パターンが実際に自分がよくネガティブマージンを使う箇所ですね。
上記で紹介した例なんですが実際はネガティブマージンを使わなくても組む事は出来るのですが、ネガティブマージンを使った方が便利だよ!って思う例です。

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