先生と生徒の会話形式で理解しよう

生徒

「Bootstrapで余白を調整するクラスをよく見るんですが、もっと自分のサイトに合った余白サイズに変えられますか？」

先生

「はい、できますよ。Bootstrapでは$spacersという変数でspacingスケール（余白の基準値）が管理されているので、そこを編集すれば自由にカスタマイズできます。」

生徒

「spacingスケールって何ですか？難しそうに聞こえます…。」

先生

「簡単に言うと、余白を数値でまとめた“物差し”のようなものです。Bootstrapではm-1やp-3のように番号で余白を指定しますが、その番号と実際のサイズの対応表を$spacersで管理しています。」

1. spacingスケール（$spacers）とは？

Bootstrapでは、余白（マージンやパディング）を指定するユーティリティクラスが用意されています。例えば、m-3は「マージンを基準値の3倍」、p-2は「パディングを基準値の2倍」という意味です。この基準値を決めているのが$spacersです。

初心者の方は「1=小さい余白、5=大きい余白」といった感覚で覚えておけば大丈夫です。そしてこの数字に対応する実際のピクセル数を調整できるのが、$spacersの編集です。

2. $spacersの初期設定

Bootstrap 5の標準では、$spacersは次のように定義されています。mapという形式で「キー」と「値」のセットで管理されています。


$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

ここで$spacerは基本の余白サイズで、デフォルトでは1rem（約16px）です。つまり、m-3は16pxの余白、m-5は48pxの余白になります。

標準の余白サイズは便利ですが、プロジェクトによっては「もっと小さい余白がほしい」「大きい余白は使わないから削りたい」といったニーズがあります。その場合に$spacersを編集すると、必要なサイズだけに整理できます。

例えば、スマートフォン向けのデザインでは小さい余白が多用されることが多いので、細かいスケールを追加するのが便利です。逆に、余白のバリエーションを減らしてデザインを統一したいときは、数を減らしてシンプルにすることもできます。

例えば、もっと細かい余白サイズを使いたいときは次のように編集します。ここでは0.125rem（2px相当）と0.75rem（12px相当）を追加しています。


$spacers: map-merge(
  $spacers,
  (
    6: $spacer * .125,
    7: $spacer * .75
  )
);

これでm-6やp-7といったクラスが使えるようになります。デザインの自由度がぐっと上がります。

map-mergeで追加するのではなく、最初から自分のスケールに置き換えたい場合は、次のように書き直すこともできます。


$spacers: (
  0: 0,
  1: 2px,
  2: 4px,
  3: 8px,
  4: 16px,
  5: 32px
);

このようにすれば、「m-1は2px」「m-5は32px」といった独自ルールで統一できます。余白のバリエーションをシンプルにしたいときに役立ちます。

$spacersを調整することで、デザインの一貫性を保ちながら、余白設定をよりプロジェクトに合わせられるようになります。特に大規模なサイトでは、余白サイズが統一されることで見た目の安定感が生まれ、ユーザーにとって読みやすくわかりやすいデザインになります。

また、コードの可読性も高まります。「このサイトではm-3が必ず8px」といった共通ルールを作れるので、チーム開発でも混乱が少なくなります。