BootstrapのユーティリティAPIでテーマ色を作る方法を徹底解説！初心者でもわかるダークモード入門

ユーティリティAPIでテーマ用ユーティリティ（色/背景）を生成

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

生徒

「Bootstrapでテーマカラーを作れると聞いたのですが、難しそうで不安です…。色や背景を自分で増やすことってできますか？」

先生

「Bootstrapには“ユーティリティAPI”という仕組みがあり、特別なプログラミングをしなくてもテーマ用の色や背景を増やせますよ。」

生徒

「パソコン初心者でもできるんでしょうか？ダークモードにも対応できますか？」

先生

「もちろんできます。HTMLだけで設定できるので、まずは簡単な例から一緒に進めてみましょう。」

1. BootstrapのユーティリティAPIとは？初心者向けに仕組みを徹底解説

Bootstrapの「ユーティリティAPI」とは、一言で言うと「自分専用の便利なデザインルール（クラス）を自由に追加・生成できる魔法のツール」のことです。通常、Bootstrapには背景色を変えるbg-primaryや、文字を太くするfw-boldといった便利なクラスが用意されています。しかし、「もっと自分好みの色や余白を使いたい」という場面も出てきます。そんな時に、CSSを何百行も書くことなく、設定を少し書き加えるだけで新しいクラスを自動生成してくれるのがこのAPIの凄さです。

プログラミング未経験の方でも、「料理のカスタマイズ」をイメージすれば簡単です。基本のレシピ（標準のBootstrap）に、自分だけの隠し味（ユーティリティAPIでの設定）を足すだけで、新しいメニュー（独自クラス）が出来上がる仕組みです。Sassなどの高度な知識がなくても、最近ではCSS変数（カスタムプロパティ）を組み合わせることで、HTMLとシンプルなスタイル指定だけで驚くほど柔軟にテーマカラーを拡張できるようになりました。まずは、基本となる「クラスを呼び出して色を変える」感覚を以下のサンプルで掴んでみましょう。


<style>
    /* ユーティリティAPIの考え方を応用した、独自カラーの定義例 */
    :root {
        --bs-custom-pink: #ff69b4; /* 自分だけのピンク色を定義 */
    }

    /* APIが自動生成するようなイメージでクラスを作成 */
    .text-custom-pink {
        color: var(--bs-custom-pink) !important;
    }

    .border-custom-pink {
        border: 5px solid var(--bs-custom-pink) !important;
    }
</style>

<div class="p-4 border-custom-pink rounded">
    <h3 class="text-custom-pink">独自ユーティリティの効果</h3>
    <p>このテキストは、ユーティリティAPIの仕組みを利用して追加した「ピンク色のクラス」で装飾されています。このように、標準機能にないデザインを簡単に追加できるのが最大のメリットです。</p>
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-fluid rounded">
</div>

ブラウザ表示

このように、ユーティリティAPIを理解すると「Bootstrapに用意された色しか使えない」という制限から解放されます。サイトのブランドカラーに合わせて、bg-brandやtext-accentといった自分専用のクラスを無限に作り出せるため、SEOに強い「独自性のある洗練されたデザイン」が誰でも最小限の手間で実現可能になります。

2. テーマ作成に必要な考え方を初心者向けに解説

テーマ作成とは、サイト全体の雰囲気（色や背景、明るさなど）を整えることです。Bootstrapでは、テーマカラーを定義するだけで、ボタン、背景、文字色などに一貫したデザインを適用できます。

とくにBootstrap 5.3から追加されたdata-bs-themeを使うと、ライトモードとダークモードの切り替えもとても簡単です。これはスマホの「ライトモード・ダークモード切り替え」と同じ仕組みだと考えると理解しやすいでしょう。

3. data-bs-themeでライトモードとダークモードを切り替える仕組み

Bootstrapでは、HTMLタグにdata-bs-theme="dark"と書くだけでページ全体がダークモードになります。これはCSSのテーマ切替が自動で行われる仕組みで、色の指定などを細かく書かなくてもよいのが魅力です。

次は実際にライトモードとダークモードを切り替える簡単なHTMLコードを見てみましょう。


<style>
:root {
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #212529;
    --bs-body-color: #f8f9fa;
}

body, div {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}
</style>

<div data-bs-theme="dark" class="p-4">
    <h1>ダークモードの見出し</h1>
    <p>この部分はダークモードで表示されます。</p>
</div>

ブラウザ表示

4. ユーティリティAPIでテーマ色を追加する仕組みを知ろう

ユーティリティAPIを使うと、特別なプログラムを書かなくても「自分専用の色」をクラスとして増やすことができます。たとえば、bg-myblueやtext-sunのようなオリジナル名のクラスを作れば、一度設定したテーマカラーをページ内で何度でも使えます。

これはまるで、色鉛筆のセットに「自分だけの色」を追加するようなイメージです。一度好きな色を登録しておけば、塗りたい場所にいつでもその色を使えます。

5. CDNでユーティリティAPIを使ってテーマ色を追加する方法

Bootstrapでは、CDN環境でもユーティリティAPIを簡単に使えます。ユーティリティAPIはCSS変数を使って動くため、HTMLの中で:rootに色変数を書くだけでOKです。

下のサンプルでは、オリジナルの「myblue」というテーマ色を作り、背景色と文字色のユーティリティとして使えるようにしています。


<style>
    :root {
        --bs-myblue: #4a90e2;
        --bs-sun: #ffcc33;
    }

    .bg-myblue {
        background-color: var(--bs-myblue) !important;
    }

    .text-sun {
        color: var(--bs-sun) !important;
    }
</style>

<div class="p-3 bg-myblue text-white">
    オリジナルテーマ色の背景です
</div>
<p class="text-sun">オリジナルの文字色です</p>

ブラウザ表示

6. オリジナルテーマをダークモードにも対応させる方法

ダークモード用のテーマを作るには、data-bs-theme="dark"のときに使われる色変数を書くだけでOKです。これは、ライトモードとダークモードで別々の色鉛筆を用意するイメージです。


<style>
    :root {
        --bs-myblue: #4a90e2;
    }

    [data-bs-theme="dark"] {
        --bs-myblue: #1e64a8;
    }

    .bg-myblue {
        background-color: var(--bs-myblue) !important;
    }
</style>

<div data-bs-theme="light" class="p-3 bg-myblue text-white mb-2">
    ライトモードの背景色
</div>
<div data-bs-theme="dark" class="p-3 bg-myblue text-white">
    ダークモードの背景色
</div>

ブラウザ表示