ネガティブマージンの使い方とテクニックまとめ【css】

ネガティブマージンについて

マージン(margin)は、正の値以外にも負の値(マイナス)を指定することができます。 これがいわゆるネガティブマージンってやつです。 ちょっと大げさな名前ですよねwただ「-」(マイナス)付けるだけなのにw

それでどういう時に使うかっていうと、画面いっぱいにヘッダーやフッターを表示したいなどに使えます。

それ以外にも、色々使いどころがあるので紹介していきますね。 まずは、ネガティブマージンの使い方を説明します。

目次
ネガティブマージンの使い方
ネガティブマージンの注意点
ネガティブマージンを使ったテクニック

ネガティブマージンの使い方

使い方は簡単で、単純にマージンに「-」(マイナス)を付けるだけ そうすると、マイナス方向にマージンが付きます。 といってもわかりずりので、実際にネガティブマージンを付けるとどうなるか見てみましょう!

<div>
 <ul>
 <li>liの部分</li>
 <li>liの部分2</li>
</ul>
</div>
div{
  width:80%;
  border:solid 1px #ccc;
  margin:0 auto;
}
ul{
  margin:0 0px 0px 0;
}
ul li{
  margin:10px;
  padding:10px;
 list-style:none;
 background:#cceffc;
}
ネガティブマージンを付ける前

上の画像のような状態の時に「ul」にネガティブマージンを付けてあげます。 そうすると、下のようにマイナス方向にマージンが付きます。

div{
  width:80%;
  border:solid 1px #ccc;
  margin:0 auto;
}

ul{
  margin:0 -20px -20px 0;
}
ul li{
  margin:10px;
  padding:10px;
 list-style:none;
 background:#cceffc;
}
ネガティブマージンを付けた例

画像を見てもらえばわかるように、ネガティブマージンを付けたulが親要素のdivを突き破って外にでました。 ネガティブマージンを付けると、こういうように簡単に親要素の外にだすことができます

ちなみに画面いっぱいにヘッダーやフッターを表示したい時にも使えます。 他にも色々使えてとっても便利ですので、ぜひ使って見て下さいね!

下はネガティブマージンの仕様です。

※スタティックとはfloatを指定してないという意味。エレメントとは要素のこと。

スタティックな要素のtop/leftにネガティブマージンを指定した際は、その指定した方向にエレメントを引っ張ります。

しかし、bottom/rightにネガティブマージンを指定した際は、下/右にエレメントを動かしません。 その代わり、それに重なったエレメントを引っ張ります。

さらに、エレメントにwidthを指定していなければ、left/rightにネガティブマージンを指定し、両側のエレメントを引っ張ることができます。 マージンがpaddinのように振る舞うのはここがポイントです。

floatされている場合のネガティブマージンの仕様です。

※リキッドレイアウトとは、コンテンツの幅・位置などを可変して表示させるレイアウトの事です。

ネガティブマージンをfloat(#mydiv1{float:left;})とは逆方向に「margin-right:-100px;」と指定した際は、divは重なります。

この手法は100%の幅を使ったリキッドレイアウトに、固定幅のものを配置するのに役立つテクニックです。

divが二つとも「float:left;」で、逆方向に「margin-right:-20px;」とネガティブマージンを指定した際は、実際の幅より小さく(重なって)表示されます。 ネガティブマージンが実際の幅と同じ場合は、それは完全に重なります。これはmargin, padding, borderとwidthが要素の全体の幅になるためです。

ネガティブマージンの注意点

ネガティブマージンが効いてくれないブラウザもあります。 例えばIE6とか。 (IE6以降であればすべてのモダンブラウザで完全にサポートされてます)

なので、正しく表示してもらうために「positionプロパティ」を設定しときましょう! 例えば「margin:-10px;」とするなら下のように書きます。

position:relative;
/*absoluteでもok*/

margin:-10px;

これで基本的には、ネガティブマージンが正しく反映されます。

IE(インターネットエクスプローラー)で正しく表示されてるのに、なぜかfirefoxでは効かない(。´・ω・)? って時があったらまずは「position」を設定してみて下さいね。

あとDreamweaver(ドリームウィーバー)のデザインビューでは、ネガティブマージンが反映されないので、注意して下さい。

ネガティブマージンを使ったテクニック

ネガティブマージンを使った簡単なテクニックの紹介です。

webサイトやブログのヘッダー・フッターを画面の横幅いっぱいに広げたいって思ったことないですか? 最初にも言いましたが、これはネガティブマージンを使うと超簡単にできるんです!

仕組みとしては、ネガティブマージンで画面から要素をはみ出させて、overflowではみ出した部分を非表示にするだけ。 めっちゃ簡単にできます。

ネガティブマージンを使って画面いっぱいに要素を表示する仕組み
html {overflow: auto;}
 
body {overflow: hidden;}

#example {
    margin-left: -500%;
    margin-right: -500%;
    padding-left: 500%;
    padding-right: 500%;
}

上をコピペして#exampleの部分に画面いっぱいに広げたい要素を記述するだけでできちゃいます。 詳しい仕組みとかは別記事で書きたいと思います。

とりあえず、コピペして#exampleの部分だけ書き換えてもらえば画面いっぱいに要素を広げる事ができるので、是非試してみて下さいねー(^^♪

以上「ネガティブマージンの使い方」でしたー(^^)/