Bootstrapの閉じられるアラート完全ガイド！.alert-dismissibleと.btn-closeを初心者向けにやさしく解説
生徒
「Webサイトで『保存しました』みたいなメッセージが出て、×ボタンで消せるのを見たことがあります。あれはどうやって作るんですか？」
先生
「それはBootstrapのアラート機能を使っています。特に、閉じられるアラートという仕組みですね。」
生徒
「難しそうですが、パソコンをあまり触ったことがなくてもできますか？」
先生
「大丈夫です。画面に付箋を貼って、いらなくなったら剥がす感覚で考えると分かりやすいですよ。」
1. Bootstrapのアラートとは何かを知ろう
Bootstrapのアラートとは、画面上にメッセージを目立たせて表示するための部品です。例えば「ログインしました」「エラーが発生しました」といった情報を、利用者に分かりやすく伝えるために使われます。現実で例えると、黒板に貼る大きな注意書きのような存在です。
Bootstrapを使うと、色や形があらかじめ整ったアラートを、難しい設定なしで表示できます。その中でも、閉じられるアラートは、不要になったら自分で消せる便利なタイプです。
2. 閉じられるアラートの基本構造
閉じられるアラートを作るには、アラート本体と、閉じるためのボタンが必要です。このときに使うのが、alert-dismissible と btn-close というBootstrapのクラスです。クラスとは「この見た目や動きを使います」という目印のようなものです。
<div class="alert alert-warning alert-dismissible fade show" role="alert">
メッセージが表示されます
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
このコードでは、divがアラート本体で、buttonが閉じるボタンです。×印のボタンは、自動的に右上に配置されます。
3. alert-dismissible の役割をやさしく理解する
alert-dismissible は「このアラートは閉じられますよ」とBootstrapに伝えるための合図です。これがないと、閉じるボタンを置いても正しく動きません。
日常生活で例えると、「この箱はフタを開けていいですよ」というシールを貼るようなものです。シールがなければ、開けていい箱か分からなくなってしまいます。
<div class="alert alert-success alert-dismissible fade show">
登録が完了しました
<button class="btn-close" data-bs-dismiss="alert"></button>
</div>
4. btn-close ボタンの仕組みを理解しよう
btn-close は、閉じるための×ボタンを表示するためのクラスです。このクラスを使うだけで、画像を用意しなくても、自動的に×印が表示されます。
また、data-bs-dismiss="alert" という指定は、「このボタンを押したら、アラートを消します」という意味になります。少し長い名前ですが、ボタンとアラートをつなぐ大事な役割をしています。
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
5. 色付きアラートでメッセージを伝え分ける
Bootstrapのアラートは、色を変えることで意味を分けることができます。例えば、緑は成功、赤はエラー、黄色は注意といった具合です。信号機を思い浮かべるとイメージしやすいでしょう。
<div class="alert alert-danger alert-dismissible fade show">
エラーが発生しました
<button class="btn-close" data-bs-dismiss="alert"></button>
</div>
6. fade と show で自然な動きを付ける
fade と show は、アラートを表示したり消したりするときの動きをなめらかにするためのクラスです。急に消えるよりも、ふわっと消えたほうが、画面を見る人にやさしい印象を与えます。
これは、ドアを静かに閉めるのと、勢いよくバタンと閉める違いのようなものです。
<div class="alert alert-info alert-dismissible fade show">
お知らせがあります
<button class="btn-close" data-bs-dismiss="alert"></button>
</div>
7. よくある間違いと注意点
初心者の方がつまずきやすいのは、alert-dismissible を付け忘れることや、btn-close をアラートの外に書いてしまうことです。閉じるボタンは、必ずアラートの中に入れてください。
また、BootstrapのJavaScriptが読み込まれていないと、ボタンを押しても消えません。見た目だけでなく、動きにも必要な部品がある、という点を覚えておきましょう。
8. 実務やブログでよく使われる場面
閉じられるアラートは、問い合わせ送信後のお礼メッセージや、入力ミスのお知らせなど、さまざまな場面で使われます。ブログや学習用サイトでも、読者に情報を伝えるために活躍します。
一度作り方を覚えてしまえば、コピーして使い回せるのも大きなメリットです。
【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を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
