cssマージン（margin）の使い方を覚えよう！

cssのマージン（margin）とは、ボーダー（bordr）の外側の余白を設定するためのものです。マージン（margin）はwebサイトを作る時に必ず使うので、しっかり覚えておくと作る時、すごい楽になります。
このページではマージン（margin）の色々な使い方を紹介してきますね。

マージン（margin）の設定方法

マージン（margin）は、下のプロパティを使って、上下左右をまとめて指定することができます。それと個別に指定する事もできます。
marginプロパティ意味
margin:〇px; 上下左右のマージンをまとめて指定する
margin-top:〇px; 上のマージンを指定する
margin-bottom:〇px; 下のマージンを設定する
margin-left:〇px; 左のマージンを設定する
margin-right:〇px; 右のマージンを設定する

また半角スペースで区切って、上下左右のマージンの値をそれぞれ指定することもできます。
※例として5pxを使っていますが、何pxでも大丈夫です。
使い方意味
margin:5px; 「上下左右」のマージンが5pxになる
margin:5px 10px; 「上下」が5px、「左右」が10pxのマージンになる
margin:5px 10px 15px; 「上」が5px、「左右」が10px、「下」が15pxのマージンになる
margin:5px 10px 15px 20px; 「上」が5px、「右」が10px、「下」が15px、「左」が20px
のマージンになる

単位について

大抵の場合はpx（ピクセル）という単位を使って、サイズを指定します。
他にもパーセンテージ（%）を使って、ボックスのサイズに対するパーセンテージで指定することができます。例えば「10%」と指定場合は、ボックスの縦、または横、もしくは両方向のサイズに対して 10%の割合でマージンが設定されます。
%の書き方の例
div{margin:10% 20% 30% 40%;}

/*例としてdivにしましたが、何でも大丈夫です*/ 他にもボックスの状況に応じて、自動的にマージンを設定する「auto」というものがあります。
例えば、ボックスの幅を固定して左右のマージンをautoにすると左右のマージンが同じサイズに設定されます。その結果ボックスがセンタリングされます。
これも使う事が多いので、覚えておくと便利です。
マージンauto書き方
div{margin:auto;}

マージン（margin）の書き方

上のブラウザ上のマージン表示例を見て「あれっ？」と思う所ないですか？
縦方向のマージンがちょっと違いますよね。実はマージンは縦方向で重なるマージンを相殺しているんです

マージンの相殺

例えば上のような場合、上のdivには下方向のマージンが40px、下のdivには上方向のdivが15pxが指定されてます。ですが実際ブラウザに表示されているのは、上のdivに指定されている下方向のマージン40pxのみですよね。
こういうように要素同士が縦に隣接している場合、マージンが重なってどちらか大きい方のマージンが反映されることがあります。このことをマージンの相殺といいます。
ちなみに左右のマージンは相殺されません。縦方向のみです。
ちょっとややこしいかもしれないですが、そのうち感覚でなれます。こういうものだと思ってください。
マージンの相殺にはルールというものがあります。最初の内は覚えなくても大丈夫ですが、一応載せておきますね。

マージンの相殺のルール

・floatの指定がない場合は、縦方向のマージンが相殺される。
・全てのマージンが正の値の場合、最も大きいマージンの値が反映される。
・マージンとネガティブマージンがある場合、最も大きい値と小さい値の差がマージンとなる。
・全てネガティブマージンの場合、絶対値が一番大きいマージンが反映される。
・横方向のマージンは相殺されない。
・フロートのマージンは相殺されない。
・absoluteなど絶対位置で指定されたボックスのマージンは相殺されない。

ボックスモデルでのマージンの位置

マージン（margin）の各位置は画像のようになっています。上はmargin-top、下はmargin-bottom、右はmargin-right、左はmargin-leftとなります。
最初の頃は、paddingとmarginがどっちがどっちかわからなくなります。というより「どっち使えばいいのだろう？？」ってなると思います。なので、ボーダー（枠線）の外側の余白はマージン、内側の余白はパディング（padding）と覚えて下さい。
あとbackgroundで背景を付けた場合、マージンには被らないので、用途によって使い分けて下さいね。ちなみに、ボーダーはパディングとマージンの間に表示されます。なのでボーダーを表示する時は、ボーダーの幅が追加されるので知っておいて下さいね。

マージンの相殺など、色々わけわかんないのが出てきましたが、「マージンはボーダーの外側の余白」とだけ覚えておけば大丈夫です。マージンとパディングの違いさえ覚えちゃえば、あとは慣れますｗあとマージンは相当使う事が多いので、書き方だけは覚えましょうね。相殺のルールとかはいいので、とりあえず書き方だけ覚えておけば後々楽できますよｗ
以上「マージン（margin）ついて」でしたー(^^♪ 最後まで読んで頂きありがとうございます！！

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

マージン（margin）は、正の値以外にも負の値（マイナス）を指定することができます。これがいわゆるネガティブマージンってやつです。ちょっと大げさな名前ですよねｗただ「-」（マイナス）付けるだけなのにw
それでどういう時に使うかっていうと、画面いっぱいにヘッダーやフッターを表示したいなどに使えます。
それ以外にも、色々使いどころがあるので紹介していきますね。まずは、ネガティブマージンの使い方を説明します。

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

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

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

画像を見てもらえばわかるように、ネガティブマージンを付けたulが親要素のdivを突き破って外にでました。ネガティブマージンを付けると、こういうように簡単に親要素の外にだすことができます。
ちなみに画面いっぱいにヘッダーやフッターを表示したい時にも使えます。他にも色々使えてとっても便利ですので、ぜひ使って見て下さいね！
下はネガティブマージンの仕様です。

●ポイント
スタティックな要素のtop/leftにネガティブマージンを指定した際は、その指定した方向にエレメントを引っ張ります。しかし、bottom/rightにネガティブマージンを指定した際は、下/右にエレメントを動かしません。その代わり、それに重なったエレメントを引っ張ります。さらに、エレメントにwidthを指定していなければ、left/rightにネガティブマージンを指定し、両側のエレメントを引っ張ることができます。マージンがpaddinのように振る舞うのはここがポイントです。

floatされている場合のネガティブマージンの仕様です。 ※リキッドレイアウトとは、コンテンツの幅・位置などを可変して表示させるレイアウトの事です。

●ポイント2
ネガティブマージンをfloat（#mydiv1{float:left;}）とは逆方向に「margin-right:-100px;」と指定した際は、divは重なります。この手法は100%の幅を使ったリキッドレイアウトに、固定幅のものを配置するのに役立つテクニックです。 divが二つとも「float:left;」で、逆方向に「margin-right:-20px;」とネガティブマージンを指定した際は、実際の幅より小さく（重なって）表示されます。ネガティブマージンが実際の幅と同じ場合は、それは完全に重なります。これはmargin, padding, borderとwidthが要素の全体の幅になるためです。

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

ネガティブマージンが効いてくれないブラウザもあります。例えばIE6とか。（IE6以降であればすべてのモダンブラウザで完全にサポートされてます）
なので、正しく表示してもらうために「positionプロパティ」を設定しときましょう！例えば「margin:-10px;」とするなら下のように書きます。

ネガティブマージンcss position:relative; /*absoluteでもok*/

margin:-10px; これで基本的には、ネガティブマージンが正しく反映されます。
IE（インターネットエクスプローラー）で正しく表示されてるのに、なぜかfirefoxでは効かない(。´･ω･)? って時があったらまずは「position」を設定してみて下さいね。
あとDreamweaver（ドリームウィーバー）のデザインビューでは、ネガティブマージンが反映されないので、注意して下さい。

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

ネガティブマージンを使った簡単なテクニックの紹介です。
webサイトやブログのヘッダー・フッターを画面の横幅いっぱいに広げたいって思ったことないですか？最初にも言いましたが、これはネガティブマージンを使うと超簡単にできるんです！
仕組みとしては、ネガティブマージンで画面から要素をはみ出させて、 overflowではみ出した部分を非表示にするだけ。めっちゃ簡単にできます。

上をコピペして#exampleの部分に画面いっぱいに広げたい要素を記述するだけでできちゃいます。詳しい仕組みとかは別記事で書きたいと思います。
とりあえず、コピペして#exampleの部分だけ書き換えてもらえば画面いっぱいに要素を広げる事ができるので、是非試してみて下さいねー(^^♪
以上「ネガティブマージンの使い方」でしたー(^^)/