スペース

要素間の調整に使うユティリティクラス。UIコンポーネントのいくつかは予め間隔が設定されていますが、すべてではないので以下のルールを用いて実装します。

  • スペース調整は以下のルールを組み合わせることで実装できます。
  • (m|p)(t|b|l|r)-(1|2|3|4|5|6)
  • m: margin を示すクラス表記
  • p: padding を示すクラス表記
  • t: margin-top padding-top を示すクラス表記
  • b: margin-bottom padding-bottom を示すクラス表記
  • l: margin-left padding-left を示すクラス表記
  • r: margin-right padding-right を示すクラス表記
  • 1から6の数値を割り当てることによって間隔の広さが変わります。

基本形

間隔はディフォルトのテキストサイズ（Movable Type の場合は 14px）をベースにして計算しています。ディフォルトのテキストサイズと同じ間隔を空けたい場合は 4 を用います。以下の例は .mb（margin-bottom）の間隔差異。

  • 0 = 0% スタイルを上書きしてゼロにしたい場合に使います
  • 1 = 12.5%
  • 2 = 25%
  • 3 = 5%
  • 4 = 100%（ディフォルトのテキストサイズと同じ）
  • 5 = 150%
  • 6 = 200%
.mb-1


.mb-2


.mb-3


.mb-4


.mb-5


.mb-6


利用ケース

インライン

UI コンポーネントを横に並べた場合、間隔がないことで引っ付いた状態になる場合があります。そうした場合、コンポーネントに .mr-3 を追加して調整します。

.mr-3
.mr-3
.mr-3

インライン(小)

バッジのような小さなコンポーネントを横に並べる場合は.mr-2 を追加して調整します。

.mr-2
.mr-2
.mr-2

スタック

同じ UI コンポーネントを縦に並べた場合、間隔がないことで引っ付いた状態になる場合があります。そうした場合、コンポーネントに .mb-1 を追加して調整します。

.mb-1

分割

要素間に明確な間隔を空けて、異なる種類の情報が並んでいることを示したい場合は .mb-6 を追加して調整します。

.mb-6