CSSのアラートボックス（情報・成功・注意・エラー）
通知の種類、スタイル、閉じられるかどうかを選びます。プレビューにはすべての種類がまとめて表示されます。
使い方大事なお知らせを見逃さない
利用できる言語: 
CSSのアラートボックス（情報・成功・注意・エラー）: 用途
サイトやブログでメッセージを目立たせるボックスを作成します。メンテナンスのお知らせ、注文の確認、セールの期限、フォームのエラー、本文中のヒントなどに使えます。種類、4つのスタイル（左ボーダー、全周ボーダー、塗りつぶし、細線）、角丸、閉じるボタンの有無を選べます。
種類ごとに専用のアイコンとタイトルがあり、色だけに頼らず、文字色も背景に対して十分なコントラストがあります。ヘルプページでは、フォーム送信など操作の後に表示される通知で role="alert" と role="status" をどう使い分けるかを説明しています。
使い方
- 通知の種類にチェックを入れます。
- スタイルと閉じるボタンを選びます。
- HTMLとCSSをコピーします。
使うタイミング
- メンテナンスやセールのお知らせ。
- フォームのメッセージ。
- 記事内のヒントや補足。
よくある質問
role="alert" と role="status" の違いは何ですか？
role="alert" は、スクリーンリーダーが読み上げ中の内容を中断してすぐに通知を読み上げます。フォーム送信の問題など、操作の後に表示されるエラーに向いています。role="status" は中断せずに読み上げ、成功メッセージに向いています。ページを開いた時点で表示されている通知にはどちらも不要で、このツールもそのように出力します。
色だけでは足りないのはなぜですか？
赤と緑を区別できない方やモノクロ画面でサイトを見る方は、色だけでは違いが分かりません。そのため、種類ごとに専用のアイコンとタイトルがあり、文字色も背景に対して十分なコントラストがあります。
フォーム送信後に通知を表示するには？
HTMLに hidden 属性と role="alert"（エラー用）または role="status"（成功用）を付けたボックスを置き、該当のタイミングでJavaScriptから hidden を外します。スクリーンリーダーは、テキストが表示された瞬間に読み上げます。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。