Bootstrap 5 メッセージトースト

この記事では、Bootstrap 5 のトーストメッセージコンポーネントの使用方法について説明します。これには、トーストの作成、表示、非表示、構成、カスタマイズの方法が含まれます。

1. トーストの概要

トーストは、ユーザーに短い情報を表示するための軽量で非侵入型の通知コンポーネントです。

2. トーストの作成

事前定義されたHTML構造を使用してトーストを作成します。これには、外部コンテナ、ヘッダー、本文、閉じるボタンなどのパーツが含まれます。トーストのスタイルと機能を確保するには、必要なCSSクラスを使用します。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">トーストのタイトル</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    トーストの本文が表示されます。
  </div>
</div>

3. トーストの表示

JavaScriptを使用してトーストインスタンスを初期化します。トーストを表示するには、`show()`メソッドを呼び出します。

<script>
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function (toastEl) {
    return new bootstrap.Toast(toastEl)
  })
  toastList[0].show()
</script>

4. トーストの非表示

トーストは自動的に非表示にすることも、閉じるボタンをクリックするか、`hide()`メソッドを呼び出して手動で非表示にすることもできます。

<script>
  var myToast = bootstrap.Toast.getInstance(document.getElementById('myToast'))
  myToast.hide()
</script>

5. 設定オプション

JavaScriptオプションを使用して、トーストの動作をカスタマイズできます。例：

<script>
  var myToast = new bootstrap.Toast(document.getElementById('myToast'), {
    animation: true,
    autohide: true,
    delay: 5000
  })
</script>

6. スタイルのカスタマイズ

カスタムCSSクラスを使用するか、デフォルトのスタイルを変更して、トーストの外観を変更できます。

<style>
  .my-toast {
    background-color: #f0f0f0;
  }
</style>

7. 例とコード

以下は、トーストを作成、表示、非表示、カスタマイズする方法を示すコード例です。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="myToast">
  <div class="toast-header">
    <strong class="me-auto">トーストのタイトル</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    トーストの本文が表示されます。
  </div>
</div>

<script>
  var myToast = new bootstrap.Toast(document.getElementById('myToast'), {
    animation: true,
    autohide: true,
    delay: 5000
  })
  myToast.show()
</script>

関連リソース

• Bootstrap 5 トーストのドキュメント

Q&A

Q1: トーストを複数のページで使い回すにはどうすればよいですか？

A1: トーストのHTML構造を別ファイルに定義し、必要なページにインクルードします。JavaScriptの初期化コードも各ページに追加する必要があります。

Q2: トーストを画面の中央に配置するにはどうすればよいですか？

A2: カスタムCSSを使用して、トーストの親要素をposition: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); で配置します。

Q3: トーストの表示時間を変更するにはどうすればよいですか？

A3: JavaScriptのオプションで`delay`の値を変更します。値はミリ秒単位です。