アラート

Bootstrapのアラートは、危険、成功、情報、警告などのメッセージを分かりやすく表示するための、すぐに使用できるスタイルを提供します。

Examples

Bootstrapには、成功、情報、警告、危険の4つの基本的なアラートタイプが用意されています。

<div class="alert alert-success" role="alert">
  これは成功アラートです。よくできました！
</div>
<div class="alert alert-info" role="alert">
  これは情報アラートです。ご確認ください。
</div>
<div class="alert alert-warning" role="alert">
  これは警告アラートです。ご注意ください！
</div>
<div class="alert alert-danger" role="alert">
  これは危険アラートです。エラーが発生しました！
</div>

リンクの色

アラート内で使用されるリンクは、アラートのタイプに合わせて色が自動的に調整されます。

<div class="alert alert-success" role="alert">
  これは成功アラートで、<a href="#" class="alert-link">リンク</a>が含まれています。
</div>
<div class="alert alert-info" role="alert">
  これは情報アラートで、<a href="#" class="alert-link">リンク</a>が含まれています。
</div>

追加コンテンツ

テキストだけでなく、見出し、段落、リストなどの追加コンテンツをアラートに追加できます。

<div class="alert alert-warning" role="alert">
  <h4 class="alert-heading">警告</h4>
  <p>変更を加える前に、必ずデータをバックアップしてください。</p>
  <hr>
  <p class="mb-0">ご不明な点がございましたら、サポートにお問い合わせください。</p>
</div>

閉じる

.alert-dismissibleクラスとdata-bs-dismiss="alert"属性を使用して、閉じるボタンを表示し、アラートを閉じることができます。

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  エラー！ 入力した情報に誤りがあります。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

JavaScriptを使用してアラートを閉じることもできます。

var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
  new bootstrap.Alert(alert)
})

アクセシビリティ

アラートはスクリーンリーダーで正しく読み上げられるように、アクセシビリティに配慮する必要があります。role="alert"属性をアラート要素に追加することをお勧めします。これにより、スクリーンリーダーはアラートを正しく認識し、ユーザーに伝えることができます。

よくある質問

1. 質問: アラートの色をカスタマイズできますか?
   回答: はい、Bootstrapのカスタマイズオプションを使用して、アラートの色をカスタマイズできます。詳細については、公式ドキュメントを参照してください。
2. 質問: アラートを自動的に非表示にするにはどうすればよいですか?
   回答: JavaScriptのsetTimeout関数を使用して、一定時間後にアラートを非表示にすることができます。
3. 質問: アラートをモーダルダイアログ内に配置できますか?
   回答: はい、アラートをモーダルダイアログなどの他のBootstrapコンポーネント内に配置できます。