情報・成功・注意・エラーの4種類のメッセージ枠。色だけに頼らず、アイコンと接頭辞テキストの3重で種類を伝える設計です。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
種類の区別を「色・アイコン・接頭辞テキスト」の3重で伝えるのがこのレシピの核です。色覚特性やモノクロ印刷でも情報が落ちません。roleは重要度で使い分けます: 即時に読み上げてほしい警告・エラーは role="alert"、控えめな通知は role="status"、静的な補足は role="note" です。左辺の太い罫線は視線のアンカーになります。
閉じるボタンを付ける場合はJSで要素を削除し、フォーカスが行き場を失わないよう直前の要素へ戻します。
情報・成功・注意・エラーの4種類のアラートを作ってください。色＋アイコン＋「エラー:」等の接頭辞テキストの3重で種類を伝え、roleをalert/status/noteで適切に使い分けてください。