Bootstrap 5　アラート（Alert）の作成について

Bootstrap 5のアラートコンポーネントは、ユーザーに通知やメッセージを表示するためのスタイル化されたボックスです。アラートは、情報、成功、警告、エラーなど、さまざまなメッセージを視覚的に区別して表示することができます。

基本的なアラートの構造

<div class="alert alert-primary" role="alert">
  これはプライマリーアラートです。重要な通知を表示します。
</div>
<div class="alert alert-secondary" role="alert">
  これはセカンダリーアラートです。補足的な通知を表示します。
</div>
<div class="alert alert-success" role="alert">
  これは成功アラートです。操作が成功したことを通知します。
</div>
<div class="alert alert-danger" role="alert">
  これはエラーアラートです。重大な問題を通知します。
</div>
<div class="alert alert-warning" role="alert">
  これは警告アラートです。注意を促す通知を表示します。
</div>
<div class="alert alert-info" role="alert">
  これは情報アラートです。一般的な情報を提供します。
</div>
<div class="alert alert-light" role="alert">
  これはライトアラートです。軽微な通知を表示します。
</div>
<div class="alert alert-dark" role="alert">
  これはダークアラートです。重要な通知を強調します。
</div>

主な要素の説明

• .alert: アラートボックスの基本クラス。
• .alert-primary: プライマリーアラートのスタイル。
• .alert-secondary: セカンダリーアラートのスタイル。
• .alert-success: 成功アラートのスタイル。
• .alert-danger: エラーアラートのスタイル。
• .alert-warning: 警告アラートのスタイル。
• .alert-info: 情報アラートのスタイル。
• .alert-light: ライトアラートのスタイル。
• .alert-dark: ダークアラートのスタイル。

アラートのカスタマイズ

Bootstrap 5のアラートは、さまざまなカスタマイズオプションがあります。

アラートにアイコンを追加

アラートにアイコンを追加して、視覚的なアクセントを加えることができます。

<div class="alert alert-warning" role="alert">
  <i class="bi bi-exclamation-triangle-fill"></i> 注意！これは警告アラートです。
</div>

閉じられるアラート

アラートを閉じられるようにするには、.alert-dismissible クラスを追加し、閉じるボタンを含めます。

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>注意！</strong> これは閉じられる警告アラートです。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

アラートの色の変更

カスタムクラスを使用して、アラートの色を変更することもできます。

<style>
.custom-alert {
  background-color: #f0ad4e;
  color: #fff;
}
</style>
<div class="alert custom-alert" role="alert">
  カスタムカラーのアラートです。
</div>

使用例

以下は、さまざまな種類のアラートを使った使用例です。

<div class="alert alert-success" role="alert">
  <i class="bi bi-check-circle-fill"></i> 成功！操作が完了しました。
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>エラー！</strong> 問題が発生しました。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info" role="alert">
  <i class="bi bi-info-circle-fill"></i> これは情報アラートです。一般的な情報を提供します。
</div>

まとめ

Bootstrap 5のアラートコンポーネントを使用することで、ユーザーに重要なメッセージを視覚的に通知することができます。アラートはカスタマイズ性が高く、さまざまなスタイルやアイコンを追加することで、プロジェクトのデザインに柔軟に対応します。

関連投稿:

【初心者の方向け】 Bootstrap4の使い方 ボーダー 【初心者の方向け】 Bootstrap4の使い方 フォーム Bootstrap5　モーダル（Modal）の作成。 【初心者の方向け】 Bootstrap4の使い方 余白