Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Color (カラー)

Bootstrap はどんなプロジェクトでもカスタマイズ可能な、拡張性のあるカラーシステムによって成り立っています。

目次

テーマカラー

Bootstrap ではいくつかの色を選出して小さなカラーパレットを作成し、カラースキームを生成しています。これらは scss/_variables.scss にある Sass 変数や Sass マップとして利用可能です。

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

利用可能な全ての色は Sass マップ $theme-colors から利用可能です。

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

これらの色のカスタマイズについては、Sass マップとループについてのドキュメント をご覧ください。

全ての色

Bootstrap の全ての色は scss/_variables.scss の Sass 変数や Sass マップ として利用できます。ファイルサイズの増大を防ぐために、これらの色にはそれぞれテキスト色や背景色としてのクラスを設けていません。代わりに選出した色をテーマパレットとして用意しています。

色をカスタマイズする際には、コントラスト比に注目してください。以下に示すように、それぞれのメインカラーに3つのコントラスト比を用意しています。それぞれ、スウォッチの現在の色に対して、白色に対して、そして黒色に対してです。

$blue #007bff
$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 #e83e8c
$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 #28a745
$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 #17a2b8
$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

Sass における注意

Sass はプログラム的手法で変数を生成することができません。そのため Bootstrap では全てのティントおよびシェードに対して色の変数を用意しています。これらはまず中央の値を設定し (例: $blue-500) 、カスタムカラー関数内で Sass の mix() 関数を用いて明るくしたり暗くしたりすることで生成しています。

mix()lighten()darken() とは異なります。前者は色を白や黒と混ぜていますが、後者は色の明度を変更しているだけです。結果として、CodePen のデモのように、より完成度の高い色の組み合わせを実現しています。

tint-color()shade-color() 関数は、生成する色の段階ごとに用意された $theme-color-interval 変数と mix() しています。ソースコードは scss/_functions.scssscss/_variables.scss ファイルを参照してください。

色の Sass マップ

Bootstrap のソース Sass ファイルには、色のリストとその hex 値を簡単にループできる3つのマップがあります。

scss/_variables.scss 内には、Bootstrap の色変数と Sass マップがあります。以下が $colors Sass マップの例です:

$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 マップを利用しているわけではありません。今後のアップデートでは改良が行われる予定です。それまでは、この Sass マップに ${color} 変数を追加することを検討してください。

サンプル

以下が Sass でこれらを使う例です:

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

カラーユーティリティクラスを用いることでも、500 カラー値を使った colorbackground-color の設定を行うことができます。