ホームページ制作MATSUTE BLOG

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

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

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

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

あ、枠から上にはみ出た！

margin-top : -20xp; と負の値「－（マイナス）」の数値を設定したので、要素全体が上に20px 移動しました。では、margin-bottom: -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コンテンツが見えるようにしています。

クリックの拡大

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