アラート・モーダル

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

• アラート

アラート

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

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

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

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

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

・カラー変更

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

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

・見出しと区切り

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

◆LP制作課題⑥

今回は課題LPページにアラートを追加してみましょう。

ヘッダーナビゲーションの下にアラートが表示されるように作っていきます。 今回のレッスンを参考にに作ってみてください。アラートリンクも使っていきます。