CSSにはmarginやpaddingといった余白を調整するプロパティがありますが、今回はmarginにマイナスの値を設定するネガティブマージン(マイナスマージン)について解説していきます。
ネガティブマージンとは
通常marginには0以上の値を指定して余白を設定しますが、負の値つまりマイナスを指定することも可能です。このマイナスを指定した利用方法はネガティブマージン(マイナスマージン)と呼ばれています。
通常要素同士を重ねる場合「position: relative;とposition: absolute;」を使いますが、場合によってはネガティブマージンを利用したほうが便利なケースがありますので、ケースバイケースでネガティブマージンを活用していきましょう。
要素の重ね方ずらし方
それでは、実際にネガティブマージンを使った具体例を解説していきます。また、最後の例ではpositionを使った例も挙げています。
img要素にp要素を重ねる
1つ目は画像に文字を重ねる例を見ていきましょう。画像に文字を埋め込むことなく文字を重ねて表示させることが出来るので、SEO対策にもなります。
こちらの例のポイントとしては、ネガティブマージンと共にプラスのマージンも指定しているところです。ネガティブマージンだけを指定すると、親要素を画像がはみ出して表示が崩れてしまう場合があります。そういった場合、プラスのマージンも組み合わせて表示の崩れを調整しています。
.container p {
margin-top: -70px; /* top方向に70px移動 */
margin-bottom: 20px; /* bottom方向に20px分余白を入れて調整 */
}div要素同士を重ねる
次は兄弟要素同士を重ねる例を見ていきましょう。margin-topとmargin-leftにそれぞれネガティブマージンを指定しています。
span要素をずらす
続いての例はspan要素をネガティブマージンでずらす例です。span要素はインライン要素なので、そのままではネガティブマージンが効きません。このような場合インライン要素をfloatで浮かせることで解決します。
floatを使っているのでその解除も忘れずに行います。この例ではclearfixと呼ばれているテクニックでfloatの解除を行っています。
img要素を親要素からはみ出す
最後にネガティブマージンではありませんが、子要素である画像を親要素からはみ出して表示させる具体例を挙げておきます。
おわりに
いかがでしたでしょうか。ネガティブマージン使った場合とpositionを使った場合の具体例を見ていきましたが、それぞれの方法を使い分けてリッチなページを作っていきましょう。
