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

生徒

「Bootstrap5で自分のオリジナルテーマを作りたいんですが、どうやって始めればいいんでしょうか？」

先生

「テーマを作るにはまず設計思想を理解して、配色のルールを決め、それを運用する流れを覚えることが大切です。」

生徒

「設計思想って難しそうですが、初心者でもできますか？」

先生

「もちろんできますよ。色や雰囲気をどう表現したいかを考えるところから始めましょう。具体例を交えて解説しますね。」

1. Bootstrap5でテーマを作るときの設計思想とは？

Bootstrap5では、もともとデフォルトのスタイルが用意されています。しかし、自分のサイトに合わせたテーマ（見た目の統一感）を作ることで、プロっぽく仕上げることができます。設計思想とは「なぜその色や形を選ぶのか」という考え方です。

例えば、落ち着いた雰囲気を出したいなら青やグレーを中心にした配色、元気で明るい印象を出したいならオレンジや黄色を多めにするといった方針を決めます。これはお店の制服やロゴの色を決めるのと同じ感覚です。

2. 配色戦略を立ててテーマカラーを決める

テーマを作る上で最も大切なのが配色戦略です。Bootstrap5ではCSSのカスタムプロパティ（変数）を使って、色を簡単に管理できます。

以下の例では、オレンジをメインカラー（primary）、赤を危険表示（danger）、緑を成功（success）の色に指定しています。


<style>
    /* .btn-primary 用 */
    .btn-primary {
        --bs-btn-bg: #ff6600;
        --bs-btn-border-color: #ff6600;
        --bs-btn-hover-bg: #e65c00;
        --bs-btn-hover-border-color: #e65c00;
        --bs-btn-active-bg: #cc5200;
        --bs-btn-active-border-color: #cc5200;
    }

    /* .btn-danger 用 */
    .btn-danger {
        --bs-btn-bg: #cc0000;
        --bs-btn-border-color: #cc0000;
    }

    /* .btn-success 用 */
    .btn-success {
        --bs-btn-bg: #33cc66;
        --bs-btn-border-color: #33cc66;
    }
</style>

<button class="btn btn-primary">メインボタン</button>
<button class="btn btn-danger">警告ボタン</button>
<button class="btn btn-success">成功ボタン</button>

ブラウザ表示

このように変数を指定するだけで、Bootstrap全体に一貫した配色を適用できます。初心者でも「色の指示書」を作る感覚で設定できるのが特徴です。

3. 運用の基本：色を変えるだけでなく一貫性を意識する

テーマを作ったあとは運用の基本を意識しましょう。テーマは色を変えるだけではなく、「どんなシーンでどの色を使うか」を決めることが大事です。

メインカラー（primary）はボタンやリンクに使う
サブカラーは背景やアクセントに使う
警告や注意はdanger（赤）で統一する

これを徹底することで、サイト全体がバラバラにならず、ユーザーにとって見やすく理解しやすいデザインになります。

4. ダークモードにも対応できる設計

Bootstrap5ではダークモードを意識したテーマ作りも重要です。ダークモードとは背景を黒っぽく、文字を白っぽくする配色スタイルのことです。長時間画面を見るユーザーに優しいデザインとして人気があります。

以下のように、ダークテーマ用の変数を切り替えることで、同じHTMLでも雰囲気を変えられます。


<style>
    :root {
        --bs-body-bg: #ffffff;
        --bs-body-color: #000000;
    }
    [data-theme="dark"] {
        --bs-body-bg: #121212;
        --bs-body-color: #ffffff;
    }
</style>

<body class="p-3" id="page" data-theme="light">
    <div class="p-3" style="background-color: var(--bs-body-bg); color: var(--bs-body-color);">
        ダークモード対応のコンテンツ
    </div>

    <button class="btn btn-primary mt-3" onclick="toggleTheme()">テーマ切り替え</button>

    <script>
        function toggleTheme() {
            const page = document.getElementById("page");
            page.setAttribute("data-theme", page.getAttribute("data-theme") === "dark" ? "light" : "dark");
        }
    </script>
</body>

ブラウザ表示

こうしておけば、ユーザーの好みに合わせてライトテーマとダークテーマを切り替えることが可能になります。