Web BENTO CSS
カテゴリ一覧
アラート・注意書き

15 / ALERT 12 パーツ

CSSアラート・注意書きデザイン 12選

Q: 閉じるボタンはJavaScriptなしで動きますか？

掲載しているのは見た目のみのサンプルです。実際に閉じる動作が必要な場合は、×ボタンに onclick="this.closest('.bnto-alert-dismiss').remove()" のような1行のJSを追加してください。

Q: このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「4色セット（意味色）」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

コピペで使えるCSSアラート・注意書き枠のサンプル集。お知らせ・注意・エラーを伝える通知ボックスを12種類掲載しています。シャッフルで色のバリエーションを試せて、表示中のプレビューとコードは常に一致するので、気に入ったらそのままコピーしてください。クラス名は .bnto-alert-soft 形式です。

該当するパーツが見つかりませんでした。

保存しました。

ソフト（薄背景＋左罫線）

.bnto-alert-soft {
  display: flex; align-items: center; gap: 11px;
  background: hsl(202 73% 56% / 0.12);
  color: hsl(202 63% 34%);
  border-left: 4px solid hsl(202 73% 56%);
  padding: 13px 16px; border-radius: 12px;
}
.bnto-alert-soft .ic { color: hsl(202 73% 56%); flex: none; display: flex; }

<div class="bnto-alert-soft">
  <span class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span>
  保存しました。
</div>

使い方のコツ

アラート配色の基本は「背景＝薄い色、文字＝濃い同系色、罫線・アイコン＝鮮やかな色」の3点セット。同じ色相で明度だけ変えると統一感が出ます。背景の透明度（/ 0.12）を上げると存在感が増します。

情報：新機能を追加しました

成功：保存が完了しました

注意：残り3日で期限切れ

エラー：送信に失敗しました

4色セット（意味色）

/* 青=情報 / 緑=成功 / 黄=注意 / 赤=エラー */
.bnto-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  font-weight: 700;
}
.bnto-alert-info    { background: hsl(202 80% 94%); color: hsl(202 66% 32%); }
.bnto-alert-success { background: hsl(122 45% 92%); color: hsl(122 40% 28%); }
.bnto-alert-warning { background: hsl(41 100% 92%); color: hsl(38 90% 30%); }
.bnto-alert-error   { background: hsl(6 85% 94%); color: hsl(6 70% 38%); }

<!-- アイコンはお好みのSVGを先頭に -->
<div class="bnto-alert bnto-alert-info">情報：新機能を追加しました</div>
<div class="bnto-alert bnto-alert-success">成功：保存が完了しました</div>
<div class="bnto-alert bnto-alert-warning">注意：残り3日で期限切れ</div>
<div class="bnto-alert bnto-alert-error">エラー：送信に失敗しました</div>

使い方のコツ

共通スタイルを .bnto-alert にまとめ、色だけを修飾クラスで切り替える構成。色は世界共通の慣習に合わせているので変えずに使うのがおすすめ。「情報：」のような文言も添えると、色が判別しづらい人にも伝わります。

完了しました。

左ボーダー（白カード）

.bnto-alert-bar {
  display: flex; align-items: center; gap: 11px;
  background: #fff; color: #2A2622;
  border-left: 5px solid hsl(119 31% 51%);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 13px 16px; border-radius: 12px;
}
.bnto-alert-bar .ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: hsl(119 31% 51% / 0.14); color: hsl(119 31% 51%);
  display: flex; align-items: center; justify-content: center;
}

<div class="bnto-alert-bar">
  <span class="ic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
    <path d="M20 6 9 17l-5-5"/></svg></span>
  完了しました。
</div>

使い方のコツ

白背景＋影で「浮いたカード」風になるため、色付きの背景セクションでも読みやすいのが特長。左罫線の太さ（5px）を変えると印象が引き締まります。

エラーが発生しました

塗りつぶし

.bnto-alert-filled {
  display: flex; align-items: center; gap: 11px;
  background: hsl(12 71% 59%); color: #fff;
  padding: 13px 16px; border-radius: 12px;
}
.bnto-alert-filled svg { flex: none; }

<div class="bnto-alert-filled">
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
  エラーが発生しました
</div>

使い方のコツ

最も強い警告向け。エラーなど「絶対に見落とされたくない」場面に限定して使い、ページに1つまでにすると効果が保てます。JSで動的に表示する場合は role="alert" を付けるとスクリーンリーダーにも即時通知されます。

確認してください

アウトライン

.bnto-alert-outline {
  display: flex; align-items: center; gap: 11px;
  background: #fff; color: hsl(41 90% 30%);
  border: 2px solid hsl(41 100% 50%);
  padding: 13px 16px; border-radius: 12px;
}
.bnto-alert-outline .ic { color: hsl(41 100% 50%); flex: none; display: flex; }

<div class="bnto-alert-outline">
  <span class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
    <path d="M12 9v4"/><path d="M12 17h.01"/></svg></span>
  確認してください
</div>

使い方のコツ

背景を塗らないぶん圧が弱く、本文になじみやすいスタイル。文字色は枠線と同系色の濃い色にすると、白背景でもコントラスト比を確保しやすくなります。

送信が完了しました

アイコン丸

.bnto-alert-icon {
  display: flex; align-items: center; gap: 11px;
  background: hsl(122 39% 49% / 0.12);
  color: hsl(122 29% 27%);
  padding: 12px 14px; border-radius: 12px;
}
.bnto-alert-icon .ic {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: hsl(122 39% 49%); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

<div class="bnto-alert-icon">
  <span class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
    <path d="M20 6 9 17l-5-5"/></svg></span>
  送信が完了しました
</div>

使い方のコツ

丸背景でアイコンを強調するスタイル。アイコンは .ic の中に入れれば自動で中央に収まります。用途で色を変えると伝わりやすく：情報＝青／成功＝緑／注意＝黄／エラー＝赤が定番です。

アップデートのお知らせ

新しいエディタ機能が利用できるようになりました。

タイトル付き

.bnto-alert-titled {
  background: hsl(345 76% 56% / 0.12);
  color: hsl(345 64% 32%);
  padding: 14px 16px; border-radius: 14px;
}
.bnto-alert-titled .tt {
  display: flex; align-items: center; gap: 8px;
  font-weight: 900; margin: 0 0 4px;
}
.bnto-alert-titled .tt svg { color: hsl(345 76% 56%); flex: none; }
.bnto-alert-titled p { margin: 0; font-size: .92em; opacity: .85; }

<div class="bnto-alert-titled">
  <div class="tt"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>アップデートのお知らせ</div>
  <p>新しいエディタ機能が利用できるようになりました。</p>
</div>

使い方のコツ

見出し＋本文の2段構成なので、説明が長めの注意書きに向いています。本文が複数行になる場合は p に line-height: 1.8; を足すと読みやすくなります。

変更を保存しました

閉じるボタン付き

.bnto-alert-dismiss {
  display: flex; align-items: center; gap: 11px;
  background: hsl(150 58% 44% / 0.14);
  color: hsl(150 48% 26%);
  padding: 13px 16px; border-radius: 12px;
}
.bnto-alert-dismiss .x {
  margin-left: auto; flex: none; cursor: pointer;
  font-size: 18px; line-height: 1; opacity: .55;
}
.bnto-alert-dismiss .x:hover { opacity: 1; }

<!-- 実際に閉じるにはJSを1行：onclick="this.closest('.bnto-alert-dismiss').remove()" -->
<div class="bnto-alert-dismiss">
  変更を保存しました
  <span class="x">×</span>
</div>

使い方のコツ

× は margin-left: auto; で右端に寄せています。実際に閉じたい場合は span を <button> に変えて onclick="this.closest('.bnto-alert-dismiss').remove()" を付けるだけで動きます。

新しい通知が届きました

トースト風

.bnto-alert-toast {
  display: inline-flex; align-items: center; gap: 11px;
  background: #fff; color: #2A2622;
  padding: 13px 18px; border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.bnto-alert-toast .ic { color: hsl(202 73% 56%); flex: none; display: flex; }
/* 画面右下に固定して使う場合 */
.bnto-alert-toast.is-fixed { position: fixed; right: 16px; bottom: 16px; }

<div class="bnto-alert-toast">
  <span class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
    <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg></span>
  新しい通知が届きました
</div>

使い方のコツ

大きめの影で「浮いた通知」を演出。画面隅に出すときは .is-fixed を併用してください。JSで動的に挿入する場合は role="alert" を付けると支援技術にも読み上げられます。

キャンペーンは6月30日までです

トップバー（バナー）

.bnto-alert-top {
  display: flex; align-items: center; gap: 10px;
  background: hsl(330 60% 54% / 0.12);
  color: hsl(330 52% 32%);
  border-top: 4px solid hsl(330 60% 54%);
  padding: 12px 16px;
  border-radius: 0 0 12px 12px;
}
.bnto-alert-top .ic { color: hsl(330 60% 54%); flex: none; display: flex; }

<div class="bnto-alert-top">
  <span class="ic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span>
  キャンペーンは6月30日までです
</div>

使い方のコツ

上辺のみ罫線＋下だけ角丸で「ページ上部に貼り付いたバナー」の見た目になります。記事の途中に置く場合は border-radius を四隅同じ値に戻すと自然です。

ヒント：あとで変更できます

破線メモ

.bnto-alert-dashed {
  display: flex; align-items: center; gap: 11px;
  background: #fff; color: hsl(230 52% 36%);
  border: 2px dashed hsl(230 62% 58%);
  padding: 13px 16px; border-radius: 12px;
}
.bnto-alert-dashed .ic { color: hsl(230 62% 58%); flex: none; display: flex; }

<div class="bnto-alert-dashed">
  <span class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span>
  ヒント：あとで変更できます
</div>

使い方のコツ

破線は「必須ではない補足情報」の合図として使うと本文と区別しやすくなります。破線の間隔を変えたいときは border の代わりに outline: 2px dashed; ＋ outline-offset も試してみてください。

新着メッセージがあります

グラデーション

.bnto-alert-gradient {
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(120deg, hsl(202 47% 56%), hsl(256 47% 56%));
  color: #fff;
  padding: 13px 16px; border-radius: 12px;
}
.bnto-alert-gradient svg { flex: none; }

<div class="bnto-alert-gradient">
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  新着メッセージがあります
</div>

使い方のコツ

華やかなので新着・キャンペーン等のポジティブな告知向き。エラー表示には不向きです。文字は白固定のため、グラデの2色はどちらも明度60%以下にするとコントラストを確保できます。

CSSアラート・注意書きデザインの基礎知識

アラート（注意書き・お知らせ枠）は、ユーザーに重要な情報を見落とさせないための UI パーツです。フォームの送信結果、期限の告知、操作前の警告など、本文とは区別して目に留まらせたい情報を枠で囲んで表示します。このページでは、CSSの注意書き枠をコピペだけで使えるアラートデザインを12種類掲載しています。すべて画像不要のピュアCSSなので軽量で、色の変更も自由自在です。

アラートデザインのCSSで最も大切なのは色による意味分けです。「青＝情報・緑＝成功・黄＝注意・赤＝エラー」は世界的に定着した慣習で、ユーザーは色を見た瞬間にメッセージの重要度を判断します。実装はCSSタブのコードをスタイルシートへ、HTMLタブのコードをページへ貼り付けるだけ。クラス名は .bnto-alert-〇〇 形式の独自プレフィックス付きで、既存のCSSと衝突しにくくなっています。

色だけに頼らずアイコン＋文言で伝える（色覚多様性への配慮）

色の区別がつきにくいユーザーにとって、色だけの意味分けは伝わらないことがあります。チェックマークや警告三角のアイコン、「エラー：」「注意：」といった文言を併記すれば、色に依存せず誰にでも意図が伝わります。掲載パーツの多くにインラインSVGアイコンを含めているので、そのまま活用してください。

ブログの注意書き枠としての使い方

アラートは記事内の「補足ボックス」としても定番です。ソフト型や破線メモ型は本文の流れを邪魔しない控えめな見た目なので、ポイント解説や免責事項の枠にぴったり。WordPressならテーマの追加CSSにコードを貼り、HTMLブロックでクラスを指定するだけで使えます。

role="alert" の使いどころ

role="alert" を付けた要素は、JSで動的に表示された瞬間にスクリーンリーダーが読み上げます。フォームエラーやトースト通知など「あとから出現する」アラートに付けるのが正しい使い方で、最初からページに書いてある静的な注意書きには不要です。

よくある質問

コピーしたアラートのコードはそのまま使えますか？

はい。CSSタブのコードをスタイルシートに、HTMLタブのコードをページに貼り付けるだけで表示されます。クラス名はすべて bnto- で始まる独自プレフィックス付きなので、既存のスタイルと衝突しにくい設計です。

情報・成功・注意・エラーで色を使い分けるには？

一般的な慣習は「青＝情報・緑＝成功・黄＝注意・赤＝エラー」です。この配色は「4色セット」のカードにまとめてあります。他のデザインも background・color・border の色を差し替えるだけで、同じ使い分けができます。

閉じるボタンはJavaScriptなしで動きますか？

掲載しているのは見た目のみのサンプルです。実際に閉じる動作が必要な場合は、×ボタンに onclick="this.closest('.bnto-alert-dismiss').remove()" のような1行のJSを追加してください。

商用サイトで利用できますか？

はい、すべてのパーツは商用・個人を問わず無料で利用できます。登録やクレジット表記も不要です。

このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「4色セット（意味色）」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

CSSアラート・注意書きデザイン 12選

ソフト（薄背景＋左罫線）

4色セット（意味色）

左ボーダー（白カード）

塗りつぶし

アウトライン

アイコン丸

タイトル付き

閉じるボタン付き

トースト風

トップバー（バナー）

破線メモ

グラデーション

CSSアラート・注意書きデザインの基礎知識

色だけに頼らずアイコン＋文言で伝える（色覚多様性への配慮）

ブログの注意書き枠としての使い方

role="alert" の使いどころ

よくある質問

関連カテゴリ