通知バナー
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>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
実践的フロントエンドのすべてのレッスン
自分で練習してみよう: Webプレイグラウンド