通知バナー

CoddyのHTMLジャーニー「Practical Frontend」セクションの一部 — レッスン 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 を使用して、アイコンとテキストを横並びに配置します。
バナーの内側に padding を追加して、読みやすくします。
成功通知なので、バナーに緑色の背景 (#4CAF50) を設定し、テキストを白にします。
角を丸くします。
バナーに奥行きを出すために box shadow を追加します。
margin-right を使用して、アイコンとテキストの間に間隔を空けます。
font-size: 18px を指定して、アイコンを少し大きくします。

目標： 左側にチェックマークアイコン、右側にテキストが配置された、クリーンな成功メッセージのようなバナーを作成してください。

チートシート

通知バナーは、成功メッセージ、警告、エラーなどの重要な情報をユーザーに知らせます。通常、ページの上部または下部に表示されます。

基本的な通知バナーを作成します：

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

通知バナーのスタイルを設定します：

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

アイコン付きのバナーの場合は、flexboxを使用してコンテンツを整列させます：

.notification {
  display: flex;
  align-items: center;
}

ボックスシャドウと要素間の間隔を追加して、奥行きを出します：

.notification {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.notification .icon {
  margin-right: 10px;
  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>