Negative

ネガティブマージンを付与するユーティリティ CSS。

Table of Contents

Basic

  • .is-margin-{way}-minus-{size} で各方向にマイナスの margin を付与します
  • .is-margin-minus-{size} は全方向(※.is-n-{size} に短縮可能)
  • .is-margin-top-minus-{size} は上方向(※.is-nt-{size} に短縮可能)
  • .is-margin-right-minus-{size} は右方向(※.is-nr-{size} に短縮可能)
  • .is-margin-bottom-minus-{size} は下方向(※.is-nb-{size} に短縮可能)
  • .is-margin-left-minus-{size} は左方向(※.is-nl-{size} に短縮可能)
  • .is-margin-vertical-minus-{size} は上下方向(※.is-ny-{size} に短縮可能)
  • .is-margin-horizontal-minus-{size} は上下方向(※.is-nx-{size} に短縮可能)
  • {size} は最大 xxl から最小 xxs まで
サイズ全方向上方向右方向下方向左方向上下方向左右方向
-28px.is-margin-minus-xxl or .is-n-xxl.is-margin-top-minus-xxl or .is-nt-xxl.is-margin-right-minus-xxl or .is-nr-xxl.is-margin-bottom-minus-xxl or .is-nb-xxl.is-margin-left-minus-xxl or .is-nl-xxl.is-margin-vertical-minus-xxl or .is-ny-xxl.is-margin-horizontal-minus-xxl or .is-nx-xxl
-24px.is-margin-minus-xl or .is-n-xl.is-margin-top-minus-xl or .is-nt-xl.is-margin-right-minus-xl or .is-nr-xl.is-margin-bottom-minus-xl or .is-nb-xl.is-margin-left-minus-xl or .is-nl-xl.is-margin-vertical-minus-xl or .is-ny-xl.is-margin-horizontal-minus-xl or .is-nx-xl
-20px.is-margin-minus-lg or .is-n-lg.is-margin-top-minus-lg or .is-nt-lg.is-margin-right-minus-lg or .is-nr-lg.is-margin-bottom-minus-lg or .is-nb-lg.is-margin-left-minus-lg or .is-nl-lg.is-margin-vertical-minus-lg or .is-ny-lg.is-margin-horizontal-minus-lg or .is-nx-lg
-16px.is-margin-minus-md or .is-n-md.is-margin-top-minus-md or .is-nt-md.is-margin-right-minus-md or .is-nr-md.is-margin-bottom-minus-md or .is-nb-md.is-margin-left-minus-md or .is-nl-md.is-margin-vertical-minus-md or .is-ny-md.is-margin-horizontal-minus-md or .is-nx-md
-12px.is-margin-minus-sm or .is-n-sm.is-margin-top-minus-sm or .is-nt-sm.is-margin-right-minus-sm or .is-nr-sm.is-margin-bottom-minus-sm or .is-nb-sm.is-margin-left-minus-sm or .is-nl-sm.is-margin-vertical-minus-sm or .is-ny-sm.is-margin-horizontal-minus-sm or .is-nx-sm
-8px.is-margin-minus-xs or .is-n-xs.is-margin-top-minus-xs or .is-nt-xs.is-margin-right-minus-xs or .is-nr-xs.is-margin-bottom-minus-xs or .is-nb-xs.is-margin-left-minus-xs or .is-nl-xs.is-margin-vertical-minus-xs or .is-ny-xs.is-margin-horizontal-minus-xs or .is-nx-xs
-4px.is-margin-minus-xxs or .is-n-xxs.is-margin-top-minus-xxs or .is-nt-xxs.is-margin-right-minus-xxs or .is-nr-xxs.is-margin-bottom-minus-xxs or .is-nb-xxs.is-margin-left-minus-xxs or .is-nl-xxs.is-margin-vertical-minus-xxs or .is-ny-xxs.is-margin-horizontal-minus-xxs or .is-nx-xxs
ネガティブマージンテスト
ネガティブマージンテスト
ネガティブマージンテスト
<div>ネガティブマージンテスト</div>
<div class="box is-nt-md">ネガティブマージンテスト</div>
<div>ネガティブマージンテスト</div>

Compatible

推奨のクラス名と同様の効果を互換のあるクラス名で得ることもできます。

推奨のクラス名互換のあるクラス名
.is-margin-minus-md or .is-n-md.is-margin-minus
.is-margin-top-minus-md or .is-nt-md.is-margin-top-minus
.is-margin-right-minus-md or .is-nr-md.is-margin-right-minus
.is-margin-bottom-minus-md or .is-nb-md.is-margin-bottom-minus
.is-margin-left-minus-md or .is-nl-md.is-margin-left-minus
.is-margin-vertical-minus-md or .is-ny-md.is-margin-vertical-minus
.is-margin-horizontal-minus-md or .is-nx-md.is-margin-horizontal-minus

Variables

上書きできる変数は以下の通りです。

/* None */

Import

PostCSS で読み込む場合の各パスは以下となります。

@import "musubii/src/utilities/negative/main.css";