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

生徒

「Bootstrapでテーマを切り替える仕組みがあると聞きました。会社ごとにデザインを変えたい時にも使えるんですか？」

先生

「はい、使えますよ。Bootstrapでは複数のブランドテーマを切り替える仕組みを簡単に作れます。HTMLとCSSだけで実現できるので初心者でも安心です。」

生徒

「ブランドテーマってどう作るんですか？色を変えるだけでもテーマっぽくなるんでしょうか？」

先生

「色を変えるのが一番簡単な方法です。CSS変数を使えばブランドごとの色を切り替えられますよ。では、初心者でも分かるように仕組みを説明していきましょう。」

1. 複数ブランドテーマを作る考え方とは？

Bootstrapでブランドテーマを作るときは、まず「ブランドごとの色やスタイルをまとめて管理する」という考え方が大切です。ブランドAは青を基調、ブランドBは赤を基調、ブランドCは緑を基調というように、色のまとまりをブランド単位で定義しておくと切り替えがとても簡単になります。

ブランドテーマを切り替える仕組みは、スマホのライトモードとダークモードの切り替えと似ています。Bootstrapではdata-bs-themeを指定するだけで、テーマ全体の見た目を変えられます。これを利用して「brand-a」「brand-b」のように複数テーマを作れば、多ブランド展開がスムーズになります。

2. 初心者でも簡単にできるテーマ切り替えの仕組み

BootstrapはCSS変数を使ったテーマ切り替えが得意です。CDN環境だけでも、ブランドテーマ専用のCSS変数を定義すればテーマを切り替えられます。CSS変数は“色の名前入りの箱”のようなものです。中に色を入れておけば、その名前を使うだけでどこでも同じ色を適用できます。

data-bs-theme="brand-a" と data-bs-theme="brand-b" を切り替えるだけで、ブランドA用の色・ブランドB用の色に一瞬で変わります。JavaScriptがなくてもHTMLだけでテーマを変更できるため初心者にも扱いやすい仕組みです。

3. CDNだけで複数ブランドを切り替えるデモ

ここでは、ブランドA・ブランドBの2種類のテーマをCDN環境で切り替える例を紹介します。それぞれのテーマはCSS変数で用意し、背景色や文字色などをブランドごとに調整しています。


<style>
:root {
    --brand-bg: #ffffff;
    --brand-text: #212529;
}

/* ブランドA：青系 */
[data-bs-theme="brand-a"] {
    --brand-bg: #e3f2fd;
    --brand-text: #0d47a1;
}

/* ブランドB：赤系 */
[data-bs-theme="brand-b"] {
    --brand-bg: #ffebee;
    --brand-text: #b71c1c;
}

.brand-box {
    background-color: var(--brand-bg);
    color: var(--brand-text);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 10px;
}
</style>

<div data-bs-theme="brand-a" class="brand-box">
    <h2>ブランドAのテーマ</h2>
    <p>青系の落ち着いたテーマで構成されています。</p>
</div>

<div data-bs-theme="brand-b" class="brand-box">
    <h2>ブランドBのテーマ</h2>
    <p>情熱的な赤系テーマで構成されています。</p>
</div>

ブラウザ表示