アラート・モーダル

ーアラート

現行最新版（Bootstrap 5）講座をリリースしました

→Bootstrap 5講座のご受講はこちら

吉田先生

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

• アラート

◎アラート

アラートとは、警告や処理の結果を表示するためのものです。例えば、ログイン機能があったとします。その時、パスワードが間違っている為ログイン出来ませんでした、というアラートを見た事がないでしょうか？このように、ユーザーに通知を行いたい内容がある時に、アラートが使われます。では、基本のアラートを見てみましょう。

これは、画面上部にフェードインで表示されます。そして、ずっと表示されたままでは邪魔ですので、閉じる機能とその為のボタンが用意されています。では、アラートの構造を確認します。

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

まず、カラーの変更です。Bootstrapで用意されている８種類の配色から選びます。以下イメージです。以下イメージ内の「テキストリンク」という部分は、リンクになっています。このアラート内リンクは、アラートの配色とリンクの色に違和感が出ないよう、アラート内リンク用のCSSクラスが用意されています。「alert-link」というクラスです。アラート内にリンクを張る場合は、このクラスを使用しましょう。

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