# アラート・コールアウト4種のCSS実装

> 情報・成功・注意・エラーの4種類のメッセージ枠。色だけに頼らず、アイコンと接頭辞テキストの3重で種類を伝える設計です。

- カテゴリ: 表示・フィードバック
- URL: https://www.css-dictionary.com/recipes/alert-callout/

## HTML

```html
<div class="alert info" role="note">
  <span class="alert-icon" aria-hidden="true">ℹ</span>
  <p><strong>情報:</strong> 7月30日 2:00〜4:00 にメンテナンスを実施します。</p>
</div>

<div class="alert success" role="status">
  <span class="alert-icon" aria-hidden="true">✓</span>
  <p><strong>成功:</strong> 設定を保存しました。</p>
</div>

<div class="alert warning" role="alert">
  <span class="alert-icon" aria-hidden="true">!</span>
  <p><strong>注意:</strong> ストレージ容量が残り10%です。</p>
</div>

<div class="alert error" role="alert">
  <span class="alert-icon" aria-hidden="true">×</span>
  <p><strong>エラー:</strong> 送信に失敗しました。時間をおいて再試行してください。</p>
</div>
```

## CSS

```css
.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 400px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid;
  border-left-width: 4px; /* 左の太罫が種類の目印 */
  border-radius: 8px;
  font-size: 13px;
}

.alert p {
  margin: 0;
  line-height: 1.7;
}

.alert-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.info {
  border-color: #274a78;
  background: #eef2f7;
  color: #274a78;
}
.info .alert-icon { background: #274a78; }

.success {
  border-color: #4a7c59;
  background: #e6ede4;
  color: #3c6549;
}
.success .alert-icon { background: #4a7c59; }

.warning {
  border-color: #d9a441;
  background: #f8efdb;
  color: #6d5320;
}
.warning .alert-icon { background: #d9a441; color: #1a1712; }

.error {
  border-color: #b0413e;
  background: #fdf3f2;
  color: #97362f;
}
.error .alert-icon { background: #b0413e; }
```

## 仕組みの解説

種類の区別を「色・アイコン・接頭辞テキスト」の3重で伝えるのがこのレシピの核です。色覚特性やモノクロ印刷でも情報が落ちません。roleは重要度で使い分けます: 即時に読み上げてほしい警告・エラーは role="alert"、控えめな通知は role="status"、静的な補足は role="note" です。左辺の太い罫線は視線のアンカーになります。

## 実装のポイント

閉じるボタンを付ける場合はJSで要素を削除し、フォーカスが行き場を失わないよう直前の要素へ戻します。

## AIに依頼するときの文例

情報・成功・注意・エラーの4種類のアラートを作ってください。色＋アイコン＋「エラー:」等の接頭辞テキストの3重で種類を伝え、roleをalert/status/noteで適切に使い分けてください。

## 使っているプロパティ

- [border](https://www.css-dictionary.com/property/border.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [gap](https://www.css-dictionary.com/property/gap.md)
- [color](https://www.css-dictionary.com/property/color.md)