はじめに
こんにちは！Webサイトで「登録が完了しました」のようなメッセージを表示した後、ユーザー自身が「×」ボタンでそれを消せるようにしたい、と思ったことはありませんか？
Bootstrap 5のDismissing an alert機能を使えば、自分でJavaScriptを書くことなく、HTMLを少し追加するだけで、この「消せるアラート」を驚くほど簡単に実装できます。
「消せるアラート」の作り方
必要なのは、通常のアラートに2つの要素を追加するだけです。
-
アラート本体の
<div>に.alert-dismissibleクラスを追加する。 -
アラートの中に、
data-bs-dismiss="alert"属性を持つ<button>を設置する。
▼ コピペで使える基本コード
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>登録完了！</strong> アカウントが正常に作成されました。
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
## コードの解説
1. 親要素の<div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
-
.alert: Bootstrapでアラートの基本スタイルを適用するクラス。 -
.alert-success: アラートを緑色にするクラス。 -
.alert-dismissible: これが重要！ 「このアラートは閉じられる要素ですよ」とBootstrapに教えるためのクラスです。右側に閉じるボタンを置くための余白（パディング）を自動で確保してくれます。 -
.fade.show: アラートを閉じる際に、フワッと消えるアニメーション（フェードアウト）を適用するためのクラスです。
2. 閉じるボタン<button>
HTML
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-
.btn-close: Bootstrap 5で新しく導入された、シンプルな「×」ボタンのスタイルを適用するクラスです。 -
data-bs-dismiss="alert": これが魔法の正体！ この属性が指定された要素をクリックすると、BootstrapのJavaScriptが自動で一番近い親の.alert要素を探し出して、DOMから削除（非表示に）してくれます。この一行のおかげで、私たちはJavaScriptを書く必要がありません。 -
aria-label="Close": スクリーンリーダー（視覚障害のある方が利用する読み上げソフト）のために、「これは閉じるためのボタンですよ」と伝えるアクセシビリティのための属性です。
まとめ
Bootstrap 5の「Dismissing an alert」機能を使えば、**.alert-dismissibleとdata-bs-dismiss="alert"**という2つの要素を正しく組み合わせるだけで、誰でも簡単にインタラクティブな「消せるアラート」を実装できます。
ぜひ活用して、ユーザーにとって親切なUIを作ってみてください！