スマートフォン用はこちら

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

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

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

…ここからが続き

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

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