ネガティブマージンの使いどころ

はじめに

こんにちわ、フロントエンジニアの川上です。今回は自分も初めて見た時に使い方に戸惑ったCSSのネガティブマージンについて記事を書かせていただきます。

ネガティブマージンとは、CSSのmarginにマイナス値を設定することを指します。大抵は正の数をしてしますが、負の数を設定するとどうなるのでしょうか。

margin: -25px

特にCSSでは、この書き方でなければ問題が解決できないということは、ほとんどありません。CSSをコーディングする人によって書き方は無数に存在しますし、どの書き方でも見た目は一緒になります。しかし、CSSのプロパティの数やエレメントの数が少ないほど、見やすく理解しやいすいコードになり、それは良いコーディングのひとつであると考えます。
　ネガティブマージンも良いコーディングのための書き方と捉えていただけると良いと思います。

ネガティブマージンの使いどころ

ネガティブマージンの使いどころとして、このようなサイトのコーディングをしたいと思います。

サイトは３ページ構成となっており、１ページと、２ページ３ページ目ではレイアウトが違うことが見て取れます。１ページ目のコンテンツのサイドには余白がありませんが、それ以降のページには余白が存在しています。

共通部分とそれ以外でページを分解してみましょう。

ボディ、ヘッダー、フッターは、ページ全体で共通で、コンテンツ部分がページによって、２パターン存在するパーツで出来ています。

また、それぞれのパーツは以下のような余白を持っています。

ボディは上下左右に25pxの余白。ヘッダー、フッターは上下に15px、左右に25pxの余白を持っています。コンテンツも余白は持っているのですが、ページ毎に変わるので省略します。

このままそれぞれを組み合わせると以下のようになります

ヘッダー、フッターの左右と上下の位置は、ページにぴったり配置したいのですが、親の余白があるために子の配置がうまくいきません。そこで、親の余白を打ち消すため、ヘッダー、フッターにネガティブマージンを設定します。

CSSはこのようになります。

.main {
  padding: 25px;
}
.header {
  margin: -25px -25px 0;
  padding: 15px 25px;
}
.footer {
  margin: 0 -25px -25px;
  padding: 15px 25px;
}

親の.mainの25pxの余白を、ヘッダー、フッターのmarginで-25pxを設定して打ち消しています。
ちなみに親のpaddingを子のpaddingで打ち消すように使うことはできません。

同じ要領でワイドコンテンツをコーディングします。ワイドコンテンツもそのまま配置すると親の余白の内側に配置されてしまいます。そこで、この余白を打ち消すためにネガティブマージンを使います。コーディングすると以下のようになります。

.main {
  padding: 25px;
}
.header {
  margin: -25px -25px 0;
  padding: 15px 25px;
}
.article {
}
.article.wide {
  margin: 0 -25px;
}
.footer {
  margin: 0 -25px -25px;
  padding: 15px 25px;
}

これで親の余白があることでコーディングしづらかった子の配置がうまく出来ました。

終わりに

冒頭でも記載しましたが、HTMLやCSSで何かを作るのに方法は一つだけではありません。今回のサイトを作る場合であっても、ネガティブマージンを使わなくても作ることは可能です。重要なのは、良いコーディングを心がけることで、少ないエレメントとCSSで構成させることです。
　今回のネガティブマージンを使うことで、CSSをシンプルにすることと、わかりやすい構造にすることができるのと、既に親の余白が確保されている場合に、他のエレメントに影響を与えることなく期待通りに配置することができます。
　使いどころがわかりづらいネガティブマージンですが、この記事で少しでも使いどころがイメージできたら幸いです。