通知バナー

CoddyのHTMLジャーニー「実践的フロントエンド」セクションの一部。レッスン 24/35。

通知バナーは、成功メッセージ、警告、エラーなどの重要な情報をユーザーに知らせます。通常、ページの上部または下部に表示されます。次のような用途で使われているのを見たことがあるでしょう。

成功メッセージ（例：「プロフィールが正常に更新されました。」）
エラーメッセージ（例：「問題が発生しました。もう一度お試しください。」）
情報アラート（例：「プライバシーポリシーを更新しました。」）

シンプルな通知バナーを作成しましょう。基本的なコンテナから始めます。

<div class="notification">
  This is a notification message!
</div>

目立つようにスタイルを追加しましょう。

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

これにより、白い文字の緑色の通知バナーが作成されます。

チャレンジ

簡単

通知バナーのHTMLが与えられています。実際の成功メッセージのように見えるよう、スタイルを設定しましょう。

課題：

display: flexとalign-items: centerを使って、アイコンとテキストを横に並べます。
バナーの内側にパディングを追加して、読みやすくします。
成功通知なので、バナーの背景を緑色（#4CAF50）にし、テキストを白色にします。
角を丸くします。
バナーに奥行きを加えるため、ボックスシャドウを追加します。
margin-rightを使って、アイコンとテキストの間に余白を追加します。
font-size: 18pxを使って、アイコンを少し大きくします。

目標：左側にチェックマークのアイコン、右側にテキストがある、すっきりとした成功メッセージのようなバナーにします。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Notification Banners</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    
    .notification {
    
    }
    
    .notification_icon {
        
    }
  </style>
</head>
<body>
  <div class="notification notification--success">
    <span class="notification_icon">✓</span>
    <div class="notification_message">Your changes have been saved successfully!</div>
  </div>
</body>
</html>