Bootstrap - トースト：初級者向けの親切なガイド

こんにちは、未来的なウェブ開発者さんたち！今日は、Bootstrapのトーストの素晴らしい世界に飛び込みます。それまで聞いたことがない場合は心配しないでください - このチュートリアルの終わりまでには、プロのようにトーストを表示できるようになるでしょう！?

Bootstrapのトーストとは？

まず、トーストとは何かについて話しましょう。スマートフォンのアプリを使っていると突然、画面の下部に小さな通知が表示されることがありますよね。それがウェブ開発におけるトーストと基本的には同じです！軽量な通知で、スマートフォンでのプッシュ通知を模倣しています。

基本的なトースト

まずは基本的なトーストから始めましょう。以下にコードの例を示します：

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11分前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
こんにちは、世界！これはトーストメッセージです。
</div>
</div>

これを分解すると：

• 外側の div でクラス toast を持つものがメインのコンテナです。
• 中には toast-header と toast-body があります。
• ヘッダーには通常、画像、タイトル、タイムスタンプ、閉じるボタンが含まれます。
• ボディにはメインのメッセージを入れます。

ライブトースト

次に、トーストを動かしてみましょう！これには少しのJavaScriptが必要です：

<button type="button" class="btn btn-primary" id="liveToastBtn">ライブトーストを表示</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11分前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
こんにちは、世界！これはライブトーストメッセージです。
</div>
</div>
</div>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
</script>

ここでは、ボタンをクリックするとトーストが表示されます。下のJavaScriptはクリックを監視し、トーストを表示します。

透けるトースト

トーストを少し透けるようにしたい場合は、bg-light クラスを追加します：

<div class="toast bg-light" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11分前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
こんにちは、世界！これは透けるトーストです。
</div>
</div>

トーストのスタッキング

複数のトーストを表示したい場合はどうしますか？問題ありません！Bootstrapはそれらをきれいに積み重ねます：

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>今すぐ</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
みなさん、こうやって見えます。
</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>2秒前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
注意、トーストは自動的に積み重ねられます
</div>
</div>
</div>

カスタムコンテンツ

トーストはテキストに限定されていません。好きなHTMLコンテンツを追加できます：

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
こんにちは、世界！これはトーストメッセージです。
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">アクションを取る</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">閉じる</button>
</div>
</div>
</div>

ここでは、トーストボディにボタンを追加しています。創造力を発揮してください！

色のスキーム

トーストは、サイトのテーマに合わせたり、異なる種類のメッセージを示したりするために、異なる色で表示できます：

<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11分前</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
こんにちは、世界！これはプライマリートーストです。
</div>
</div>

bg-primary を bg-success、bg-danger、bg-warning などに置き換えることで色を変更できます。

トーストの配置

トーストはページ上のどこにでも配置できます。以下に右上隅に配置する方法を示します：

<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- トーストをここに配置 -->
</div>
</div>

アクセシビリティ

アクセシビリティは非常に重要です！スクリーンリーダーがトーストを適切にアナウンスできるように、role="alert" と aria-live="assertive" 属性を常に含めてください。

以下にトーストの主要なメソッドをまとめた表を示します：

メソッド	説明
show()	トーストを表示
hide()	トーストを非表示
dispose()	トーストを非表示にし、DOMから削除

以上です！トーストの達人になりました。実践を重ねることで完璧になりますので、次のプロジェクトにこれらを取り入れてみてください。ハッピーコーディング！?

Credits: Image by storyset