フォームを送信した後の「送信が完了しました」や、入力ミスを知らせる「もう一度ご確認ください」といったメッセージ。

こうした案内は、色や形を工夫するだけで、内容の伝わりやすさが大きく変わります。
この記事では、コピペするだけで使えるお知らせ・アラートボックスを20個まとめました。

成功、エラー、注意、案内など、場面に応じたデザインを幅広く用意しています。カード・見出し・フォームパーツの記事と同じく、HTMLとCSSを分けて掲載しています。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。

続いて、HTMLのコードを、メッセージを表示したい場所に貼り付けます。閉じるボタンが付いたデザイン（07番など）は、見た目のボタンのみを用意しています。

実際にクリックで非表示にするには、ごく簡単なJavaScriptを別途追加する必要があります。

01. シンプル成功メッセージ

薄い緑の背景で、処理が成功したことを伝える基本形です。

実際の見た目

HTMLコード

<div class="kts-alert01">送信が完了しました。</div>

CSSコード

.kts-alert01 { width: 300px; padding: 12px 16px; background: #E9F7EF; color: #1E7A44; border-radius: 6px; font-size: 14px; font-family: sans-serif; }

02. シンプルエラーメッセージ

薄い赤の背景で、エラーが起きたことを伝える基本形です。

実際の見た目

HTMLコード

<div class="kts-alert02">入力内容にエラーがあります。</div>

CSSコード

.kts-alert02 { width: 300px; padding: 12px 16px; background: #FDECEC; color: #C0392B; border-radius: 6px; font-size: 14px; font-family: sans-serif; }

03. 警告メッセージ

薄い黄色の背景で、注意を促すためのメッセージです。

実際の見た目

HTMLコード

<div class="kts-alert03">保存されていない変更があります。</div>

CSSコード

.kts-alert03 { width: 300px; padding: 12px 16px; background: #FFF6DD; color: #8A6D00; border-radius: 6px; font-size: 14px; font-family: sans-serif; }

04. 情報メッセージ

薄い青の背景で、参考情報や補足を伝えるメッセージです。

実際の見た目

HTMLコード

<div class="kts-alert04">こちらの内容は毎月1日に更新されます。</div>

CSSコード

.kts-alert04 { width: 300px; padding: 12px 16px; background: #EAF2FE; color: #1D5FAD; border-radius: 6px; font-size: 14px; font-family: sans-serif; }

05. アイコン付き成功メッセージ

チェックマークのアイコンを添えて、成功をより伝わりやすくした形です。

実際の見た目

HTMLコード

<div class="kts-alert05"><span aria-hidden="true">✓</span>予約が確定しました。</div>

CSSコード

.kts-alert05 { width: 300px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #E9F7EF; color: #1E7A44; border-radius: 6px; font-size: 14px; font-family: sans-serif; } .kts-alert05 span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #1E7A44; color: #fff; border-radius: 50%; font-size: 12px; flex-shrink: 0; }

06. アイコン付きエラーメッセージ

×アイコンを添えて、エラーであることをより伝わりやすくした形です。

実際の見た目

HTMLコード

<div class="kts-alert06"><span aria-hidden="true">!</span>必須項目が未入力です。</div>

CSSコード

.kts-alert06 { width: 300px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #FDECEC; color: #C0392B; border-radius: 6px; font-size: 14px; font-family: sans-serif; } .kts-alert06 span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #C0392B; color: #fff; border-radius: 50%; font-size: 12px; flex-shrink: 0; font-weight: 700; }

07. 閉じるボタン付きアラート

右側に×ボタンを添えた、閉じられることを示すアラートです。

実際の見た目

HTMLコード

<div class="kts-alert07"> <span>キャンペーンは今月末までです。</span> <button type="button" aria-label="閉じる">×</button> </div>

CSSコード

.kts-alert07 { width: 300px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: #EAF2FE; color: #1D5FAD; border-radius: 6px; font-size: 14px; font-family: sans-serif; } .kts-alert07 button { border: none; background: none; color: #1D5FAD; font-size: 16px; cursor: pointer; line-height: 1; }

08. 左アクセント線のアラート

左側に太い色の線を添えた、落ち着いた印象のアラートです。

実際の見た目

HTMLコード

<div class="kts-alert08">パスワードは3か月ごとに変更してください。</div>

CSSコード

.kts-alert08 { width: 300px; padding: 12px 16px; background: #F9FAFB; border-left: 4px solid #3F8CFF; color: #333; font-size: 14px; font-family: sans-serif; }

09. トースト通知風メッセージ

画面の隅に浮かぶような影を付けた、通知風の見た目です。

実際の見た目

HTMLコード

<div class="kts-alert09"><span aria-hidden="true">✓</span>変更を保存しました</div>

CSSコード

.kts-alert09 { width: 260px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #1F2933; color: #fff; border-radius: 8px; font-size: 13px; font-family: sans-serif; box-shadow: 0 8px 20px rgba(0,0,0,0.25); } .kts-alert09 span { color: #4CE0D2; font-weight: 700; }

10. バナー型のお知らせ（全幅）

ページの上部に帯のように表示する、全幅タイプのお知らせです。

実際の見た目

HTMLコード

<div class="kts-alert10">ただいまメンテナンス中です。ご不便をおかけします。</div>

CSSコード

.kts-alert10 { width: 100%; max-width: 500px; padding: 12px 20px; background: #1F2933; color: #fff; text-align: center; font-size: 13px; font-family: sans-serif; }

11. ダークテーマのアラート

暗い背景に合わせた配色の、控えめな注意メッセージです。

実際の見た目

HTMLコード

<div class="kts-alert11">この操作は取り消せません。</div>

CSSコード

.kts-alert11 { width: 300px; padding: 12px 16px; background: #2E343B; border: 1px solid #454C54; color: #F4C97B; border-radius: 6px; font-size: 14px; font-family: sans-serif; }

12. グラデーション背景のお知らせ

背景にグラデーションを敷いた、目を引くタイプのお知らせです。

実際の見た目

HTMLコード

<div class="kts-alert12">期間限定キャンペーン実施中！</div>

CSSコード

.kts-alert12 { width: 300px; padding: 14px 18px; background: linear-gradient(135deg, #6C63FF, #3F8CFF); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; font-family: sans-serif; }

13. アイコンが点滅する注意バッジ

アイコン部分がゆっくり点滅して、注意を引くメッセージです。

実際の見た目

HTMLコード

<div class="kts-alert13"><span class="dot" aria-hidden="true"></span>まもなく受付終了です</div>

CSSコード

.kts-alert13 { width: 260px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #FDECEC; color: #C0392B; border-radius: 6px; font-size: 14px; font-family: sans-serif; } .kts-alert13 .dot { width: 10px; height: 10px; background: #C0392B; border-radius: 50%; animation: kts-blink 1.2s infinite; flex-shrink: 0; } @keyframes kts-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

14. 進行状況ラベル

「処理中」のような、作業の途中を示すラベル型メッセージです。

実際の見た目

HTMLコード

<div class="kts-alert14"><span class="spinner" aria-hidden="true"></span>データを読み込んでいます…</div>

CSSコード

.kts-alert14 { width: 240px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #F1F3F5; color: #444; border-radius: 999px; font-size: 13px; font-family: sans-serif; } .kts-alert14 .spinner { width: 14px; height: 14px; border: 2px solid #C7CDD3; border-top-color: #3F8CFF; border-radius: 50%; animation: kts-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes kts-spin { to { transform: rotate(360deg); } }

15. 吹き出し型ヒントメッセージ

三角形のしっぽを添えて、特定の要素を指すように見せる形です。

実際の見た目

HTMLコード

<div class="kts-alert15">ここから設定を変更できます</div>

CSSコード

.kts-alert15 { position: relative; width: 220px; padding: 10px 14px; background: #1F2933; color: #fff; border-radius: 8px; font-size: 13px; font-family: sans-serif; } .kts-alert15::after { content: ""; position: absolute; top: -8px; left: 24px; border-width: 0 7px 8px; border-style: solid; border-color: transparent transparent #1F2933; }

16. 期限お知らせメッセージ

期日を強調して表示する、締め切り案内向けのメッセージです。

実際の見た目

HTMLコード

<div class="kts-alert16">お申し込み締切：<strong>10月15日（水）</strong></div>

CSSコード

.kts-alert16 { width: 300px; padding: 12px 16px; background: #FFF6DD; color: #6B5200; border-radius: 6px; font-size: 14px; font-family: sans-serif; } .kts-alert16 strong { color: #C0392B; }

17. リンク付きアラート

「詳しくはこちら」のようなリンクを添えた案内メッセージです。

実際の見た目

HTMLコード

<div class="kts-alert17">新機能を追加しました。<a href="#">詳しくはこちら</a></div>

CSSコード

.kts-alert17 { width: 300px; padding: 12px 16px; background: #EAF2FE; color: #1D5FAD; border-radius: 6px; font-size: 14px; font-family: sans-serif; } .kts-alert17 a { color: #1D5FAD; font-weight: 700; margin-left: 6px; }

18. 複数行の詳細説明付きアラート

見出しと本文を分けて、詳しい説明を添えられる形です。

実際の見た目

HTMLコード

<div class="kts-alert18"> <p class="title">メンテナンスのお知らせ</p> <p class="desc">10月20日 2:00〜5:00の間、サービスをご利用いただけません。</p> </div>

CSSコード

.kts-alert18 { width: 300px; padding: 14px 16px; background: #F9FAFB; border: 1px solid #E4E4E4; border-radius: 8px; font-family: sans-serif; } .kts-alert18 .title { font-size: 14px; font-weight: 700; color: #1F2933; margin: 0 0 4px; } .kts-alert18 .desc { font-size: 13px; color: #666; margin: 0; }

19. 影付きの立体的アラート

軽い影を付けて、背景から浮き上がって見えるアラートです。

実際の見た目

HTMLコード

<div class="kts-alert19"><span aria-hidden="true">★</span>新着レビューが届きました</div>

CSSコード

.kts-alert19 { width: 280px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #fff; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,0.1); font-size: 14px; color: #1F2933; font-family: sans-serif; } .kts-alert19 span { color: #FFB020; }

20. 背景なしのミニマルお知らせ

背景を付けず、アイコンとテキストだけで伝える控えめな形です。

実際の見た目

HTMLコード

<div class="kts-alert20"><span aria-hidden="true">ℹ</span>価格は税込表示です。</div>

CSSコード

.kts-alert20 { display: flex; align-items: center; gap: 8px; color: #8A94A0; font-size: 13px; font-family: sans-serif; } .kts-alert20 span { color: #3F8CFF; font-weight: 700; }

カスタマイズの小ワザ

• 07番のような閉じるボタンは見た目のみです。クリックで非表示にするには、要素を削除・非表示にするJavaScriptを数行加えてください。
• 13番の点滅や14番のスピナーは、CSSのanimationだけで動いており、JavaScriptは不要です。
• 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。成功は緑系、エラーは赤系など、色の意味は変えない方が伝わりやすくなります。
• 18番のように見出しと本文がある形は、HTMLの構造ごとコピーしてください。
• 背景色と文字色のコントラストが十分か、実際のサイトの背景で見え方を確認してください。

まとめ｜早見表

場面	該当するアラート
成功を伝える	01, 05, 09, 19
エラー・警告を伝える	02, 03, 06, 13
補足・案内をする	04, 08, 15, 17, 20
目立たせたい告知	07, 10, 12, 16
処理中・状態を示す	14
詳しい説明を添える	18
落ち着いたトーン	11

20個のアラートは、成功・エラー・注意・案内など、伝えたい内容に応じて使い分けられる。色の意味を統一しておくことで、読み手に直感的に伝わりやすくなる。