ネガティブマージンの使い方。
実際にどういうケースで使うかの紹介と注意点

デザインと言うと、つい画像でどう作るかという事に目を向けがちですが、実は意外とcssをうまく活用することでデザインの幅を広げる事も可能です。

そんなcssでデザインの質を上げるために必要になるのが「ネガティブマージン」になります。個人的にも実務でよく使っていますし、なんなら使わない方が珍しいくらいかもしれません。

ケースバイケースではありますが、出来上がったサイトをcssだけでさらに見た目を見やすくする事もネガティブマージンをうまく使えれば可能なこともありますし、過去何度も自分もそういった案件をこなしてきました。

今回はそんなネガティブマージンについておさらいを含め見ていきたいと思います。

そもそもネガティブマージンをおさらい

ネガティブマージンを記載していますが、簡単にどういうことかをおさらいしておくと、marginの値を、マイナスの値を設定するという事を意味します。

あがってきたデザインによってはネガティブマージンを使わないと再現が難しいという事もありますし、ネガティブマージンが使えないコーダーとペアのデザイナーだと、どうしても単調なデザインになりがちというくらいに意外と重要だったりします。

上下左右、どこにでもマイナス値を設定できる

marginに設定する値のため、上下左右のどこにでもマイナス値を設定することが出来ます。とはいえ、実際に設定するときは、ほとんど上下のどちらか、左右のどちらかの組み合わせで使う事になります。

マイナスを設定するので、当然ながら通常と逆の動きをします。

.negative-margin{
  margin: -100px 0px 0px -100px;
}

重ねる使い方、はみ出す使い方で使われます

ネガティブマージンの意味は分かったけどどういうシチュエーションで使うのか？というと、要素同士の重なりなどでよく使われます。また、重なりだけでなくはみ出す使い方としても使われます。

何を隠そう、この裏方ワークスでも、このネガティブマージンは多用しています。

• ブログ記事のPC向けデザインのh2、h3、h4の見出し
• ブログの記事一覧の所属カテゴリの
• ページ上部のtopicsの枠
• 裏方ワークスとは？の5つの特徴の数字の枠

こういったところは、マイナス値を設定して重なりやあえてはみ出す設定にして作っています。

下記に実際にネガティブマージンを使ったサンプルも用意してみました。
画像をそれぞれ重ねて表示する事もできますし、3並びのボックスなどを右肩上がりや右肩下がりの見せ方にもできます。

裏方ワークスのブログででも使っているように左右にネガティブマージンを与えて、枠からはみ出させたりして少しワンポイントなデザインなどにも使えますし、どうやって作ってるのかな？というのは以外とネガティブマージンを上手く組み合わせてるというシーンも多かったりします。

実際このネガティブマージンは実際の制作現場でも多用されるかと思いますので、自分なりの使い方をマスターしておくと良いかもしれませんね。

デモページ

ネガティブマージンを使う時の注意点

ネガティブマージンについて理解し、さぁいざ使ってみたけれど、なんだかうまくいかないという事はよくあります。そこで簡単な注意点などまとめておきます。

上下のマイナスはブロック要素にしか効かない

基本的にブロック要素にしか効きません。
そのため、インライン要素にネガティブマージンを設定しても思った通りに動いてはくれません。

margin-left、margin-rightの左右のネガティブマージンはインライン要素でも効いてくれるのですが、margin-top、margin-bottomの上下はそのままでは効かないという仕様を持ちます。

ただしimgには上下のネガティブマージンも効く

ただ例外的にimgタグはインライン要素でもあるのですが、このimgタグにだけは上下左右のネガティブマージンが効きます。

とはいえ、inline要素であっても、display: block;を指定してあげれば使える事になります。margin-topにネガティブマージンを与えたのに効かない！というケースでは実はインライン要素に付けてたということもあり得るので注意しましょう。

重なりあった際の前後に注意

通常の重なり具合であればそこまで気にする必要もないかもしれませんが、リンク要素をネガティブマージンを使って重なって表示する際、場合によっては重なったせいでリンクの要素が下側に行くことで、リンクがクリックできないといった事になってしまう場合もあります。

そういう場合は、z-indexなどをうまく活用して各要素の重なりでどちらが前面なのかなどを考えた上で設定していきましょう。

昔はネガティブマージンを使わない・使ってはダメだった？

たまに他のブログなどを見ていると、ネガティブマージンの注意点などとして、そもそもコーディングする前提として、なるべくネガティブマージンは使わないようにしましょう。といった事が書かれているブログに遭遇することもあります。

これは（そのブログを執筆した本人ではないので推測ですが）おそらくは、昔の記事のまま日付が更新されているものだったり、そういった事を考慮した時に書かれたものではないかなと思います。

ワンポイントアクセントとして使うなら全然あり（と個人的には思う）

確かに昔、それこそ5年以上前とかの2010年代前半の頃などであれば、あまり推奨されなかったかもしれません。というのも、当時と今では圧倒的にブラウザ環境が変わってしまっているからです。

今はスマホが当たり前の時代となり、ブラウザもそれに伴ってモダンブラウザ、レガシーブラウザという言葉が既に死語になっているくらいにもなってきました。

今ではChromeが主流になっていますが、昔であればInternet Explorer、通称IEと呼ばれるコーダーから忌み嫌われるブラウザがあり、そのバージョンによって挙動が変わるなど特殊なブラウザで、それ専用の対応なども必要になったりとコーダーからは絶対悪のようなブラウザがありました。

今ではIEはMicrosoftのEdgeへと変わりChromeと同じ挙動になってはいますが、当時のIEだとネガティブマージンの挙動は意図しない動きをするといった事もありました。そのため、IEがまだまだ主流の1つのブラウザだったその当時であれば、自分もなるべく使わないことを推奨していたかと思います。

しかしながら今や令和の時代で、ブラウザもとても賢くそこまでブラウザ毎で差異があるものでもなくなり、ネガティブマージンを使って意図しない動きをするといった事もほとんどなくなりました。

Analyticsなどで解析データを見ても、スマホが圧倒的主流になった今、ChromeやEdge、Safari、Firefoxあたりのブラウザでほとんどが占められていますから、昔のようにネガティブマージンを使わないでおこうといった考えは無くなってきているのではないかと個人的には思っています。

もちろん、なんだかうまくコーディングできない…マイナス値を与えたらなんかうまくいったしこれでいいや！なんて使い方は推奨しませんが、デザインの要素を反映するためにあえて、理解した上で使うといった使い方であればなんら問題ないと考えています！

まとめ

ネガティブマージンは実務でも自分自身は使っています。
もちろん使わずに構築できるのであれば、あえてわざわざ使う必要はないかもしれません。

しかしながらデザインによっては使った方が効率良かったりする場も多々あります。使う使わないは人それぞれ考え方があるとは思うのでそのあたりは各個人やクライアントとの判断などになるかとは思いますが、自分自身の過去の制作物を見ても、ネガティブマージンはそれなりに使っています。

ワンポイントアクセントなどにも使えますし、知っている・知らないではデザイナーから挙がってきたデザインを忠実に再現できるかにも関わってくる事になりますから、しっかりとネガティブマージンを知っておくというのと、使いこなせるというのは必要かなと思います。

もちろんそれだけでなく、しっかりとネガティブマージンを活用して様々なレイアウトデザインを組めるようにしておくと、幅も広がって尚良いのでは無いかなと思います。