BootstrapユーティリティAPIで独自クラスを作る方法！初心者でもわかる色と余白の追加カスタマイズ

ユーティリティAPIで独自クラスを生成する方法（colors・spacers追加）

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

生徒

「Bootstrapのクラスって便利ですが、自分だけの色や余白を追加したいときってどうすればいいですか？」

先生

「そのときに役立つのがユーティリティAPIです。ユーティリティAPIを使うと、独自のクラスを自動生成して、色や余白を簡単に追加できますよ。」

生徒

「自動でクラスが作れるなんて便利ですね！具体的にはどうやって設定するんですか？」

先生

「Sassの設定を少し書くだけで、自分のオリジナルユーティリティクラスを追加できます。実際に例を見てみましょう。」

1. ユーティリティAPIとは何か

BootstrapのユーティリティAPIは、色や余白などの小さなスタイルを「ユーティリティクラス」として自動的に作ってくれる仕組みです。例えば .text-primary のようなクラスは、実はこの仕組みで生成されています。

自分でユーティリティAPIを設定すれば、Bootstrapの標準にない新しい色や余白スケールを追加して、プロジェクト専用の便利なクラスを簡単に作ることができます。

2. 色を追加する方法

まずは色を追加してみましょう。たとえば「ブランドカラー」を独自に設定して、.text-brand や .bg-brand といったクラスを生成することができます。


$utilities: (
  "brand": (
    property: color,
    class: text,
    values: (
      brand: #ff6600
    )
  )
);

この設定を行うと、HTMLで class="text-brand" を指定するだけでオレンジ色のテキストが使えるようになります。同じように背景色も .bg-brand で使えます。

3. 余白（spacers）を追加する方法

余白ユーティリティも追加できます。Bootstrapには .m-1 や .p-2 のような余白クラスがありますが、自分のサイトに合った余白サイズを追加したい場合に便利です。


$utilities: map-merge(
  $utilities,
  (
    "spacer": (
      property: margin,
      class: m,
      values: (
        6: 5rem,
        7: 7rem
      )
    )
  )
);

この設定を入れると .m-6 や .m-7 といった新しいクラスが使えるようになり、大きな余白を確保できます。例えば大きなバナーやセクションを目立たせたいときに役立ちます。

4. 実際にHTMLで使ってみる

ここまで設定した内容を使うと、次のようなHTMLが書けます。


<div class="text-brand m-6">
  ブランドカラーの文字と大きな余白を適用しました！
</div>

このようにユーティリティAPIを活用することで、Bootstrapの標準クラスをさらに拡張し、オリジナルのデザインルールを簡単に適用できます。

5. 注意点

ユーティリティAPIで追加したクラスは、必ずSassをコンパイルして反映させる必要があります。CDNで読み込んだだけのBootstrapでは機能しないため、カスタムCSSを生成する環境を整えてから使いましょう。

また、クラスが増えすぎると逆に管理が難しくなるため、本当に必要な色や余白だけを追加するのがおすすめです。

6. 独自ユーティリティを使うメリット

ユーティリティAPIを使うと、HTML内で余計なCSSを書かなくても、クラスを指定するだけで統一感のあるデザインを適用できます。特にチーム開発や大規模サイトでは、コードのルールを統一する効果もあります。

色や余白といった基本的なデザイン要素を共通化することで、メンテナンス性も向上し、サイト全体のデザインをシンプルに保つことができます。