情報コールアウト（注意/警告/成功）
info / warning / success / error の 4 種類の通知ボックス。左の縦帯と色アイコンで視認性高く、記事内の補足に最適。
解説
コールアウトは、記事や管理画面の中で補足・注意・成功・エラーといった情報を色分けして目立たせる通知ボックスです。このサンプルは info / warning / success / error の4種類を縦に並べ、JavaScript を使わず CSS のみで実装しています。各ボックスは border-left:4px solid の左縦帯と色つきアイコンで種類を一目で見分けられ、種類ごとに帯とアイコンの色を変えるだけでバリエーションが作れます。
こんな場面で役立ちます
- マニュアルやヘルプ記事での「ご注意ください」という補足
- フォーム送信後の成功・失敗メッセージ
- キャンペーンや仕様変更のお知らせ
色は背景・左帯・アイコンの3か所をそろえて変えると統一感が出ます。色だけで意味を伝えると色覚特性のある人に伝わりにくいため、アイコンや「注意」「成功」といった見出し文字を併用するのがアクセシビリティ上のポイントです。エラーなど重要な通知では、role="alert" を付けるとスクリーンリーダーが即座に読み上げます。
よくある質問
4種類以外の色を追加できますか
できます。co--info などの修飾クラスを真似て新しいクラスを作り、border-left の色とアイコンの色を指定すれば、任意の種類を追加できます。背景も薄い同系色にすると見やすくなります。
アイコンは差し替えられますか
差し替えられます。サンプルは文字記号とインライン SVG を使っているので、SVG のパスを別のアイコンに置き換えるだけで見た目を変更できます。外部フォントに依存しないため表示崩れも起きにくいです。