Bootstrapで多ブランド展開！初心者でもわかる複数テーマ切り替えと命名ルール入門

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

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

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

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

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

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

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

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

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

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>

4. ブランドテーマを作るときの命名ルール

4. ブランドテーマを作るときの命名ルール

複数ブランドテーマを作る際は「名前の付け方」がとても重要です。名前がバラバラだと管理が難しくなり、どのブランドが何を指しているのか分かりにくくなります。そこで初心者でも管理しやすい命名ルールを紹介します。

まず、テーマ名はすべてdata-bs-theme="brand-○○"のように統一します。ブランド名を英小文字で簡潔にまとめると分かりやすくなります。また、CSS変数も--brand-bg --brand-text のようにブランドの用途をはっきり示す名前にするのがポイントです。

5. 初心者が意識したい複数テーマ設計のコツ

5. 初心者が意識したい複数テーマ設計のコツ

複数テーマを運用する際は、まず最低限の色セットから始めるのがおすすめです。背景色、文字色、アクセントカラーなど、基本となる色だけを変えると管理がしやすくなります。最初から色をたくさん作ろうとすると複雑になり、初心者には難しく感じられることがあります。

BootstrapのCSS変数は、ブランドテーマごとに色を切り替える仕組みを作りやすく、テーマ追加も簡単です。ブランドが増えたときにも、命名ルールを守れば整理しやすく、プロジェクト全体の見通しが良くなります。