Bootstrapのspacingスケールを最適化！$spacers編集で余白ユーティリティを自由にカスタマイズ

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

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

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

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

2. $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の余白になります。

3. なぜ$spacersを編集するのか？

3. なぜ$spacersを編集するのか？

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

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

4. $spacersをカスタマイズする例

4. $spacersをカスタマイズする例

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

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

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

5. $spacersを完全に再定義する

5. $spacersを完全に再定義する

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

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

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

6. spacingスケール編集のメリット

6. spacingスケール編集のメリット

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

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

まとめ

まとめ

この記事では、Bootstrapのspacingスケールを管理している$spacersを編集・最適化することで、余白ユーティリティクラスを自由にカスタマイズする方法を解説しました。Bootstrapはm-1やp-3といった分かりやすいクラス指定で余白を調整できる便利なCSSフレームワークですが、その裏側では$spacersというSass変数によって、実際のサイズが一元管理されています。この仕組みを理解することが、デザインを一段階レベルアップさせる大きなポイントになります。

spacingスケールとは、余白サイズを数字で統一管理するための「共通ルール」です。例えばm-3やp-3といったクラスが、サイト内のどこでも同じ余白になるのは、$spacersによって基準が決められているからです。初心者のうちはクラスを使うだけで十分ですが、プロジェクトが大きくなるにつれて「この余白は少し広すぎる」「もっと細かい余白がほしい」と感じる場面が必ず出てきます。そこで役立つのが、$spacersの編集です。

標準設定のままでもBootstrapは使いやすいですが、すべてのサイトに最適とは限りません。スマートフォン中心のUIでは細かい余白が求められますし、読み物系のコンテンツでは広めの余白が必要になることもあります。$spacersをカスタマイズすれば、こうした要件に合わせて余白スケールを整理でき、デザイン全体に一貫性が生まれます。

特に重要なのは、map形式で定義されている$spacersを、map-mergeで拡張できる点です。これにより、既存のスケールを残したまま、新しい余白サイズを安全に追加できます。いきなり全部を書き換える必要はなく、「もう少し小さい余白だけ足したい」「中間サイズを追加したい」といった微調整が可能になります。これは実務でも非常によく使われる考え方です。

また、完全に再定義する方法も紹介しましたが、これは余白ルールをシンプルにしたい場合に有効です。例えば「このサイトでは余白は2px刻みで統一する」といった方針がある場合、$spacersを最初から定義し直すことで、迷いのない設計ができます。余白の選択肢を減らすことで、デザインのブレを防ぎ、チーム開発でも判断がしやすくなります。

spacingスケールを調整する最大のメリットは、見た目の美しさだけではありません。コードの可読性が向上し、「m-3を使えばこのくらいの余白」という共通認識が生まれます。これは保守性や拡張性にも直結し、長期運用するWebサイトやWebアプリケーションにとって大きな価値になります。初心者の段階からこの考え方に触れておくことで、将来の開発が格段に楽になります。

カスタマイズしたspacingスケールの使用例

最後に、カスタマイズした$spacersを使った余白ユーティリティのイメージ例を確認してみましょう。余白サイズが自分のルール通りに反映されているかを、ブラウザで確認することが大切です。

<style>
.sample-box {
    background-color: #f8f9fa;
    border: 1px solid #ccc;
}
</style>

<div class="sample-box m-3 p-4">
    カスタマイズしたspacingスケールを使ったボックス
</div>

このように、余白ユーティリティはそのまま使いながら、裏側のスケールだけを調整できます。Bootstrapの利便性を保ったまま、自分のプロジェクトに最適化できる点が、$spacers編集の大きな魅力です。