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

吉田先生

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

アラート

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

では、基本のアラートを見てみましょう。

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

では、アラートの構造を確認します。

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

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

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

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

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

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

Alerts-Bootstrapを参考に、上記の解説でも登場した閉じるボタン付きの「Dismissing」と「Additional content」項目で紹介されている見出し付きのアラート、２つを作ってみてください。