Bootstrap 5 のカラーと背景色を完全ガイド！初心者向け色の使い分け解説

1. Bootstrap 5 のテーマカラーとは？

1. Bootstrap 5 のテーマカラーとは？

Bootstrap 5 には、あらかじめ「この色はこういう場面で使うと分かりやすい」という考え方で整理されたテーマカラーが用意されています。色そのものを覚えるというより、色に付いた名前（primary / danger など）を使うイメージです。

たとえば「青」は primary、「赤」は danger のように、よく使う色が分かりやすい名前でまとまっています。これを使うと、HTMLにクラス名を付けるだけで色を統一できるので、初心者でもデザインがバラバラになりにくいのがポイントです。

以下が代表的なテーマカラー一覧です：

• primary：主に使う色（青）
• secondary：補助的な色（灰色）
• success：成功を意味する緑色
• danger：警告やエラーに使う赤色
• warning：注意喚起の黄色
• info：情報を表す水色
• light：背景に適した薄いグレー
• dark：濃いグレー（黒に近い）

「どの色を選べばいいか迷う…」というときは、まずprimary（メイン）とdanger（注意）、success（完了）あたりから使うと分かりやすいです。色の意味が揃うだけで、見る人にも内容が伝わりやすくなります。

<p class="text-primary">primary：メインのお知らせ</p>
<p class="text-success">success：完了しました</p>
<p class="text-danger">danger：エラーが発生しました</p>

2. 文字の色を変えるクラス名の使い方

2. 文字の色を変えるクラス名の使い方

Bootstrap 5 で文字色を変えたいときは、HTML要素に text-色名 というクラスを付けるだけでOKです。CSSで color を書かなくても、クラス名ひとつで見た目が変わるので、初心者でも試しながら調整できます。

使い方はとてもシンプルで、「青っぽいメインの色にしたい」なら text-primary、「注意を促したい」なら text-danger のように、色の名前＝役割として選ぶのがコツです。文章の中で強調したい部分だけ色を変えると、読み手の目線も自然に誘導できます。

<p>通常の文章（色指定なし）</p>
<p class="text-primary">text-primary：リンクや見出しのように目立たせたい文字</p>
<p class="text-danger">text-danger：注意・警告として伝えたい文字</p>

なお、文字色は段落（p）だけでなく、見出し（h2）やなどの文字要素にも使えます。まずは短い文章で試して、見やすい色合いかどうかを確認すると失敗しにくいです。

3. 背景色を変えるには？

3. 背景色を変えるには？

要素の背景色を変えたいときは、bg-色名 というクラスを使います。これは文字色の text-色名 と同じ感覚で使えるので、とても覚えやすいです。背景に色を付けることで、内容の区切りが分かりやすくなり、重要な情報も目に入りやすくなります。

たとえば「成功したお知らせ」なら緑系の bg-success、「注意を促したい場所」なら黄色の bg-warning というように、テーマカラーの意味をそのまま背景にも使えるのがBootstrapの便利なところです。

なお、背景色を付けたときは、文字が読みにくくならないように文字色も一緒に指定するのが基本です。暗い背景には text-white、明るい背景には text-dark を組み合わせると失敗しにくくなります。

<div class="bg-success text-white p-3">
    bg-success：完了メッセージなどに使いやすい背景
</div>

<div class="bg-warning text-dark p-3 mt-2">
    bg-warning：注意喚起として目立たせたい背景
</div>

4. 色の組み合わせと注意点

4. 色の組み合わせと注意点

文字色と背景色を一緒に使うときに一番大事なのは、コントラスト（明るさの差）です。背景と文字の色が近いと、内容が読みにくくなり、せっかく色を付けても「何が書いてあるか分からない」状態になってしまいます。

基本の考え方はシンプルで、暗い背景には白い文字（text-white）、明るい背景には黒っぽい文字（text-dark）を合わせます。迷ったら、この組み合わせにしておくと大きく外しにくいです。

また、強調したいからといって色を増やしすぎると、逆にごちゃごちゃして見えます。まずは「背景色＋文字色」のセットを少数だけ使い、同じルールで揃えると、見た目が整いやすくなります。

<div class="bg-danger text-white p-3">
    暗めの背景（bg-danger）には白文字（text-white）が読みやすい
</div>

<div class="bg-warning text-dark p-3 mt-2">
    明るい背景（bg-warning）には黒文字（text-dark）が読みやすい
</div>

5. カスタムカラーはまだ使わない

5. カスタムカラーはまだ使わない

Bootstrap には、もっと細かい色設定（自分で色を追加したり、色味を変えたりするカスタマイズ）も用意されています。ただ、そこに進むと「設定ファイルを触る」「色の管理ルールを決める」など、少し考えることが増えてきます。

初心者のうちは、まず primary / success / danger / warning などのテーマカラーをそのまま使うだけで十分です。すでに「見やすい組み合わせ」になりやすく、文字色（text-*）と背景色（bg-*）を揃えるだけでも、ページ全体がまとまって見えます。

「色選びで迷って手が止まる…」という状態を避けるためにも、最初はテーマカラーで統一して、必要になったタイミングで少しずつ調整していくのが安全です。

<p class="text-primary">まずは theme の定番（primary）で統一してみる</p>
<div class="bg-light text-dark p-3">読みやすい背景（bg-light）＋文字（text-dark）の組み合わせ</div>
<div class="bg-danger text-white p-3 mt-2">強い注意は danger に寄せる（色を増やしすぎない）</div>

6. 実際にボタンで色を使ってみよう

6. 実際にボタンで色を使ってみよう

色は文字や背景だけでなく、ボタンにも使えます。Bootstrap のボタンは btn クラスと一緒に色を組み合わせることで、カラフルにできます。

<button class="btn btn-primary">青いボタン</button>
<button class="btn btn-danger">赤いボタン</button>

7. どの色を使えばいいの？

7. どの色を使えばいいの？

色にはそれぞれの「意味」があります。たとえば、赤（danger）はエラーや注意、緑（success）は成功や完了、青（primary）はメインカラーとして使います。

このように意味を持たせることで、見ている人がすぐに内容を理解しやすくなります。

8. スマホ画面でも色はそのまま？

8. スマホ画面でも色はそのまま？

はい、Bootstrap のカラークラスは、スマートフォンやタブレットなど、どんな画面サイズでもそのまま使えます。特別な設定をしなくても、文字色や背景色が崩れることはありません。

9. 色を使うときに気をつけること

9. 色を使うときに気をつけること

色を使いすぎると、見た目がごちゃごちゃして見にくくなることがあります。初心者のうちは、3色以内におさえると、落ち着いたデザインになります。

また、目の不自由な人にも優しいデザインを心がけるために、コントラストの確保も大切です。

10. まずはテーマカラーだけ覚えよう

10. まずはテーマカラーだけ覚えよう

色を自由に使えるようになると、ホームページ作りがとても楽しくなります。ですが、最初は text-primary や bg-warning など、Bootstrap のテーマカラーを覚えるだけで十分です。

まとめ

まとめ

Bootstrap5で用意されている色のクラスは、初心者が最初に学ぶべき基本的な要素であり、文字色や背景色を直感的に変更できる点が大きな魅力になります。特に、文字色を指定するためのtext系クラスや背景色を指定するためのbg系クラスは、ホームページ制作に慣れていない人でも迷わず使えるわかりやすい仕組みとして設計されています。さらに、色には固有の意味があり、青は主要な要素を指し示す場面に用いられ、赤は危険や注意を表し、緑は成功や完了を表すといった視覚的な効果が自然に伝わります。そのため、ただ見た目を整えるだけではなく、訪れた人にとって読みやすく情報を理解しやすいデザインを作り出せる点がとても重要になります。 また、Bootstrap5のカラーはスマートフォンやタブレットなどすべての画面サイズで安定して表示されるため、レスポンシブデザインを考える場面でも大きな安心材料になります。複雑な設定や追加のスタイルを考えなくても、指定した色がそのまま反映される仕組みが整っているため、初心者でも無理なくデザイン全体を統一した構造にまとめられる点が魅力として際立ちます。さらに、背景色と文字色の組み合わせではコントラストの確保が極めて重要になり、読みやすさを損なわないためには暗い背景には明るい文字色、明るい背景には暗い文字色を合わせるという基本を押さえておく必要があります。これはデザインに不慣れな人でもすぐに実践できる大切な考え方です。 そして、Bootstrap5には多彩な色が準備されているものの、初心者がまず覚えるべきなのは、テーマカラーと呼ばれる一連の色です。primary、secondary、success、danger、warning、info、light、darkという基本的な色の名前を理解するだけで、ホームページ全体を整えた配色に仕上げることが可能になります。実際に、文字や背景だけではなく、ボタンに色を付ける際にも同じ色名が使われるため、覚えた色をそのまま他の要素にも応用できるという統一感が生まれます。 デザインを学び始めたばかりの頃は、つい多くの色を使いたくなるものですが、使いすぎてしまうと視覚的に落ち着かない印象になり、全体の情報量が多く感じられてしまうことがあります。そのため、初心者のうちは三色以内の組み合わせにとどめ、強調したい部分に色を絞って使うことで整理された印象を作りやすくなります。このように色数を抑えることで、訪れた人にとって読みやすく心地よいレイアウトを実現できます。 また、Bootstrap5ではあらかじめ決められた色以外にもカスタムカラーを設定する方法がありますが、最初の段階では無理に使う必要はありません。むしろ、基本のテーマカラーだけで十分にバランスの良い配色が可能であり、色の意味さえ理解していれば、適切な場面で適切な色を選びやすくなります。色の持つ意味を整理しながら使い分けることで、ホームページ全体の情報伝達力を高める効果が得られます。 さらに、Bootstrap5の色クラスは、ボタンやアラート、バッジなど多くのUIコンポーネントでも共通して利用されているため、一度覚えた色の名前があらゆる場面で役立つという利点があります。デザインを考える際には、一つひとつの色がどのような印象を与えるのかを意識しながら選ぶことで、直感的でわかりやすいページが自然に作り上げられます。これらの特性を意識しつつ、まずは基本の色をしっかり理解していくことが、Bootstrapを使いこなすための最初の大切なステップになるでしょう。 以下のように、色を使ったサンプルプログラムを再確認することで、実際の使い方をより深く理解できます。

色を使ったサンプルプログラム

<div class="bg-primary text-white p-3">主要な要素を示す青色の背景です</div>
<div class="bg-danger text-white p-3 mt-2">警告を表す赤色の背景です</div>
<div class="bg-success text-white p-3 mt-2">成功を表す緑色の背景です</div>

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Bootstrap 5 のテーマカラーって何ですか？

Bootstrap 5 のテーマカラーとは、あらかじめ決められた色の名前を使って、ホームページの文字色や背景色を簡単に指定できる仕組みです。たとえば青は「primary」、赤は「danger」といった名前がついています。

Bootstrapで文字の色を変える方法は？

Bootstrap 5 では、文字の色を変えたいときに「text-色名」のクラスを使います。たとえば青くしたいなら「text-primary」、赤くしたいなら「text-danger」と指定します。