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

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種

百式ジョブボード(求人情報）
Goodies
あわせて読みたいブログパーツ
SEO
人気の商品
TwitterCounter
ケータイ会議４
最新の投稿
アーカイブ
カテゴリー別
イベント情報

Return to page top