アラート | Bootstrap v5.3

Bootstrap の警告コンポーネントは、ユーザーに重要な情報を表示するための定義済みスタイルを提供します。

使用方法

警告を表示するには、.alert クラスと、.alert- 接頭辞を付けたコンテキストクラスを使用します。

HTML 構造

<div class="alert alert-primary" role="alert">
  これはプライマリアラートです — チェックしてください！
</div>
    

例

<div class="alert alert-primary" role="alert">これはプライマリアラートです &mdash; チェックしてください！</div>
<div class="alert alert-secondary" role="alert">これはセカンダリアラートです &mdash; チェックしてください！</div>
<div class="alert alert-success" role="alert">これは成功アラートです &mdash; チェックしてください！</div>
<div class="alert alert-danger" role="alert">これは危険アラートです &mdash; チェックしてください！</div>
<div class="alert alert-warning" role="alert">これは警告アラートです &mdash; チェックしてください！</div>
<div class="alert alert-info" role="alert">これは情報アラートです &mdash; チェックしてください！</div>
<div class="alert alert-light" role="alert">これはライトアラートです &mdash; チェックしてください！</div>
<div class="alert alert-dark" role="alert">これはダークアラートです &mdash; チェックしてください！</div>

リンクの色

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

その他のコンテンツ

アラートを閉じる

ユーザーがアラートを閉じることができるようにするには、.alert-dismissible クラスと、閉じるボタンを表す <button> 要素を追加します。

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  警告！ いくつかの問題が発生しました。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="閉じる"></button>
</div>
    

アクセシビリティ

アクセシビリティを向上させるために、アラートに ARIA 属性を使用します。role="alert" は、スクリーンリーダーがアラートを警告として解釈することを保証します。aria-label="閉じる" は、閉じるボタンの目的を説明します。

Sass

警告のスタイルは、Sass 変数と mixin を使用してカスタマイズできます。詳細については、公式ドキュメントを参照してください。

例

追加コンテンツ

アラートにタイトル、段落、リストなどの追加コンテンツを追加できます。

<div class="alert alert-success" role="alert">
<h4 class="alert-heading">うまくいきました！</h4>
<p>処理が正常に完了しました。</p>
<hr />
<p class="mb-0">詳細については、<a href="#">こちら</a>をご覧ください。</p>
</div>

閉じるアラート

JavaScript を使用して、ユーザーが閉じることができるアラートを作成できます。

<div class="alert alert-danger alert-dismissible fade show" role="alert">
  エラー！ 処理中にエラーが発生しました。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="閉じる"></button>
</div>
    

カスタム

Sass 変数

警告のスタイルをカスタマイズするために使用できる Sass 変数を以下に示します。

Sass mixin

異なるタイプのアラートを生成するために使用できる Sass mixin を以下に示します。

@mixin alert-variant($background, $border, $text) {
  background-color: $background;
  border-color: $border;
  color: $text;

  .alert-link {
    color: darken($text, 15%);
  }
}
    

まとめ

この記事では、Bootstrap の警告コンポーネントについて詳しく説明しました。基本的な使用方法からスタイルのカスタマイズまで、プロジェクトで警告コンポーネントを効果的に使用するために必要な情報がすべて揃っています。

よくある質問

Q: アラートを非表示にするにはどうすればよいですか？

A: アラートを非表示にするには、.d-none クラスを追加します。

Q: アラートにアニメーションを追加するにはどうすればよいですか？

A: アラートにアニメーションを追加するには、.fade と .show クラスを追加します。

Q: アラートをカスタマイズするにはどうすればよいですか？

A: アラートをカスタマイズするには、独自の CSS クラスを作成し、.alert クラスと組み合わせて使用します。また、Sass 変数と mixin を使用して、警告のデフォルトスタイルをオーバーライドすることもできます。