【HTML+CSS】意外と知らない？要素を移動させたい時にめちゃくちゃ役立つネガティブマージン

意外と知らない？要素を移動させたい時にめちゃくちゃ役立つネガティブマージン

私はデザインを全くしない（むしろできない）web制作者なのでデザインのことは詳しくはよくわかりませんが、とにかくデザイナーはやたらとレイヤーで重ねたがる。

それがデザインというものなのだろうけども、コーダーを一番悩ますのはそういうレイヤーの部分をどう実装しようかというところ。

例えば下記のような楕円が被っている感じのよくありそうなデザイン。

imgで実装しようか、背景で実装しようか、そもそも全部imgとして画像にするべきなのか、楕円だけ書き出して調整した方がいいのか、それとも楕円ってCSSで作れるのか？とかあまり経験がないコーダーはいろんな考えが頭をよぎり、どう実装するかの構成を煮詰めるわけです。

私もまだまだ新米コーダーなのでいろいろ考えた結果、今回は背景（緑色）と楕円（白色）を書き出して背景ではなくimgで実装しました。

その際にpositionだったりtransform:translateなどを駆使してうまくレイヤーを実装していくんですが、ここで役立つのがネガティブマージン。

これまでの私の使えてた武器はpositionとtransformだけでしたが、これには限界があります。

transform:translateY（-100px）;

translateはクラスを当てた要素だけ動かせるとても便利なプロパティですが、余白ができてしまう問題が発生していました。

それを解決してくれたのが、ネガティブマージン。

例えば、上記の画像で会社概要のセクションごと全て上に100px移動させたいというときは

section {
 margin-top: -100px;
}

と記述するだけで余白を作ることなく、会社概要のセクション全体が100px上に移動させることが可能になります。

これをtransformで全て上へ移動させてたら、下の方には変な余白ができて詰みます。

これは一部の使い方ですが、枠をはみ出したい時に使い勝手がいいみたい？です。

transform: translate();の使い方はこちらの記事を参考にしてみてください。