Bootstrap 5 のカラーと背景色を完全ガイド！初心者向け色の使い分け解説
生徒
「ホームページの文字や背景に色をつけたいんですが、Bootstrapでどうやって色を変えるんですか？」
先生
「Bootstrap 5 では、あらかじめ用意された色をクラス名で簡単に使えるようになっていますよ。」
生徒
「そうなんですね！でも、どんな色があるのかとか、どの色を使えばいいか分かりません…。」
先生
「それでは、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. 文字の色を変えるクラス名の使い方
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. 背景色を変えるには？
要素の背景色を変えたいときは、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. 色の組み合わせと注意点
文字と背景の色を一緒に使うときには、コントラスト（明るさの差）に注意しましょう。文字が背景と同じような色だと、読みにくくなってしまいます。たとえば、白い文字（text-white）には暗い背景色を、黒い文字（text-dark）には明るい背景色を合わせると見やすくなります。
5. カスタムカラーはまだ使わない
Bootstrap には、もっと細かい色設定もありますが、それは少し難しいので、ここではテーマカラーの基本だけを覚えましょう。カスタマイズや自分で色を作る方法は後のステップで学びます。
6. 実際にボタンで色を使ってみよう
色は文字や背景だけでなく、ボタンにも使えます。Bootstrap のボタンは btn クラスと一緒に色を組み合わせることで、カラフルにできます。
<button class="btn btn-primary">青いボタン</button>
<button class="btn btn-danger">赤いボタン</button>
7. どの色を使えばいいの？
色にはそれぞれの「意味」があります。たとえば、赤（danger）はエラーや注意、緑（success）は成功や完了、青（primary）はメインカラーとして使います。
このように意味を持たせることで、見ている人がすぐに内容を理解しやすくなります。
8. スマホ画面でも色はそのまま？
はい、Bootstrap のカラークラスは、スマートフォンやタブレットなど、どんな画面サイズでもそのまま使えます。特別な設定をしなくても、文字色や背景色が崩れることはありません。
9. 色を使うときに気をつけること
色を使いすぎると、見た目がごちゃごちゃして見にくくなることがあります。初心者のうちは、3色以内におさえると、落ち着いたデザインになります。
また、目の不自由な人にも優しいデザインを心がけるために、コントラストの確保も大切です。
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>
生徒
「Bootstrap5の色についてだいぶ理解できた気がします。特に文字色や背景色を簡単に変えられるのが便利だと感じました。」
先生
「色の使い方はデザインの基本だから、ここを押さえておけば他のUIコンポーネントでも応用できますよ。意味のある色を選ぶことも大切です。」
生徒
「なるほど。確かに赤や緑には強い印象があるので、誤って使うと混乱しそうですね。慎重に選ぶ必要があると感じました。」
先生
「その通りです。だからこそ、まずはテーマカラーの基本だけ覚えて、少しずつ慣れていけば十分なんですよ。」
生徒
「ありがとうございます！これで次にデザインするときも安心して色を選べそうです。」
この記事を読んだ人からの質問
プログラミング初心者からのよくある疑問／質問を解決します
Bootstrap 5 のテーマカラーって何ですか？
Bootstrap 5 のテーマカラーとは、あらかじめ決められた色の名前を使って、ホームページの文字色や背景色を簡単に指定できる仕組みです。たとえば青は「primary」、赤は「danger」といった名前がついています。
Bootstrapで文字の色を変える方法は？
Bootstrap 5 では、文字の色を変えたいときに「text-色名」のクラスを使います。たとえば青くしたいなら「text-primary」、赤くしたいなら「text-danger」と指定します。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
