こういう所で使ったら便利なネガティブマージン
- Category :
- CSS リファレンス

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

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

img要素にborderを使う場合

上記画像の様にコンテンツ幅一杯に画像があり、その要素をborderを使いたい時に使う場合にも使うと便利です。
こいつだけ横飛び出してるんですけど!?

デザインデータが貰い、コーディングから自分が担当する場合もあるんですが、こういう時によく上記画像みたいな感じに、「こいつだけ飛び出してるんですど!?」って事は珍しい事ではありません。
こういう時にネガティブマージンを使うと随分楽になりますね。
サンプルはちょい手抜きします...そのバナー2の要素だけ margin: 0 -10px; と指定すればレイアウトが崩れずに思った用に表示してくれますよ!
まとめ
上記の3パターンが実際に自分がよくネガティブマージンを使う箇所ですね。
上記で紹介した例なんですが実際はネガティブマージンを使わなくても組む事は出来るのですが、ネガティブマージンを使った方が便利だよ!って思う例です。



