Bootstrap5で自動で消えるトーストの作り方完全ガイド！data-bs-delayとautohide設定を初心者向けに解説

1. Bootstrapトーストとは何かを理解しよう

1. Bootstrapトーストとは何かを理解しよう

Bootstrapトーストとは、画面の隅に表示される小さな通知メッセージのことです。例えば、保存完了やログイン成功などの情報を利用者に伝えるときに使われます。大きな画面を邪魔せずに情報を伝えられるため、現在のWeb開発ではよく利用されています。

トーストはパンを焼く調理器具の名前から来ており、短時間で表示されて消える軽い通知という意味があります。Webアプリや管理画面、ショッピングサイト、会員サイトなどで多く使用されています。

Bootstrap5ではJavaScriptの知識が少なくても、HTMLに属性を追加するだけで簡単にトースト機能を実装できます。これが初心者にも扱いやすい理由です。

2. 自動で消えるトーストの基本構造

2. 自動で消えるトーストの基本構造

トーストを表示するためには、決められたHTML構造があります。この構造を理解することが重要です。構造とは部品の組み合わせのようなもので、正しい順番で配置する必要があります。

トーストは主に外側の入れ物と、タイトル部分と本文部分で構成されています。これらを組み合わせることで、Bootstrapがトーストとして認識します。

<div class="toast show">
    <div class="toast-header">
        <strong class="me-auto">通知タイトル</strong>
        <small>今</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        保存が完了しました
    </div>
</div>

toastというクラスはBootstrapのトースト機能を使うための指定です。toast-headerはタイトル表示部分、toast-bodyは本文表示部分を表しています。

3. autohideとは何かを理解しよう

3. autohideとは何かを理解しよう

autohideとはトーストを自動で非表示にする機能です。非表示とは、画面から消える動作のことを意味します。この設定を使うことで、一定時間後に自動で通知を消すことができます。

例えば、ゲームでレベルアップ通知が表示されて自然に消える動きを想像すると理解しやすいです。操作しなくても表示が終わるため、利用者の操作を邪魔しません。

autohideはtrueに設定すると自動で消えます。falseにすると、閉じるボタンを押すまで表示されたままになります。

<div class="toast" data-bs-autohide="true">
    <div class="toast-body">
        自動で消えるトーストです
    </div>
</div>

data-bs-autohideはBootstrap専用の属性で、トーストの動作を制御します。属性とはHTMLタグに追加できる設定情報のことです。

4. data-bs-delayの役割を理解しよう

4. data-bs-delayの役割を理解しよう

data-bs-delayはトーストが消えるまでの時間を設定する機能です。単位はミリ秒で指定します。ミリ秒とは千分の一秒を意味します。

例えば三秒表示したい場合は三千と指定します。この設定を利用すると、通知の表示時間を細かく調整できます。

<div class="toast" data-bs-autohide="true" data-bs-delay="3000">
    <div class="toast-body">
        三秒後に消える通知です
    </div>
</div>

数値を変更することで表示時間を自由に調整できます。長すぎると邪魔になり、短すぎると読めないため、適切な時間を選ぶことが大切です。

5. ボタン操作でトーストを表示する方法

5. ボタン操作でトーストを表示する方法

トーストは最初から表示するだけでなく、ボタンを押したときに表示することもできます。この方法は会員登録完了や保存完了など、操作結果を伝える場面で多く使われます。

JavaScriptを使ってトーストを呼び出すことで、より実用的な通知機能を作れます。

<button id="showToast" class="btn btn-primary">通知表示</button>

<div class="toast" id="sampleToast" data-bs-delay="4000">
    <div class="toast-body">
        ボタンから表示された通知です
    </div>
</div>

<script>
document.getElementById("showToast").onclick = function() {
    var toast = new bootstrap.Toast(document.getElementById("sampleToast"));
    toast.show();
};
</script>

bootstrap.ToastはBootstrapのトースト機能を動かすための命令です。showという命令が表示を開始します。

6. トーストを画面右下に配置する方法

6. トーストを画面右下に配置する方法

トーストは表示位置を変更することもできます。多くのサイトでは右下に配置されます。配置とは画面上の表示場所を決めることです。

Bootstrapには位置調整のクラスが用意されているため、簡単に配置できます。

<div class="position-fixed bottom-0 end-0 p-3">
    <div class="toast show" data-bs-delay="3000">
        <div class="toast-body">
            右下に表示される通知です
        </div>
    </div>
</div>

position-fixedは画面に固定する指定です。bottom-0は下側、end-0は右側を意味します。p-3は余白を設定しています。

7. autohideを無効にして手動で閉じる設定

7. autohideを無効にして手動で閉じる設定

場合によっては利用者が内容をしっかり確認する必要があります。その場合は自動非表示を無効にして、閉じるボタンで消す方法を利用します。

警告や重要な通知などに向いています。

<div class="toast show" data-bs-autohide="false">
    <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">
        手動で閉じる通知です
    </div>
</div>

data-bs-dismissは閉じる処理を実行する指定です。これを設定するとボタンでトーストを消すことができます。

8. トースト設定を使うときの注意点

8. トースト設定を使うときの注意点

トーストを使う際には表示時間や配置、表示頻度に注意する必要があります。通知が多すぎると画面が見づらくなり、利用者が混乱する可能性があります。

また短すぎる表示時間は内容が読めない原因になります。利用者が内容を理解できる長さを考えて設定することが大切です。

さらに複数のトーストを同時に表示する場合は重なりに注意します。適切に余白を設定することで見やすさを保つことができます。

Bootstrapトーストはログイン通知、フォーム送信結果、保存完了表示、エラー通知など様々な場面で利用される重要なUI部品です。UIとは画面操作を行うための見た目や仕組みを意味します。初心者でも扱いやすい部品のため、Web制作やWebアプリ開発で広く活用されています。

まとめ

まとめ

トースト通知機能の重要理解

ぶーとすとらっぷとーすとつうちきのうりかいかくにんがめんつうちひょうじきのうべんりりようしゃそうささまたげないつうちひょうじほうほううぇぶあぷりけーしょんかんりがめんかいんさいとしょうっぴんぐさいとさまざまかいはつげんばひつようきのうりようしゃたいけんこうじょうかんりしゃうんようこうりつこうじょうとーすとつうちきのうがめんすみにしょうがいすくなくひょうじじょうほうつたえるじゅうようゆーあいぶひんげんざいうぇぶかいはつきほんきのうかくにんじゅうようじこう ぶーとすとらっぷとーすとこうぞうりかいがいそくようききゅうぶんぶんかくぶひんくみあわせただしいはいちとーすときのうにんしきとーすとへっだーたいとるひょうじぶんとーすとぼでぃほんぶんひょうじぶんくみあわせりようしゃわかりやすいつうちひょうじかのうこうぞうせいけいかくにんうぇぶせいさくきほんちしきしゅうとくこうりつかいはつじつげん じどうひひょうじせっていじゅうようせいりかいでーたびーえすおーとーはいどきのうりようつうちひょうじごいっていじかんごじどうしょうきょりようしゃそうさふようしぜんひょうじしゅうりょうりようしゃそうささまたげないしぜんたいけんつうちひょうじかのうげーむれべるあっぷつうちどうさどうようしぜんひひょうじうぇぶあぷりけーしょんたいけんこうじょうじゅうようきのう ひょうじじかんちょうせいでーたびーえすでぃれいせっていりかいみりびょうたんいちょうせいかのうりようしゃよみやすいひょうじじかんせっていひつようちょうたんちょうせいじゅうようりようしゃりかいそくしんこうりつじょうほうつたえるさいてきじかんせっていゆーざびりてぃこうじょう ぼたんそうさひょうじじっそうじゅうようじゃばすくりぷとれんけいとーすとひょうじそうさけっかつうちかいんとうろくかんりがめんでーたほぞんつうちじつようてききのうりようしゃこうどうたいおうじつじかんつうちじっそうげんだいうぇぶあぷりけーしょんひつようきのうかくにん がめんひょうじいちちょうせいきのうりかいみぎしたはいちいっぱんてきひょうじほうほうぽじしょんふぃっくすどせっていがめんこていぼとむはいちえんどはいちよはくせっていとーすとつうちみやすさこうじょうふくすうつうちひょうじせいりみやすさたいおううぇぶせいさくひつようちしき じどうひひょうじむこうせっていじゅうようつうちたいおうけいこくつうちえらーつうちかくにんひつようつうちりようしゃそうさへいじぼたんそうさひひょうじつうちないようかくにんじゅうしつうちきのうせっていばめんたいおうじゅうようせっていかくにん とーすとつうちかいはつちゅういじこうつうちひょうじひんどかんりりようしゃふたんかいひつうちおおすぎがめんこんらんぼうしひょうじじかんてきせつせっていないようりかいそくしんふくすうつうちながれせいりよはくちょうせいみやすさたいおうげんだいうぇぶあぷりけーしょんひつようゆーあいせっけいりかい ぶーとすとらっぷとーすとつうちきのうしゅうとくうぇぶせいさくうぇぶあぷりけーしょんかいはつひつようちしきしゅうとくゆーざびりてぃこうじょうりようしゃたいけんこうじょうこうりつてきつうちきのうじっそうかのうかくにんしょしんしゃりかいかんようぶーとすとらっぷきのうしゅうとくうぇぶでざいんうぇぶかいはつすきるこうじょう

サンプルプログラム総合確認

<button id="toastButton" class="btn btn-success">通知表示</button>

<div class="position-fixed bottom-0 end-0 p-3">
<div id="completeToast" class="toast" data-bs-autohide="true" data-bs-delay="3500">
<div class="toast-header">
<strong class="me-auto">保存通知</strong>
<small>現在</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
データ保存が完了しました
</div>
</div>
</div>

<script>
document.getElementById("toastButton").onclick = function() {
var toast = new bootstrap.Toast(document.getElementById("completeToast"));
toast.show();
};
</script>

装飾を追加した応用例

<style>
.toast-body{
font-weight:bold;
}
</style>

<div class="position-fixed bottom-0 end-0 p-3">
<div class="toast show" data-bs-delay="2500">
<div class="toast-body">
処理成功通知
</div>
</div>
</div>