Bootstrapアラート入門！.alertと.alert-primaryなど色バリエーションの使い分けを初心者向けに解説
生徒
「Webサイトで、注意メッセージやお知らせを目立たせたいんですが、どうすればいいですか？」
先生
「Bootstrapのアラートを使うと、色付きのメッセージを簡単に表示できます。」
生徒
「色がいろいろあるみたいですが、どう使い分けるんですか？」
先生
「それぞれ意味があるので、基本から順番に見ていきましょう。」
1. Bootstrapのアラートとは何か
Bootstrapのアラートとは、画面上で利用者に情報を伝えるための部品です。例えば、操作が成功したことを伝えたり、注意が必要な内容を知らせたりするときに使います。難しく考えず、紙に貼る注意書きやメモのようなものだと考えると分かりやすいです。Bootstrapを使うと、色や形が整った見やすいアラートを自動で作れます。
2. .alertクラスの基本的な使い方
アラートを表示するには、HTMLのdivタグにalertというクラスを付けます。クラスとは、見た目や動きを指定するための名前札のようなものです。Bootstrapでは、このクラスを付けるだけで枠と余白が整ったメッセージになります。
<div class="alert">
これは基本のアラートです
</div>
3. 色付きアラートの仕組み
Bootstrapでは、alertの後ろに色を表す名前を付けることで、意味を持った色付きアラートを表示できます。例えば、青は情報、緑は成功、黄色は注意、赤は危険といったように、信号機の色をイメージすると覚えやすいです。色を見るだけで、利用者は内容の重要度を直感的に理解できます。
4. .alert-primaryの特徴と使いどころ
alert-primaryは、青色のアラートです。主に「お知らせ」や「補足情報」を伝えるときに使います。特別な警告ではないけれど、読んでほしい情報がある場合に向いています。初めてBootstrapを使う人は、まずこの色から覚えると安心です。
<div class="alert alert-primary">
新しいお知らせがあります
</div>
5. 成功や完了を伝える.alert-success
alert-successは緑色で表示されます。登録が完了したときや、保存がうまくいったときなど、良い結果を伝える場面で使います。緑色は安心感を与えるため、利用者に「問題なく終わった」と伝えるのに最適です。
<div class="alert alert-success">
登録が完了しました
</div>
6. 注意を促す.alert-warning
alert-warningは黄色やオレンジ系の色で表示されます。すぐに危険ではないけれど、気を付けてほしい内容を伝えるときに使います。例えば、入力内容に抜けがある場合や、これから変更が起こる可能性がある場合などです。
<div class="alert alert-warning">
入力内容を確認してください
</div>
7. 危険やエラーを伝える.alert-danger
alert-dangerは赤色で表示され、もっとも強い注意を示します。エラーが発生したときや、操作を続けると問題が起きる場合に使います。赤色は止まるサインだと考えると分かりやすく、使いすぎないことも大切です。
<div class="alert alert-danger">
エラーが発生しました
</div>
8. 色バリエーションを正しく使い分ける考え方
アラートの色は、見た目だけでなく意味を持っています。そのため、何でも赤にするのではなく、伝えたい内容に合わせて選ぶことが重要です。利用者の立場で考え、安心して操作できる画面を作ることが、Bootstrapアラートを使う目的です。
【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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
