通知バナー

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;
}

これは、白いテキストの緑色のnotification Bannersを作成します。

チャレンジ

簡単

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

課題：

display: flexとalign-items: centerを使用して、アイコンとテキストを横並びにします。
読みやすくするため、バナーの内側にpaddingを追加します。
バナーに緑色の背景（#4CAF50）を設定し、success notificationであるため、テキストをwhiteにします。
角を丸くします。
バナーに奥行きを持たせるため、box shadowを追加します。
margin-rightを使用して、アイコンとテキストの間に間隔を追加します。
font-size: 18pxを使用して、アイコンを少し大きくします。

目標：バナーが、左側にチェックマークアイコン、右側にテキストがある、すっきりしたsuccess messageのように見えるようにします。

自分で試してみよう

<!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>