Bootstrap5のアラートを理解して実装する【図解たっぷりBootstrap5入門】

吉田先生

Webサイト、特にWebアプリケーションではユーザーに情報を与えることは重要です。
例えば「ログインに成功しました」などの情報がないとユーザーは困ってしまいますよね。

アラートとは

アラートとは、警告や処理の結果を表示するためのものです。

例えば、ログインした人だけが見られるページがあったとします。
その時、「ログインしてください」や「パスワードが間違っている為ログイン出来ませんでした」というアラートを見た事がないでしょうか？

このように、ユーザーに通知を行いたい内容がある時に、アラートが使われます。

Bootstrapのアラートは、componentsに含まれています。
https://getbootstrap.jp/docs/5.0/components/alerts/

一番上、Examplesのアラートはずっと表示されっぱなし。
ずっと表示されたままなので、ユーザーにとってはちょっと邪魔かもしれません。

右サイドバーから「Dismissing」を見てみてください。
これは、閉じる機能とその為のボタンが用意されているアラートです。

もう少し詳しく、アラート（テンプレートコード）の構造を確認してみましょう。

アラートには、JavaScriptが使われていたり、今までと比べ少し複雑な構造になっているかもしれません。
しかし、カスタマイズするとしたらカラーの部分とテキスト部分くらいですので、その場所が分かれば大丈夫です。

カスタマイズの仕方を見てみましょう。

まず、カラーの変更です。
Bootstrapで用意されている以下イメージの８種類の配色から選びます。

上図イメージ内の「an example link」という部分は、リンクになっています。

アラートの配色とリンクの色に違和感が出ないよう、アラート内リンク用のCSSクラス「alert-link」が用意されています。
アラート内にリンクを張る場合は、このクラスを使用しましょう。

次に、見出しや線です。
アラート内では、リンクの他にも見出しや線を使用する事が出来るのです。
「alert-link」クラスと同様に、その為のCSSクラスも用意されています（見出しのみ）。

では、alert.htmlを作成して、アラートを実装してみましょう。

https://getbootstrap.jp/docs/5.0/components/alerts/を参考に、下記のアラートを作ってみてください。

【見本】

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る