Bootstrap5で複数トーストをスタック表示する方法とz-indexの重なり順をやさしく解説

1. Bootstrapのトーストとは何か

1. Bootstrapのトーストとは何か

Bootstrapのトーストとは、画面の端に一時的に表示される小さな通知メッセージのことです。例えば、フォームの送信完了や保存成功などを知らせるために使われます。大きな画面全体を覆うのではなく、そっと表示されて数秒後に消えるのが特徴です。

Bootstrap5では、アラートとは別にToastコンポーネントが用意されています。アラートは常に画面に表示されることが多いですが、トーストは自動的に消える通知です。この違いを理解することで、ユーザーにとって見やすく使いやすい画面設計ができます。

スタック表示とは、複数のトーストを縦に積み重ねて表示することです。スマートフォンの通知のように、上から順番に並んでいくイメージです。

2. トーストを複数スタック表示する基本構造

2. トーストを複数スタック表示する基本構造

まずは、Bootstrapで複数のトーストを表示する基本的なHTML構造を見てみましょう。ポイントは、トーストをまとめる親要素を作ることです。

<div class="toast-container position-fixed top-0 end-0 p-3">
<div class="toast show" role="alert">
<div class="toast-header">
<strong class="me-auto">通知1</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
保存が完了しました。
</div>
</div>

<div class="toast show mt-2" role="alert">
<div class="toast-header">
<strong class="me-auto">通知2</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
新しいメッセージがあります。
</div>
</div>
</div>

toast-containerにposition-fixedを指定すると、画面の決まった位置に固定されます。top-0 end-0は、画面の右上に表示するという意味です。mt-2は上下の余白を作る指定で、これがあることで重なりすぎを防ぎます。

3. z-indexとは何かをやさしく理解する

3. z-indexとは何かをやさしく理解する

z-indexとは、重なり順を決める数字のことです。数字が大きいほど、前面に表示されます。たとえば、机の上にノートを何冊も重ねるとします。一番上にあるノートが見えますよね。この順番を数字で管理するのがz-indexです。

Bootstrapでは、モーダルやナビゲーションバーなどもz-indexを使っています。そのため、トーストの表示が裏に隠れてしまう場合は、z-indexを調整する必要があります。

<style>
.toast-container {
    z-index: 2000;
}
</style>

<div class="toast-container position-fixed top-0 end-0 p-3">
<div class="toast show">
<div class="toast-body">
z-indexを調整した通知です。
</div>
</div>
</div>

このようにstyleタグでz-indexを指定することで、トーストが他の要素より前に表示されるようになります。

4. 重なり順をきれいに整えるコツ

4. 重なり順をきれいに整えるコツ

複数トーストを表示する場合、表示順を自然に見せることが重要です。新しい通知が一番上に来るようにしたい場合は、JavaScriptで要素を追加する順番を工夫します。

<div id="toastArea" class="toast-container position-fixed top-0 end-0 p-3"></div>

<script>
function addToast(message) {
const toastHTML = `
<div class="toast show mt-2">
<div class="toast-body">${message}</div>
</div>`;
document.getElementById("toastArea").insertAdjacentHTML("afterbegin", toastHTML);
}
addToast("新しい通知です");
</script>

afterbeginを使うと、先頭に追加されます。これにより、新しいトーストが上に表示されるスタック構造になります。

5. 表示位置を変更する方法

5. 表示位置を変更する方法

Bootstrapのユーティリティクラスを使えば、表示位置も簡単に変更できます。例えば画面中央下に表示したい場合は、bottom-0 start-50 translate-middle-xを使います。

<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
<div class="toast show">
<div class="toast-body">
画面下中央の通知です。
</div>
</div>
</div>

このようにクラスを変更するだけで、Bootstrapのトースト表示位置を柔軟に調整できます。

6. モーダルやナビゲーションと重なる場合の対策

6. モーダルやナビゲーションと重なる場合の対策

Bootstrapのモーダルやナビゲーションバーは高いz-indexを持っています。そのため、トーストが背面に隠れることがあります。この場合は、モーダルより大きい値を設定します。

<style>
.toast-container {
    z-index: 3000;
}
.modal {
    z-index: 1055;
}
</style>

<div class="toast-container position-fixed top-0 end-0 p-3">
<div class="toast show">
<div class="toast-body">
モーダルより前に表示されます。
</div>
</div>
</div>

重なり順の数字を理解しておくと、BootstrapのUI設計がスムーズになります。z-indexは大きすぎる値を乱用せず、必要な範囲で管理することが大切です。

まとめ

まとめ

今回はBootstrap5で複数トーストをスタック表示する方法とzindexによる重なり順の調整について詳しく解説しました。BootstrapのToastコンポーネントは画面の端に一時的に表示される通知メッセージであり、フォーム送信完了や保存成功、エラー通知などさまざまな場面で活用できます。特にBootstrap5ではtoastcontainerを活用することで複数トーストを縦方向に積み重ねるスタック表示が簡単に実装できます。positionfixedやtop0 end0などのユーティリティクラスを使えば表示位置も柔軟に変更でき、フロントエンド開発やUIデザインにおいて非常に便利です。

また、zindexの理解はBootstrapだけでなくCSS全体の基礎知識として重要です。重なり順を数値で制御することで、モーダルやナビゲーションバー、ドロップダウンメニューなどと競合せずにトーストを前面に表示できます。zindexを適切に設定しないと通知が背面に隠れてしまい、ユーザーに重要なメッセージが伝わらない場合があります。Bootstrapの既定値を把握した上でtoastcontainerに対して必要な範囲でzindexを指定することが安定した画面設計につながります。

さらにJavaScriptを使ってinsertAdjacentHTMLのafterbeginを利用すれば、新しい通知を常に上部へ追加することができ、自然なスタック構造を実現できます。これにより複数トースト表示でも視認性が高くなり、ユーザー体験の向上につながります。Bootstrap トースト 表示位置 変更 方法やBootstrap トースト zindex 調整といったキーワードで情報を探している方にも理解しやすい内容になっています。

実際の現場ではモーダル表示中に通知を出したいケースや、ナビゲーションバー固定時にトーストを重ねたいケースがあります。その場合はzindexの数値関係を整理し、toastcontainerを中心に設計を行うことが重要です。スタック表示と重なり順を正しく理解することで、Bootstrap5を使った通知メッセージ設計がより洗練されます。

<style>
.toast-container {
    z-index: 2500;
}
</style>

<div id="toastArea" class="toast-container position-fixed top-0 end-0 p-3">
<div class="toast show mt-2">
<div class="toast-header">
<strong class="me-auto">まとめ通知</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
Bootstrap5でスタック表示と重なり順を理解しました。
</div>
</div>
</div>

<script>
function addToast(message) {
const toastHTML = `
<div class="toast show mt-2">
<div class="toast-body">${message}</div>
</div>`;
document.getElementById("toastArea").insertAdjacentHTML("afterbegin", toastHTML);
}
addToast("新しい通知を上に追加します");
</script>