ウェブサービスに使えるメッセージボックスのCSSスタイル4種
May 23, 2008 9:41 AM written by Gen Taguchi

以前「ウェブサービスのアラートメッセージなんかに使える小粋なCSSスタイルまとめ」を紹介しましたが、それに絡めて続編メモということで。

CSS Message Boxes for different message types」なる記事です。ウェブサービスで必要そうな次の4つのメッセージボックスに関するCSSのマークアップを紹介しています。

  • 情報メッセージ
  • msg_info.gif

  • 成功メッセージ
  • msg_success.gif

  • 警告メッセージ
  • msg_warn.gif

  • エラーメッセージ
  • msg_error.gif

実際のマークアップは以下のようになりますね。これにスタイルをつけていくだけです(詳細は元記事参照)。

<div class="info">Info message</div> <div class="success">Successful operation message</div> <div class="warning">Warning message</div> <div class="error">Error message</div>

jQueryとあわせてぼやーんと消したりするとそれっぽいアプリ(謎)になりますね。開発のお供にいかがでしょうか。コーディングの詳細は元記事をご覧ください。

» CSS Message Boxes for different message types

この記事のトラックバックURL (トラックバックは承認後に公開されます)

コメント一覧

コメント投稿 (コメントは承認後に公開されます)

名前
メールアドレス (表示されませんのでご安心を)
URL
情報保存?
コメント
あわせて読みたい

クリエイティブ・コモンズ・ライセンス

ユーザビリティ向上支援ビービット
Usability tested by BeBit

タブブラウザ Sleipnir 公式ページ(上級者向け)

Powered by
MovableType 3.34

人気ブログランキング - idea*idea
ワード
www.flickr.com
This is a Flickr badge showing photos in a set called 自炊生活. Make your own badge here.
Firefox meter