わかりそうでわからない「ネガティブマージン」
「4-6 よく使うのになぜか失敗するmarginとpadding」で見てきたように、marginの設定は、要素の外側(上下左右)に余白をつけけたいときに使います。余白をつけたいわけですから設定する数値は「0」以上となります。
でもときおり「-(マイナス)」の数値を設定しているのを見たことがりませんか? よくわからないけど、設定がそうなっているからそのまま使っている。という場合、ざっくり確認しておきましょう。
「4-6 よく使うのになぜか失敗するmarginとpadding」で見てきたように、marginの設定は、要素の外側(上下左右)に余白をつけけたいときに使います。余白をつけたいわけですから設定する数値は「0」以上となります。
でもときおり「-(マイナス)」の数値を設定しているのを見たことがりませんか? よくわからないけど、設定がそうなっているからそのまま使っている。という場合、ざっくり確認しておきましょう。
この記事は「2020年12月24日」に書かれた記事です
例1)要素の上下左右に20pxの余白を付けてみます
たいていmarginには上記のように「正の値」を設定しますが、「負の値である-(マイナス)」の数値を設定することもできます。この負の値「-(マイナス)」の数値を設定することを「ネガティブマージン」といいます。
先ほどの図のmargin-topにのみ、-20pxを設定してみます。
margin-top : -20xp; と負の値「-(マイナス)」の数値を設定したので、要素全体が上に20px 移動しました。では、margin-bottom: -20px と設定したらどうなるのでしょうか。
下の要素
margin-bottom 「-(マイナス)」数値を掘り下げてもわけがわからなくなるので、少し乱暴ですが
と覚えておくと動作としては問題なく使えるかと思います。
実は私はあまりネガティブマージンを使わないのですが、いくつかご紹介します。
ヘッダーを固定しているホームページも増えてきました。ページの繊維だけであれば問題ないのですが、ページ内リンク(アンカーリンク)を利用した際、アンカーで飛ばしたらヘッダーの陰に隠れちゃう。ということありませんか。CSSのみで改善するにはネガティブマージンを使います。
※javascriptでの設定もありますが、それはまた別の機会に。
このホームページはヘッダーが固定ではないため、アンカーリンクで遷移した際に、上部に60px の余白ができていることを確認できると思います。
アンカーでリンクさせるIDに対して、疑似要素を設定しています。
たとえば上記の例で説明すると
この場合、アンカーリンクのIDを付与するdiv 要素に対して、疑似要素を設定します。
#ID {}
#ID::before {
content : "";
padding-top: 60px;
margin-top: -60px;
}
#IDには設定したid名が入ります。上記はヘッダーが60pxの場合です。
一見、何の問題もなく見えるのですが、margin-topにネガティブマージンがかかっているため、要素自体は60pxほど上に移動しています。もし、アンカーを設定している領域の上部、60px領域内にリンクなどの設定があった場合、リンクが効かないなど不具合が起こります。
左のメニュー幅を固定にして、メインの幅を可変にすることしたい場合などに利用できます。
たとえば、
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を解除しています。
「4-7 aタグの範囲を広げる方法「3つ」あればなんとかなる(明日公開予定)」でご紹介します。
HOME > ホームページ制作 > CSSでホームページを1UP > わかりそうでわからない「ネガティブマージン」