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

生徒

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

先生

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

生徒

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

先生

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

1. BootstrapのユーティリティAPIとは何かを理解しよう

BootstrapのユーティリティAPIは、色や背景などの「便利なクラス（ユーティリティクラス）」を自分で作り足す仕組みです。たとえば、背景色を変えるbg-primaryなどが代表的なユーティリティクラスです。これらを自分で増やすことで、オリジナルのテーマカラーを使うデザインが簡単に作れます。

プログラミング経験がなくても大丈夫です。この仕組みは「設定を書くだけ」で動きます。難しい計算やコードを書く必要はありません。まるで料理のレシピに材料を足すだけで新しい味が作れるのと同じ感覚です。

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>

ブラウザ表示