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

アラート・モーダル

ーアラート

吉田先生

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


◎アラート

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

 

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

 

 

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

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

 

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

 

 

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

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

無料講座一覧を見る

×