わかりそうでわからない「ネガティブマージン」

「4-6 よく使うのになぜか失敗するmarginとpadding」で見てきたように、marginの設定は、要素の外側(上下左右)に余白をつけけたいときに使います。余白をつけたいわけですから設定する数値は「0」以上となります。

でもときおり「-(マイナス)」の数値を設定しているのを見たことがりませんか? よくわからないけど、設定がそうなっているからそのまま使っている。という場合、ざっくり確認しておきましょう。

この記事は「2020年12月24日」に書かれた記事です

例1)要素の上下左右に20pxの余白を付けてみます

上下の余白 20px

たいていmarginには上記のように「正の値」を設定しますが、「負の値である-(マイナス)」の数値を設定することもできます。この負の値「-(マイナス)」の数値を設定することを「ネガティブマージン」といいます。

先ほどの図のmargin-topにのみ、-20pxを設定してみます。

 

上下の余白 20px
あ、枠から上にはみ出た!

margin-top : -20xp; と負の値「-(マイナス)」の数値を設定したので、要素全体が上に20px 移動しました。では、margin-bottom: -20px と設定したらどうなるのでしょうか。

上下の余白 20px

下の要素

下の要素が重なっちゃった

margin-bottom 「-(マイナス)」数値を掘り下げてもわけがわからなくなるので、少し乱暴ですが

  • margin  に正の値を付与すると設定した要素の周りに余白ができ、
  • margin  に負の値(-)を付与すると設定した要素が移動する

と覚えておくと動作としては問題なく使えるかと思います。

ネガティブマージンを使うときって、どんなとき?

実は私はあまりネガティブマージンを使わないのですが、いくつかご紹介します。

アンカーリンクで同一ページ内にリンクする場合

ヘッダーを固定しているホームページも増えてきました。ページの繊維だけであれば問題ないのですが、ページ内リンク(アンカーリンク)を利用した際、アンカーで飛ばしたらヘッダーの陰に隠れちゃう。ということありませんか。CSSのみで改善するにはネガティブマージンを使います。
※javascriptでの設定もありますが、それはまた別の機会に。

リンクをクリックしてみてください。

このホームページはヘッダーが固定ではないため、アンカーリンクで遷移した際に、上部に60px の余白ができていることを確認できると思います。

どうなってるの?

アンカーでリンクさせるIDに対して、疑似要素を設定しています。

たとえば上記の例で説明すると

  • ヘッダーの高さ分ずらしたい
  • ヘッダーの高さが60pxの固定

この場合、アンカーリンクのIDを付与するdiv 要素に対して、疑似要素を設定します。

#ID {}

#ID::before {
content : "";
padding-top: 60px;
margin-top: -60px;
}
#IDには設定したid名が入ります。上記はヘッダーが60pxの場合です。

一見、何の問題もなく見えるのですが、margin-topにネガティブマージンがかかっているため、要素自体は60pxほど上に移動しています。もし、アンカーを設定している領域の上部、60px領域内にリンクなどの設定があった場合、リンクが効かないなど不具合が起こります。

その場合の解決策は2つ。
  • CSSではなくJavascriptを使用する方法に切り替える。
  • 重複している領域のリンクを、z-indexなどで下の要素よりも、レイヤーを上位に設定する

floatでのネガティブマージン

左のメニュー幅を固定にして、メインの幅を可変にすることしたい場合などに利用できます。

たとえば、
side:左メニュー固定幅100pxとして、
main:コンテンツ部分を可変させます。

左メニュー
メインコンテンツ
HTML

<div class="contents">
<div class="side">
左メニュー
</div>
<div class="main">
メインコンテンツ
</div>
</div>

CSS

.contents {}

.contents::after {
content: "";
display:block;
clear:both;
background-color :#F2F2F2;
}

.side {
position: relative;
float:left;
width: 100px;
background-color :#FF0;
}

.main {
box-sizing: border-box; 
float:right;
margin-left: -100px;
padding-left: 100px;
width: 100%;
background-color :#FFF;
}

contents::after には疑似要素を設定して、side/mainより下の要素が回り込まないようfloatを解除しています。

なんで、marginに-100px を設定して、padding に100pxを設定するの?
  • mainの要素に、marginもpaddingも指定しない場合、幅は100%とみなされます。つまり、float:right を設定しているものの、右側には回り込みません。
  • margin-leftにネガティブマージンを-100px設定することで、コンテンツの要素が左に100pxずれて回り込めるようになります。
  • ただし、この状態だとコンテンツがside部分に重なってしまっている状態です。そこでpadding-leftに、sideの幅のpadding(100px)を設定して、mainコンテンツが見えるようにしています。
Flexboxを使った固定と可変の幅設定については「Flexboxを覚える(近日公開予定)」で掲載予定です。

クリックの拡大

「4-7 aタグの範囲を広げる方法「3つ」あればなんとかなる(明日公開予定)」でご紹介します。

松江ブログ(M2エムツー)

HOME > ホームページ制作 > CSSでホームページを1UP > わかりそうでわからない「ネガティブマージン」

ページトップへ