局所的に便利な「ネガティブマージン」
Creative Member H.N WEBチーム
こんにちは、WebチームのNです。
今回は場所を選べばネガティブマージンは便利だよって話です。
ネガティブマージンはmarginプロパティの値を負の数にする手法のことです。
ネガティブマージンを使うと、ページ内リンクでジャンプした際に固定ヘッダーが被らないようにしたり、要素を重ねるレイアウトにしたり、といったことができます。
ただ、今はscroll-marginというスクロール位置を調整用の専用プロパティがありますし、
要素を重ねたいならpositionプロパティやtranslateプロパティを使った方がいいと思うので、わざわざネガティブマージンを使う意味を見い出せませんでした。
ですが、テキスト周りの微調整という目的なら使い道があると気づいたので、その事例を紹介します。
画面幅が小さくなった時、テキストを折り返させない
通常スマホ表示は要素が画端にくっつかないように、両端にpaddingを設定します。
当然テキストもその影響を受けて折り返されますが、見出しによっては折り返してほしくないこともあります。
そういう特定の見出しの左右にネガティブマージンを指定すると、paddingを相殺して折り返し画面幅を防ぐことができます。
.title {
margin-inline: -5px;
}
単に折り返してほしくないならtext-wrap: noneといういかにもな名前のプロパティがあるのですが、
ネガティブマージンは折り返しを防ぎつつも、画面を飛び出すくらいなら折り返して欲しい、という指定が可能です。
ピンポイントな用途ですが、デザインツールとブラウザでは微妙にテキスト幅の扱いが異なるので、こういうケースは割とあります。
テキストの間に画像を挟む
ブラウザとデザインツールでテキスト幅の扱いが異なると言いましたが、要素を並べる時もその影響を受けます。
テキストの中に画像を挟んだ見出しを作りたいとき、テキスト両端に幅があると画像とスペースができますし、なんなら画像も余白があるケースもあります。
こういう時画像の左右にネガティブマージンを指定すると、テキストと画像の空白を埋められるので、丁度いい間隔にすることができます。
ネガティブマージンはかゆいところに手が届くプロパティ
ページ全体のレイアウトに関わる要素にネガティブマージンを指定すると意図せぬ表示崩れが起きやすいですが、
特定の見出しを調整する等で結構便利です。
LPではそういうケースが多いので、ピンポイント調整には積極的に使っていきたいと思います。