Bootstrapのカラーコードを一覧化し、その調べ方と使い分けについてまとめてみました。
対象とバージョン
- Bootstrap v.4.0
カラーコード一覧
1. 文字の色（text-×××）, 背景色（bg-×××）
| クラス（文字の色） | クラス（背景色） | カラーコード |
|---|---|---|
| text-primary | bg-primary | #007bff |
| text-secondary | bg-secondary | #6c757d |
| text-success | bg-success | #28a745 |
| text-danger | bg-danger | #dc3545 |
| text-warning | bg-warning | #ffc107 |
| text-info | bg-info | #17a2b8 |
| text-light | bg-light | #f8f9fa |
| text-dark | bg-dark | #343a40 |
| text-muted | - | #6c757d |
| text-white | bg-white | #fff |
記述例
<p class = "text-white bg-primary">テスト</p>
補足事項
実際のBootstrapでは、
- 各要素には!importantが適用されているため、優先度が最も高くなる
- hover, focusが有効になる場合（リンクやボタン押下時）、別の色が適用される
点、ご注意ください。
2. アラート（alert-×××）
| クラス | カラーコード（文字の色） | カラーコード（背景色） | カラーコード（ボーダー） |
|---|---|---|---|
| alert-primary | #004085 | #cce5ff | #b8daff |
| alert-secondary | #383d41 | #e2e3e5 | #d6d8db |
| alert-success | #155724 | #d4edda | #c3e6cb |
| alert-danger | #721c24 | #f8d7da | #f5c6cb |
| alert-warning | #856404 | #fff3cd | #ffeeba |
| alert-info | #0c5460 | #d1ecf1 | #bee5eb |
| alert-light | #818182 | #fefefe | #fdfdfe |
| alert-dark | #1b1e21 | #d6d8d9 | #c6c8ca |
記述例
<div class="alert alert-primary" role="alert">
アラートのサンプルです！
</div>
補足事項
- クラスに別途alertを適用することで、外観が決定する（Bootstrap4における記述は以下の通り）
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
3. テーブル（table-×××）
| クラス | カラーコード |
|---|---|
| table-active | rgba(0, 0, 0, 0.075) |
| table-primary | #b8daff |
| table-secondary | #d6d8db |
| table-success | #c3e6cb |
| table-danger | #f5c6cb |
| table-warning | #ffeeba |
| table-info | #bee5eb |
| table-light | #fdfdfe |
| table-dark | #c6c8ca |
記述例
<table border = "1">
<tr><th class = "table-danger">Apple</th><td>りんご</td></tr>
<tr><th class = "table-danger">Orange</th><td>オレンジ</td></tr>
</table>
補足事項
- table要素に適用すると、tr, tdタグで囲んだ部分も同じ背景色となる
- tr, td要素のみの指定も可能
調べ方
使用ツール
- Google Chrome
手順
- Bootstrapの公式サイトにアクセス
- デベロッパーモードを起動する。ショートカットキーは以下の通り。
| Windows | Mac |
|---|---|
| F12、Ctrl+Shift+I | Cmd+Opt+I |
3.「すべてのソースでテキストを検索する」モードにする。ショートカットは以下の通り。
| Windows | Mac |
|---|---|
| Ctrl+Shift+F | Cmd+Opt+F |
4.以下のような検索ボックスが出現するので、内容を確認したいクラスを入力し、Enter。
5.検索BOXの下に検索結果が出るのでそれをクリックすると（①）、対象のソースの位置まで移動するので、内容を確認する（②）。
使い分けについて考えてみた
1. 別クラス名をつけ、cssにBootstrapのクラスと同じ内容を記述したほうが良いケース
複数のクラスを適用する必要があり、かつその内容が静的であるものが該当するでしょう。
【例】テーブルヘッダの文字色を青（text-primary）、背景色をピンク（table-danger）とする場合
実際に書いてみると以下のようになります。
Bootstrapのクラスをhtmlに直書きした場合
<table border = "1">
<tr><th class = "text-primary table-danger">Apple</th><td>りんご</td></tr>
<tr><th class = "text-primary table-danger">Orange</th><td>オレンジ</td></tr>
<tr><th class = "text-primary table-danger">Banana</th><td>バナナ</td></tr>
<tr><th class = "text-primary table-danger">Grape</th><td>ぶどう</td></tr>
<tr><th class = "text-primary table-danger">Melon</th><td>メロン</td></tr>
</table>
cssに記述した場合
<table class = "fruit" border = "1">
<tr><th>Apple</th><td>りんご</td></tr>
<tr><th>Orange</th><td>オレンジ</td></tr>
<tr><th>Banana</th><td>バナナ</td></tr>
<tr><th>Grape</th><td>ぶどう</td></tr>
<tr><th>Melon</th><td>メロン</td></tr>
</table>
.fruit th{
color: #007bff;
background-color: #f5c6cb;
}
Bootstrapのクラスをhtmlに直書きするよりも、cssに記述したほうがhtmlがスッキリわかりやすく見えますね。
また、この方法だと、Bootstrapにはないカラーコードや効果を適用することも可能。
2. htmlにBootstrapのクラスを直書きしたほうが良いケース
画面内での使用頻度が少ない、かつ、1のクラスで要素の状態が動的に変化するものはこちらに該当するでしょう。
【例】本体の色が黄色（btn-warning）、文字色が白（text-white）のボタン
この場合、Bootstrapではボタンがenableの場合だけでも、
・ノーマル（後述の動作以外）
・hover（マウスオーバーした時）
・focus(クリックした時）
の3種類があります（disabledの場合も含めるとさらに多くなります）。
※今回は1画面あたりのボタン数は2, 3個と想定しています（ものによってはボタンだらけのものもあるかもしれませんが、対象外で）。
Bootstrapのクラスをhtmlに直書きした場合
<button type="button" class="btn-warning text-white">戻る</button>
<button type="button" class="btn-warning text-white">クリア</button>
<button type="button" class="btn-warning text-white">送信！</button>
cssに記述した場合
<button type="button" class="btn-submit">戻る</button>
<button type="button" class="btn-submit">クリア</button>
<button type="button" class="btn-submit">送信！</button>
.btn-submit{
color: #fff;
background-color: #ffc107;
border-color: #ffc107;
}
.btn-submit:hover{
color: #fff;
background-color: #e0a800;
border-color: #d39e00;
}
.btn-submit:focus, .btn-submit.focus {
color: #fff;
background-color: #e0a800;
border-color: #d39e00;
box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
}
この場合だと、htmlに直書きしたほうが全体的な記述量が少なくてすみますね。
ただし、多数の画面で同じ要素を使用する場合はcssに記述したほうが後々の改修が楽。
その辺りは作るものの特性（追加開発があるのか、単発のツールなのか、など）も加味し、臨機応変に使い分けるのがよいかと。
終わりに
手軽にレスポンシブで見た目もよいデザインのサイトを作れるのがBootstrapのよいところ。
うまく取り入れ、カスタマイズもできるようにしていきたいですね。