ネガティブマージンとは | | まーくんのアフィリエイト学校

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

ネガティブマージンとは

公開日 最終更新日

ネガティブマージン

ネガティブマージンとは、marginプロパティ(表示画面範囲)に、マイナスの数値を指定することです。

 

え、ネガティブってそういう意味くまね…
まーくん、マージンが消極的な思考してると思ったんです?

 

そもそもマージンとは?

marginとは

表示サイズにおける一番外側のスペースのこと。これをマージン(margin)と呼びます。

そのマージンをマイナス値(ネガティブ)にした場合、こんな風なイメージ。

マージンをマイナス値にする

マージンが画面外(-値)に振り切れます。

 

ネガティブマージンでできることは?

ネガティブマージンは「画面(枠)いっぱいにデザインしたい」というときに役立ちます。

 

例えば下の図のようにタイトルに下線を付けたとき…

ネガティブマージンでできること

通常のマージンだと隙間が空いてしまいます。

が、ここでマージンの値をマイナス値にするとこうなります。

ネガティブマージンでできること2

こんな感じに、「画面(枠)いっぱいに○○したい」というときに、ネガティブマージンは役立ちます。

 

他にも画面全体だけでなく、ボックスにもネガティブマージンは効きます。

ネガティブマージンデザイン例

上の図のように、ボックスの中に入った写真を、ボックスいっぱいに表示することも可能。

ネガティブマージンをうまく使いこなせば、デザインの幅が広がります。

 

「ネガティブマージン」のおさらい

簡単に今回のまとめをしておくです~。
ネガティブマージンのまとめ

・ネガティブマージンはマージンの値をマイナス値にすること

・枠いっぱいに何かを表示させるときに役立つ

 

関連用語

CSS

コーディング

マテリアルデザイン

 

アフィリエイト用語辞典 一覧に戻る