今回はネガティブマージンの便利な使い方について紹介します。
※ネガティブマージンとは、CSSで、マイナス値が与えられたmarginプロパティのことを言います。
例1)3カラムのボックスを均等に並べる
HTML
カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1
カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2
カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3
CSS
[css]
#container {
width: 620px;
border: solid 1px #000;/*装飾用*/
overflow: hidden;
}
#container-inner {
margin: 0 -10px 0 0;
/zoom: 1;/* for IE6,7 */
}
#container-inner div {
width: 200px;
margin: 0 10px 0 0;
float: left;
background: #FFCC66;/*装飾用*/
}
[/css]
小さいボックスに右マージン10pxを指定し、ボックスごとの隙間を確保します。
そして、#container-innerにて、右マージン-10pxを指定し相殺します。
例2)横並びリストを均等に並べる
例1と同じ原理を使えば、リストタグで組んだブロック要素も均等に並べることができます。
HTML
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
- リスト6
CSS
[css]
#list-container {
width: 620px;
margin: 50px 0 0 0;
border: solid 1px #000;
overflow: hidden;
}
#list-container ul {
margin: -10px -10px 0 0;
padding: 0;
/zoom: 1;/* for IE6,7 */
}
#list-container ul li {
width: 200px;
margin: 10px 10px 0 0;
padding: 30px 0;
float: left;
list-style: none;
background: #FFCCCC;/*装飾用*/
text-align: center;
}
[/css]
このように、余計なclassを振らずにレイアウトできるようになると、htmlソースがクリーンに保てるだけでなく、ボックス数が増減した際にもう一度classを振る必要がなくなるので便利です。