Bootstrap 5カラー入門：text-primary・bg-primaryでわかる色クラス完全ガイド
生徒
「Bootstrapって、文字や背景の色も簡単に変えられるんですか？」
先生
「うん。Bootstrap 5には、あらかじめ用意された色のクラスがあって、それを指定するだけで見た目を整えられるよ。」
生徒
「CSSを書かなくても色を変えられるんですか？」
先生
「そう。文字色はtext-、背景色はbg-を使うだけ。順番に見ていこう。」
1. Bootstrap 5のカラー機能とは？
Bootstrap 5のカラー機能とは、文字色や背景色を簡単に指定できる便利な仕組みです。通常はCSSで色の指定を書く必要がありますが、Bootstrapでは決められたクラス名をHTMLに書くだけで色が変わります。
これは、色付きのシールを貼る感覚に近いです。自分で色を作るのではなく、用意されている色から選んで貼るだけなので、パソコンに慣れていない人でも安心して使えます。
2. text-primaryで文字の色を変えてみよう
文字の色を変えたいときは、text-primaryのようなクラスを使います。textは文字、primaryは基本となる青色を意味します。つまり、基本の青い文字にする指定です。
<p class="text-primary">この文字はBootstrapの基本カラーです</p>
クラスとは、タグに性格を与える名札のようなものです。text-primaryという名札を付けると、文字が自動的に青くなります。
3. bg-primaryで背景に色をつける
背景色を変えたい場合は、bg-primaryのようにbgから始まるクラスを使います。bgは背景という意味です。文字だけでなく、箱全体の色を変えたいときに使います。
<div class="bg-primary text-white p-3">
背景が青色で文字が白になります
</div>
背景が濃い色のときは、文字が見やすくなるようにtext-whiteを一緒に使うのがポイントです。
4. Bootstrap 5で使える基本カラー一覧
Bootstrap 5には、よく使われる色があらかじめセットされています。たとえば、成功を表す緑、注意を表す黄色、危険を表す赤などです。
色の名前は英語ですが、意味は直感的です。信号機の色を思い浮かべると理解しやすくなります。
<p class="text-success">成功を表す緑色</p>
<p class="text-warning">注意を表す黄色</p>
<p class="text-danger">危険を表す赤色</p>
5. 背景色と文字色を組み合わせるコツ
背景色と文字色は、必ずセットで考えることが大切です。背景が暗いのに文字も暗いと、読みにくくなってしまいます。
これは、黒板に黒いチョークで書くようなものです。背景が濃いときは明るい文字、背景が明るいときは暗い文字を選びます。
<div class="bg-dark text-light p-3">
暗い背景には明るい文字
</div>
6. text-mutedで控えめな文字を表現する
補足説明やあまり目立たせたくない文字には、text-mutedを使います。これは、少し薄いグレーの文字色になります。
注釈や注意書きなど、主役ではない情報に使うと、全体のデザインがすっきりします。
<p class="text-muted">※この情報は参考です</p>
7. カードやボタン風デザインで色を活かす
Bootstrapの色クラスは、カードやお知らせ枠のような見た目を作るときにも便利です。箱に色を付けるだけで、それらしいデザインになります。
難しいデザイン知識がなくても、色の力だけで見やすさや分かりやすさを表現できます。
<div class="bg-info text-dark p-3 rounded">
お知らせ内容がここに入ります
</div>
8. Bootstrapカラーを使うメリット
Bootstrap 5のカラークラスを使う最大のメリットは、迷わずに統一感のある色使いができることです。自分で色を考えなくても、整った配色になります。
また、クラス名を見るだけで意味が分かるため、後からコードを見返したときも理解しやすいです。これは、初心者にとってとても大きな安心材料になります。
【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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
