KIRIN~美の巨人たち~ ヒョウ柄


ヒョウ柄

ugg joggesko
ugg vesken
ugg saappaat outlet
uggs pour les tout-petits
ugg leiligheter

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

  • Category :
  • CSS リファレンス

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

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

…ここからが続き

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

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

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

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

demo page

img要素にborderを使う場合

img要素にborderを使う場合

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

demo page

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

img要素にborderを使う場合

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

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

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

まとめ

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

  • Permanent link
  • Comment  [0]
  • Track back  [0]

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

  • ありがとうございます。貴殿は、とても詳しいですね。santa
  • santaさん 自由に使って頂いて構いませんよ!MIYA
  • すみません、こちら使わせていただいていただいて、よsanta
  • はじめまして。 lightbox 2.0を設置してmaniwac
  • はじめまして。 こちらのデザインフォームを使わせてnori
  • MIYAさん ご回答ありがとうございます。 教えてoti
  • oti さん ローカル上で動き、HP上で上手くいかMIYA

Archive

2011年
  • 2011年4月 [3]
  • 2011年3月 [1]
2010年
  • 2010年12月 [1]
  • 2010年11月 [3]
  • 2010年10月 [2]
  • 2010年3月 [7]
  • 2010年2月 [2]
  • 2010年1月 [1]
2009年
  • 2009年11月 [5]
  • 2009年10月 [6]
  • 2009年9月 [9]
  • 2009年8月 [3]
  • 2009年7月 [9]
  • 2009年6月 [21]
  • 2009年5月 [10]
  • 2009年4月 [14]
  • 2009年3月 [16]
  • 2009年2月 [14]
  • 2009年1月 [13]
2008年
  • 2008年12月 [10]
  • 2008年11月 [13]
  • 2008年10月 [15]
  • 2008年9月 [14]
  • 2008年8月 [15]
  • 2008年7月 [14]
  • 2008年6月 [16]
  • 2008年5月 [21]
  • 2008年4月 [19]
  • 2008年3月 [19]

Related Article