フローティング通知

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 76/76。

チャレンジ

簡単

このチャレンジでは、下の画像（または同様のデザイン）のようなフローティング通知を再現します。これは復習のエクササイズですので、これまでに学んだCSSのポジショニングを応用して、通知とその閉じるボタンを正しく配置してください。

以下の手順に従って、フローティング通知のスタイルを設定してください：

1. 通知ボックスのスタイル設定：

ページの上部付近、だいたい中央に配置します。
固定幅を設定し、内側に余白を追加します。
背景、フォント、ボーダーに任意の色を使用して、はっきりとしたアラートスタイルを作成します。
角を丸くし、わずかな影を付けて目立たせます。

2. 閉じるボタンのスタイル設定：

通知の右上に配置します。
background を選択し、フォントサイズを調整します。
クリック可能に見え、背景から際立つようにします。

💡 色、間隔、配置を工夫して、理想のデザインを実現しましょう！

自分で試してみよう

<html>
    <head>
        <title>Floating Notification</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="notification">
        <button class="close-btn">&times;</button>
        <p>This is a floating notification! Click the "X" to close.</p>
    </div>
    </body>
</html>