Home > 便利ツール > ウェブサービスに使えるメッセージボックスのCSSスタイル4種

ウェブサービスに使えるメッセージボックスのCSSスタイル4種

以前「ウェブサービスのアラートメッセージなんかに使える小粋な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

@taguchiをフォロー!
Twitterもやっています!
Posted on May 23rd, 2008 and last modified on August 4th, 2009.

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.ideaxidea.com/archives/2008/05/css4.html/trackback
Listed below are links to weblogs that reference
ウェブサービスに使えるメッセージボックスのCSSスタイル4種 from IDEA*IDEA ~ 百式管理人のライフハックブログ

Home > 便利ツール > ウェブサービスに使えるメッセージボックスのCSSスタイル4種

最近の記事
カテゴリー別
過去記事一覧

Return to page top