BLOG

CSSテクニック ネガティブマージン

テクニックって程のことでは無いのですが、CMSなどでリピートするレイアウト時やコンテンツ幅からはみ出すようなデザインはネガティブマージンが便利です!

例えば上記のような感じでレイアウトが繰り返す時、floatを左にかけてマージンを一定に取ればうまくリピートできますが、マージンを左右のどちらに取るかでコーディングの楽さが変わってきます。このサイトにこのレイアウトを入れると想定すれば右の余白含めてマージンをとればうまくリピートできますね。

でもワンカラムだった場合等はこれではレイアウトは再現できてもスクロールバーが出ちゃったります。そんな時に便利なのがネガティブマージン(マイナスマージン)です。

図のような感じでコーディングしてもスクロールバーも出ません!これは便利!CMSに便利ですがメイン画像がはみ出しているようなデザインにも使いようによっては使えます。ちなみにネガティブマージンを右側にした場合はスクロールバーが出ます。

こちらのサイトで実際にネガティブマージンを使っています。

    Sponsored Links