アラート Alert
ユーザーに重要な情報を伝えるための目立つ通知バナー。
ライブデモ
お知らせ
システムメンテナンスを明日実施します。
成功
データが正常に保存されました。
警告
ストレージの残量が少なくなっています。
エラー
接続に失敗しました。再試行してください。
ソースコード
<div class="demo-alerts">
<div class="demo-alert demo-alert-info" role="alert">
<span class="demo-alert-icon">ℹ</span>
<div class="demo-alert-content">
<strong>お知らせ</strong>
<p>システムメンテナンスを明日実施します。</p>
</div>
<button class="demo-alert-close" aria-label="閉じる">×</button>
</div>
<div class="demo-alert demo-alert-success" role="alert">
<span class="demo-alert-icon">✓</span>
<div class="demo-alert-content">
<strong>成功</strong>
<p>データが正常に保存されました。</p>
</div>
<button class="demo-alert-close" aria-label="閉じる">×</button>
</div>
<div class="demo-alert demo-alert-warning" role="alert">
<span class="demo-alert-icon">⚠</span>
<div class="demo-alert-content">
<strong>警告</strong>
<p>ストレージの残量が少なくなっています。</p>
</div>
<button class="demo-alert-close" aria-label="閉じる">×</button>
</div>
<div class="demo-alert demo-alert-error" role="alert">
<span class="demo-alert-icon">✕</span>
<div class="demo-alert-content">
<strong>エラー</strong>
<p>接続に失敗しました。再試行してください。</p>
</div>
<button class="demo-alert-close" aria-label="閉じる">×</button>
</div>
</div>.demo-alerts { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.demo-alert {
display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
border-radius: 10px; border-left: 4px solid; animation: demo-alert-in 0.3s ease-out;
}
.demo-alert-info {
background: color-mix(in srgb, var(--ui-primary) 8%, #fff);
border-left-color: var(--ui-primary); color: var(--ui-primary);
}
.demo-alert-success { background: #f0fdf4; border-left-color: #22c55e; color: #16a34a; }
.demo-alert-warning { background: #fffbeb; border-left-color: #f59e0b; color: #d97706; }
.demo-alert-error { background: #fef2f2; border-left-color: #ef4444; color: #dc2626; }
.demo-alert-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.demo-alert-content { flex: 1; }
.demo-alert-content strong { display: block; font-size: 13px; margin-bottom: 2px; }
.demo-alert-content p { margin: 0; font-size: 13px; opacity: 0.85; }
.demo-alert-close {
background: none; border: none; font-size: 18px; cursor: pointer;
opacity: 0.5; line-height: 1; padding: 0; color: inherit;
}
.demo-alert-close:hover { opacity: 1; }
@keyframes demo-alert-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }document.querySelectorAll('.demo-alert-close').forEach(btn => {
btn.addEventListener('click', function() {
const alert = this.closest('.demo-alert');
alert.style.opacity = '0';
alert.style.transform = 'translateY(-8px)';
alert.style.transition = 'opacity 0.2s, transform 0.2s';
setTimeout(() => alert.remove(), 200);
});
});AIプロンプト
Basic
アラートバナーをHTML/CSSで作ってください。成功・エラー・警告・お知らせの4種類のスタイルがあります。
Custom
以下の仕様でアラートを実装してください。 - 4種類：info（青）、success（緑）、warning（黄）、error（赤） - プライマリカラー: #2563eb（infoタイプ） - 左側にアイコン + カラーバー - 閉じるボタン（×）付き - フェードイン/アウトアニメーション - タイトル + 説明文の2行構成
Advanced
アクセシビリティ対応のアラートシステムを実装してください。
- role="alert" + aria-live="assertive"（エラー） / "polite"（info）
- 自動閉じ機能（info, successのみ、5秒後）
- キーボードでの閉じ操作
- アラートのスタック管理
- プログラマティックAPI（alert.show({type, message})）
- アクションボタン付き（「元に戻す」「再試行」など）
- レスポンシブ対応（モバイルではフル幅）
- prefers-color-scheme対応（ダークモード）