先生と生徒の会話形式で理解しよう

生徒

「ホームページの文字や背景に色をつけたいんですが、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コンポーネントでも応用できますよ。意味のある色を選ぶことも大切です。」

生徒

「なるほど。確かに赤や緑には強い印象があるので、誤って使うと混乱しそうですね。慎重に選ぶ必要があると感じました。」

先生

「その通りです。だからこそ、まずはテーマカラーの基本だけ覚えて、少しずつ慣れていけば十分なんですよ。」

生徒

「ありがとうございます！これで次にデザインするときも安心して色を選べそうです。」