メインコンテンツへスキップ

カラーシステム（Color）

Bootstrapは、スタイルとコンポーネントにテーマを設定する広範なカラーシステムをサポート。これによりプロジェクトのより包括的なカスタマイズと拡張ができる。

目次

テーマカラー（Theme colors）v5.0.0-alpha3設定変更

すべての色のサブセットを使用して、配色を生成するための小さなカラーパレットを作成。これは、Sass変数とBootstrapの scss/_variables.scss ファイルのSassマップとしても使用できる。

見本
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
デフォルトの設定
scss/_variables.scss 内 theme-colors-map の設定$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);
【デフォルトでの設定】
  • Primary（$primary）＝$blue
  • Secondary（$secondary）＝$gray-600
  • Success（$success）＝$green
  • Info（$info）＝$cyan
  • Warning（$warning）＝$yellow
  • Danger（$danger）＝$red
  • Light（$light）＝$gray-100
  • Dark（$dark）＝$gray-900
【変更履歴】
  • 【v5.0.0-alpha3】
    • Dark（$dark）：$gray-800 ⇒ $gray-900

 

全てのカラー（All colors）v5.0.0-alpha2設定変更

全てのBootstrapのカラーは、Sass変数（$colors）とSassマップとしてscss/_variables.scss ファイルで使用できる。ファイルサイズの増加を回避するため、これらの変数のそれぞれのクラスは作成していない。代わりに、テーマパレットでこれらのカラーのサブセットを選択する。

色をカスタマイズするときは、必ずコントラスト比を監視すること。以下に示すように、メインの各色に3つのコントラスト比を追加（1番目は文字色（#fff または #000）に対して、2番めは白（#fff）に対して、3番目は黒（#000）に対するコントラスト比）。

見本 $xxx は変数名、$xxx-500 は $xxx と同色
$blue #0d6efd
$blue-100
$blue-200
$blue-300
$blue-400
$blue-500
$blue-600
$blue-700
$blue-800
$blue-900
$indigo #6610f2
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$purple #6f42c1
$purple-100
$purple-200
$purple-300
$purple-400
$purple-500
$purple-600
$purple-700
$purple-800
$purple-900
$pink #d63384
$pink-100
$pink-200
$pink-300
$pink-400
$pink-500
$pink-600
$pink-700
$pink-800
$pink-900
$red #dc3545
$red-100
$red-200
$red-300
$red-400
$red-500
$red-600
$red-700
$red-800
$red-900
$orange #fd7e14
$orange-100
$orange-200
$orange-300
$orange-400
$orange-500
$orange-600
$orange-700
$orange-800
$orange-900
$yellow #ffc107
$yellow-100
$yellow-200
$yellow-300
$yellow-400
$yellow-500
$yellow-600
$yellow-700
$yellow-800
$yellow-900
$green #198754
$green-100
$green-200
$green-300
$green-400
$green-500
$green-600
$green-700
$green-800
$green-900
$teal #20c997
$teal-100
$teal-200
$teal-300
$teal-400
$teal-500
$teal-600
$teal-700
$teal-800
$teal-900
$cyan #0dcaf0
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$gray-500 #adb5bd
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
$black #000
$white #fff
【変更履歴】
  • 【v5.0.0-alpha1】
    • $blue: #007bff ⇒ #0d6efd（コントラスト比を4.5以上にするために変更）
    • $pink: #e83e8c ⇒ #d63384（コントラスト比を4.5以上にするために変更）
    • 各色の陰影に応じたSassマップと変数を提供
  • 【v5.0.0-alpha2】
    • $green: #28a745 ⇒ #198754（コントラスト比を4.5以上にするために変更）
    • $cyan: #17a2b8 ⇒ #0dcaf0（より鮮明にするために変更）

Sassに関する注意（Notes on Sass）

Sassはプログラムで変数を生成できないため、すべての色合いと陰影用に手動で変数を作成する必要がある。Bootstrapでは、中間値（例：$blue-500）を指定し、カスタムカラー関数を使用して、Sassの mix() カラー関数を経由て色を色合い（明るさ）や陰影（暗さ）をつけている。

mix() の使用方法は lighten() や darken() と同じではない。前者は指定された色を白や黒とブレンドするが、後者は各色の明度値のみを調整する。このCodePenのデモに示すように、結果はより完全な色の組み合わせができる。

tint-color() 関数と shade-color() 関数では、$theme-color-interval 変数と一緒に mix() を使用して、生成する各混合色の段階的なパーセント値を指定。完全なソースコードは、scss/_functions.scss と scss/_variables.scss ファイルにある。

 

カラーSassマップ（Color Sass maps）

BootstrapのソースSassファイルには3つのマップが組み込まれており、カラーとその16進値のリストを迅速に簡単にループする。

  • $colors は、使用可能なすべてのベース(500)カラーをリスト（以下に表示）
  • $theme-colors は、意味的に名前が付けられたすべてのテーマカラーをリスト（テーマカラーに表示済）
  • $grays は、すべてのグレーの色合いと陰影をリスト

scss/_variables.scss 内に、Bootstrapのカラー変数とSassマップがある。以下に、$colors Sassマップの例を示す：

デフォルトの設定
scss/_variables.scss 内 colors-map の設定$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

マップ内の値を追加、削除、変更をして、他の多くのコンポーネントでの使用方法を更新する。残念ながら、現時点では、すべてのコンポーネントがこのSassマップを使用していない。今後のアップデートでこれを改善する予定。それまでは、${color} 変数とこのSassマップを使用する。

実例（Example）

Sassでこれらを使用する方法は以下のとおり：

設定例
Sass.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

カラーユーティリティクラスと背景色ユーティリティクラスも 500 カラー値を使用して、color と background-color の設定に利用できる。

 

ユーティリティの生成（Generating utilities）v5.1.0追加

Bootstrapには、すべての色変数の color と background-color ユーティリティが組み込まれているわけではないが、v5.1.0で追加されたユーティリティAPIと拡張Sassマップを使用すれば、これらを自分で生成できる。

  1. まず、関数、変数、mixin、ユーティリティをインポートしたことを確認。
  2. map-merge-multiple() 関数を使用して、複数のSassマップを新しいマップにすばやくマージ。
  3. この新しい結合マップをマージして、{color}-{level} クラス名でユーティリティを拡張する。

上記の手順を使用してテキストカラーユーティリティ（例：.text-purple-500）を生成する例を以下に示す。

設定例
custom.scss@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

これにより、すべての色とレベルに対して新しい .text-{color}-{level} ユーティリティが生成される。他のユーティリティやプロパティについても同じことができる。