CSSにはmarginやpaddingといった、各要素の間隔を調整するプロパティがあります。
今回は、要素の距離感を指定できるmarginに、負の値を指定するネガティブマージンについてと、その具体的な使用方法について解説していきたいと思います。
この記事は、動画バージョンでも解説しておりますので、動画で学習されたい方は以下のリンクより閲覧下さい。
ネガティブマージンとは？
marginの値を指定する際、基本的には正の値、すなわち0以上の数値で指定していく事になります。※正の値と言いましたが、0も含みますので、その点イメージとしてご理解ください。
しかし、実は負の方向に値を指定する事も可能です。そして、負の方向に値を設定するmarginの事をネガティブマージンと呼んだりします。
ネガティブマージンの4つの具体的な使い方
それでは、実際にどのようにしてネガティブマージンを使用していくか解説していきたいと思います。
以下、ブロック要素とインライン要素の話が出て参りますので、理解されていない方は以下の記事よりご確認ください。
-
インライン要素とブロック要素の覚えておくべきタグと概念！【ホームページ制作入門講座】
続きを見る
1. [img]タグへのネガティブマージン
[img]タグへのネガティブマージンへのかけ方は、直感的にかかるので簡単です。
<div style="background: red;">ダミーテキスト</div>
<img style="margin-top:-50px;" src="https://designerbrg.com/blog/wp-content/uploads/2019/09/thumb_none.jpg">
<div style="background: cyan;">ダミーテキスト</div>
実装例
img画像が上方向に50px食い込んで表示されています。
2. [div]などのブロック要素へのネガティブマージン
場合にもよるのですが、複雑な構成になっていなければ、ブロック要素へのネガティブマージンも簡単にかかります。
<div style="background: red;">ダミーテキスト</div>
<img src="https://designerbrg.com/blog/wp-content/uploads/2019/09/thumb_none.jpg">
<div style="background: cyan;margin-top: -50px;">ダミーテキスト</div>
実装例
シアンのブロックが上方向に50px食い込んで表示されています。
3. [span]などのインライン要素へのネガティブマージン
[span]などのインライン要素へのネガティブマージンは、普通にしていてもかからない事が多いです。
[img]ってインライン要素だよね…と思われた方は、きちんとCSSの事を理解されていますね。確かに[img]＝インライン要素で問題ないのですが、ネガティブマージンに関しては別物とお考えください。
そして、全てのインライン要素で挙動が悪いかどうかのチェックはしておりませんので、その点ご了承ください。
<div style="background: cyan;">ダミーテキスト</div>
<span style="background: yellow;margin-top: -10px;">スパン</span>
実装例
スパン
上のように、[span]にネガティブマージンをかけても反応しません。
そういった場合は、floatプロパティをかけて要素を「漂わせる」という事を意識しましょう。そうする事で、オブジェクトを動かしやすくなる事が多いです。
<div style="background: cyan;">ダミーテキスト</div>
<span style="background: yellow;margin-top: -10px;float: left;">スパン</span>
実装例
スパン
-
[CSS]floatプロパティの具体的な4つの使用方法、解除のやり方と注意点
続きを見る
また、positionプロパティを利用する事でも解決できます。
<div style="position: relative;">
<div style="background: cyan;">ダミーテキスト</div>
<span style="background: yellow;position: absolute;top:-20px;">スパン</span>
</div>
実装例
スパン
positionプロパティの詳しい事は、以下の記事に書いておりますので、気になる方はチェックしてみてください。
-
positionプロパティを使いこなそう！「relative」「absolute」「fixed」の違いと注意点[CSS]
続きを見る
4. 複雑な要素の中にあるブロック要素
単純なブロック要素の積み重ねの場合、ネガティブマージンは簡単にかかりますが、複雑に内包された中にあるブロック要素は簡単に動いてくれません。
<div>
<div style="display: inline-block;background: red;">ブロック1</div>
<div style="display: inline-block;background: cyan;">ブロック2</div>
<div style="display: inline-block;background: yellow;margin-top: -30px;">ブロック3</div>
</div>
実装例
上記のように、単純にネガティブマージンを設定しても動いてくれません。
そんな時は、こちらも同様にfloatプロパティをかけて要素を「漂わせる」という事を意識しましょう。
<div class="clearfix">
<div style="display: inline-block;background: red;">ブロック1</div>
<div style="display: inline-block;background: cyan;">ブロック2</div>
<div style="display: inline-block;background: yellow;margin-top: -30px;float: right;">ブロック3</div>
</div>
実装例
ポイント
今回はfloatプロパティを使用しているので、親要素にfloat解除の[clearfix]をつける事を忘れないでおきましょう。floatプロパティの詳しい説明や、解除方法などついては以下の記事よりご確認ください。
-
[CSS]floatプロパティの具体的な4つの使用方法、解除のやり方と注意点
続きを見る
一言
上記実装例を見ればわかりますが、floatプロパティを利用する事でネガティブマージンはきちんと効いていますが、右端に振られる事になります。[margin-right]などを追加で当てる事により調整は可能なのですが、レスポンシブ仕様などの事を考えると、ドンピシャの位置に合わせるのは難しいように思いますので、他の方法（例えばpositionプロパティなど）を採用する方が良いかとは思います。
-
positionプロパティを使いこなそう！「relative」「absolute」「fixed」の違いと注意点[CSS]
続きを見る
最後に
いかがでしたでしょうか？
CSSのmarginに負の値を指定するネガティブマージンの概要と使用方法を解説して参りました。
要素・オブジェクトをずらす事により、デザイン性をグッと上げる事ができますので、きちんと使いこなせるようにしていきたいですね。
