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種

百式ジョブボード（求人情報）
ケータイ会議５参加中！
TwitterCounter
最近のつぶやき
Powered by…

ユーザー中心 ビービット
『IDEA*IDEA』のユーザビリティは、ユーザー中心のウェブサイト構築を手がけるビービット社によって検証・改善されています。

いろいろ

誠Biz.まID Webサービス図鑑
誠Biz.IDの「Webサービス図鑑」を応援中です！

あわせて読みたいブログパーツ
SEO
人気の商品
管理人の著書
Image of はじめてのGTD ストレスフリーの整理術
Image of シャングリラ・ダイエット~全米ベストセラー!「食事制限」なし!「運動」なし!の魔法のダイエット~
Image of 起業・企画・営業・雑談のネタは日常の諦めている不便利から
Image of アイデア×アイデア
Image of ストレスフリーの仕事術―仕事と人生をコントロールする52の法則
最近の写真
いくら！大トロ！しらこ！お刺身！今日の戦利品店長さん高円寺のすごろく屋つぶやけ@akiyanパノラマ連射！パノラマお庭洗った天使や！みんなでさくら手書きスナップ池さくらさくら
モバイル版
最近の記事
カテゴリー別
過去記事一覧

Return to page top