Webサイトにはアラートメッセージが必要な場面がいくつかあります。多くはJavaScriptのアラートを使用して行われていますが、カスタムCSSとJSコードを使って簡単に表現することができます。今回は、フリーで使える10種のアラートメッセージスニペット「10 Free CSS & JS Notification Alert Code Snippets」の紹介です。
ベーシックな表現からPOPなものまで10種類が紹介されています。
詳しくは以下
Colorful "alerts" and "confirms"
警告ダイアログをカラフルに表現してくれるアイテム。予め用意されたカラーの中から選択するだけなので簡単に設定ができ、編集も可能なので好きなカラーに変更も出来ます。
Alert notifications with alertify.js
警告メッセージが右下の隅に表示されるスニペットです。極力、デザインや他の情報の邪魔にならないように表示場所や動きが設定されている点も魅力的です。
Pure css popup box
シンプルでベーシックなアラート表示です。どんなテイストのデザインも邪魔しない表現なので、汎用性も高く使いやすいアイテムです。
アラートメッセージと一言でいっても様々な表現方法があります。ダイアログボックスや警告ウィンドウ、単にメッセージを表示するだけでなく色やアニメーションを加えるなどして、他とは違った表現が可能です。今回紹介したスニペットをベースにカスタマイズしてみるのもいいかもしれませんね。