アラートとは
アラートとは、警告や処理の結果を表示するためのものです。
例えば、ログインした人だけが見られるページがあったとします。 その時、「ログインしてください」や「パスワードが間違っている為ログイン出来ませんでした」というアラートを見た事がないでしょうか？
このように、ユーザーに通知を行いたい内容がある時に、アラートが使われます。
Bootstrap5のアラート
Bootstrapのアラートは、componentsに含まれています。 https://getbootstrap.jp/docs/5.0/components/alerts/
一番上、Examplesのアラートはずっと表示されっぱなし。 ずっと表示されたままなので、ユーザーにとってはちょっと邪魔かもしれません。
右サイドバーから「Dismissing」を見てみてください。 これは、閉じる機能とその為のボタンが用意されているアラートです。
もう少し詳しく、アラート（テンプレートコード）の構造を確認してみましょう。
アラートには、JavaScriptが使われていたり、今までと比べ少し複雑な構造になっているかもしれません。 しかし、カスタマイズするとしたらカラーの部分とテキスト部分くらいですので、その場所が分かれば大丈夫です。
カスタマイズの仕方を見てみましょう。
アラートのカスタマイズ
カラー変更
まず、カラーの変更です。 Bootstrapで用意されている以下イメージの８種類の配色から選びます。
上図イメージ内の「an example link」という部分は、リンクになっています。
アラートの配色とリンクの色に違和感が出ないよう、アラート内リンク用のCSSクラス「alert-link」が用意されています。 アラート内にリンクを張る場合は、このクラスを使用しましょう。
見出しと区切り
次に、見出しや線です。 アラート内では、リンクの他にも見出しや線を使用する事が出来るのです。 「alert-link」クラスと同様に、その為のCSSクラスも用意されています（見出しのみ）。
◆実習：アラートを実装
では、alert.htmlを作成して、アラートを実装してみましょう。
https://getbootstrap.jp/docs/5.0/components/alerts/を参考に、下記のアラートを作ってみてください。
- 「Dismissing」のコードをalert.htmlに貼り付ける
- アラートの色をprimary（青色）に変更する
- ブラウザで表示する
- ✕をクリックして、アラートが消えるか確認する
【見本】
