お役立ちCSSテク！ーネガティブマージン｜Blog｜株式会社トライム

はじめまして、道産子系エンジニアのちばと申します。

コーダー歴2年目に入りました(ﾟ∀三ﾟ三∀ﾟ)

コーディングに関することを発信していけたらと思っています。

ネガティブマージンてご存知ですか？

早速ですが、ネガティブマージンって普段使っていますか？

マージンにはマイナスの値を指定することが出来、使い方次第では細かいレイアウトの調整だったり、少ない記述で完結出来ます。

覚えておくと便利なのですが、知る切っ掛けがなかったり、どのように使えばいいかわからないという方もいるかと思いますので、

今回はそんなネガティブマージンでこんなことが出来るよというのを紹介したいと思います。(╭☞•́⍛•̀)╭☞

1.ブロックの横並び

下記のようにブロックの横並びを実装する機会は多いと思います。

コンテンツ間のマージンを取る必要が出てくると思いますが、

両端のマージンはどのように調整していますか？

マージンを消したい箇所にclassを付与したりなどいろいろあるとありますよね。

ただclassを増やすと数が増えるたびに都度クラスをつけなくてならなかったり、cssの追記が必要だったりしますが、

ネガティブマージンを以下のように使えば数が増えても崩れないレイアウトが組めます。

HTML

<div class="wrap">
  <ul>
   <li></li><li></li><li></li><li></li><li></li><li></li>
  </ul>
</div>

CSS

.wrap{
  width: 500px;
  margin: 100px auto;
  background-color: #ccc;
}
.wrap ul{
margin: -20px 0 0 -100px ;
}
.wrap ul li{
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 20px 0 0 100px;
  background-color: #41c00c;
  vertical-align: top;
}

このように使えば動的な処理などにも対応出来ます。

ちょー便利(:3 」∠)

要素の領域を広げる

なんのこっちゃですね( ˘•ω•˘ )

とりあえずこれを見てください。

親要素をはみ出して背景表示しています。

positionは使ってませんよ？(・ε・｀)

下記のような記述で実現してます。

HTML

<div class="wrap">
  <div class="inner">
    <div></div>
  </div>
</div>

CSS

.wrap{
  width: 500px;
  margin: 100px auto;
  background-color: #ccc;
}
.wrap .inner{
  height: 300px;
  background-color: #ccc;
  padding: 20px 0;
}
.wrap .inner div{
  height: 100%;
  background-color: #41c00c;
  margin: 0 -100%;
  padding: 0 100%;
}

ネガティブマージンと同じ分のpaddingを広げて背景を指定しているだけなんです。

コンテンツが入る領域は500pxのままですが、上記の記述で背景部分だけ広げることが出来ます。

正直これはあまり使う場面は無いですが、ネガティブマージンとpaddingはリキッドレイアウトなどでも応用が効くので使い方を覚えておくといいと思います。

※背景領域を広げる際に横スクロールが発生してしまうので、全体を囲っている要素に overflow:hidden; の指定を忘れないようにでしてください

要素を重ねる。

これはpositionと使い分けですがネガティブマージンで要素の重なりが起きるのを応用したものです。

HTML

<div class="wrap">
  <div class="circle"></div>
  <div class="arrow"></div>
</div>

CSS

.wrap .circle{
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background-color: #41c00c;
  border-radius: 50%;
}
.wrap .arrow{
  width: 0;
  height: 0;
  margin: 0 auto;
  border: 20px solid transparent;
  border-top: 30px solid #41c00c;
}

よくある丸と三角形ですね。

ですが、理想としては丸と三角形に隙間を作らず重ねたいです。

CSS

.wrap .arrow{
  margin-top: -4px;
}

上記のように記述をすると。。。

綺麗に重なります。

こちらも使う場面は限られるとは思いますが、要素同士を重ねたい時などに使えたりします。

まとめ

何も考えずに使っていると、予期せぬ重なりなどが出たりと注意する事は多いですが、

覚えておくと応用が効くテクニックですので是非使ってみてください。

それでは良きネガティブライフを！( ∩ˇωˇ∩)