Bootstrap - CSS変数：ビギナーズガイド

こんにちは、未来のウェブ開発者たち！今日は、Bootstrapの素晴らしいCSS変数の世界に飛び込みます。新しいことだとしても心配しないでください；まるで暖かい教室に一緒に座っているかのように、ステップごとにガイドします。このエキサイティングな旅に出発しましょう！

Bootstrap - CSS Variables

CSS変数とは？

Bootstrap固有の変数に飛び込む前に、まずCSS変数とは何かを理解しましょう。CSS変数、別名CSSカスタムプロパティは、スタイルシート全体で再利用される特定の値を保存するために使用されます。好みの色やサイズ、他のCSS値を保持する小さなコンテナと考えайте。

ルート変数

Bootstrapでは、ルート変数は全体の変数システムの基盤です。これらは':root'セレクタ内で定義され、ドキュメントツリーの最上位を表します。

:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
}

これらの変数はBootstrap全体で使用される核心色を定義します。例えば、--bs-blueはBootstrapのプライマリブルー色です。これらの変数を自分のCSSで使用するには以下のようにします：

.my-element {
color: var(--bs-blue);
}

デフォルト変数

Bootstrapは、さまざまなコンポーネントをスタイル化するために使用されるデフォルト変数のセットも提供しています。これらの変数はしばしば先ほど見たルート変数を参照します。

:root {
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-gray-600);
--bs-success: var(--bs-green);
--bs-info: var(--bs-cyan);
--bs-warning: var(--bs-yellow);
--bs-danger: var(--bs-red);
--bs-light: var(--bs-gray-100);
--bs-dark: var(--bs-gray-900);
}

ここで、--bs-primaryは--bs-blueの値を使用しています。これにより、プロジェクト全体で簡単にテーマを変更し、一貫性を保つことができます。

ダークモード変数

Bootstrap 5では、CSS変数を使用したビルトインのダークモードサポートが追加されました。これらの変数は、ダークモードが有効になる際に値を変更します。

[data-bs-theme="dark"] {
--bs-body-color: #adb5bd;
--bs-body-bg: #212529;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255,255,255;
}

data-bs-theme="dark"属性が要素（通常は<html>または<body>）に適用されると、これらの変数はライトモードの対応する変数を上書きし、即座にサイトをダークモードに変換します。クールですね？

コンポーネント変数

Bootstrapのコンポーネントもスタイルを設定するためにCSS変数を使用しており、これにより個々のコンポーネントを他のコンポーネントに影響を与えずにカスタマイズすることが容易になります。

.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
}

これらの変数は、プライマリボタンの外観を完全に制御します。ホバー色を変更したい場合は、--bs-btn-hover-bgを変更するだけです！

プレフィックス

Bootstrapは、他のカスタム変数や他のライブラリからの変数との冲突を避けるために、すべての変数にbs-プレフィックスを使用しています。自分で変数を作成する際には、自分のプレフィックスを使用するのが良い慣習です。

:root {
--my-awesome-color: #ff69b4;
}

例

いくつかの例を用いて知識を実際に应用してみましょう：

プライマリ色の変更：

:root {
--bs-primary: #ff69b4; /* ピンクが新しいブルーです！ */
}

カスタムボタンの作成：

.btn-awesome {
--bs-btn-color: #fff;
--bs-btn-bg: var(--my-awesome-color);
--bs-btn-border-color: var(--my-awesome-color);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #ff1493; /* ホバー時はより深いピンク */
--bs-btn-hover-border-color: #ff1493;
}

ダークモードでのボディバックグラウンドの調整：

[data-bs-theme="dark"] {
--bs-body-bg: #000; /* 純粋な黒いバックグラウンド */
}

フォーカス変数

Bootstrapは、アクセシビリティを確保するためにフォーカス状態の変数も提供しています：

:root {
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}

これらの変数は、インタラクティブな要素周りのフォーカスリングの外観を制御します。

グリッドブレイクポイント

最後に、BootstrapのレスポンシブグリッドシステムもCSS変数で制御されています：

:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
--bs-breakpoint-md: 768px;
--bs-breakpoint-lg: 992px;
--bs-breakpoint-xl: 1200px;
--bs-breakpoint-xxl: 1400px;
}

これらの変数は、レイアウトが異なるスクリーンサイズに対応するために変更される幅を定義します。

概要

ここでカバーした主なCSS変数の種類の簡単な参照表を以下に示します：

変数タイプ	目的	例
ルート変数	コア値の定義	`--bs-blue: #0d6efd;`
デフォルト変数	テーマ色の設定	`--bs-primary: var(--bs-blue);`
ダークモード変数	ダークテーマの制御	`--bs-body-bg: #212529;`
コンポーネント変数	特定コンポーネントのスタイル	`--bs-btn-bg: var(--bs-primary);`
フォーカス変数	フォーカス状態の制御	`--bs-focus-ring-width: 0.25rem;`
グリッドブレイクポイント	レスポンシブブレイクポイントの定義	`--bs-breakpoint-md: 768px;`

そして、ここまででBootstrapのCSS変数の世界に初めて足を踏み入れたあなたです！これをマスターする鍵は練習です。プロジェクトでこれらの変数を弄ってデザインにどのように影響するかを確認してください。楽しくコーディングを続け、楽しんでください！

Credits: Image by storyset