LoginSignup
33

More than 3 years have passed since last update.

【Bootstrap4】カラーコード一覧とその調べ方など

Posted at

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

記述例

exampleTextBg.html
<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

記述例

exampleAlert.html
    <div class="alert alert-primary" role="alert">
      アラートのサンプルです!
    </div>

補足事項

  • クラスに別途alertを適用することで、外観が決定する(Bootstrap4における記述は以下の通り)
.alert
.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

記述例

exampleTable.html
    <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

手順

  1. Bootstrapの公式サイトにアクセス
  2. デベロッパーモードを起動する。ショートカットキーは以下の通り。
Windows Mac
F12、Ctrl+Shift+I Cmd+Opt+I

3.「すべてのソースでテキストを検索する」モードにする。ショートカットは以下の通り。

Windows Mac
Ctrl+Shift+F Cmd+Opt+F

4.以下のような検索ボックスが出現するので、内容を確認したいクラスを入力し、Enter。

image.png

5.検索BOXの下に検索結果が出るのでそれをクリックすると(①)、対象のソースの位置まで移動するので、内容を確認する(②)。

image.png

使い分けについて考えてみた

1. 別クラス名をつけ、cssにBootstrapのクラスと同じ内容を記述したほうが良いケース

複数のクラスを適用する必要があり、かつその内容が静的であるものが該当するでしょう。

【例】テーブルヘッダの文字色を青(text-primary)、背景色をピンク(table-danger)とする場合
実際に書いてみると以下のようになります。

Bootstrapのクラスをhtmlに直書きした場合

onlyBootstrap.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に記述した場合

withCss.html
<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>

withCss.css
.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に直書きした場合

onlyBootstrap.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に記述した場合

withCss.html
<button type="button" class="btn-submit">戻る</button>
<button type="button" class="btn-submit">クリア</button>
<button type="button" class="btn-submit">送信!</button>

withCss.css
.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のよいところ。
うまく取り入れ、カスタマイズもできるようにしていきたいですね。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33