フローティング通知

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

チャレンジ

簡単

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

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

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

ページの上部、だいたい中央あたりに配置します。
固定幅を設定し、内側に余白を追加します。
背景、フォント、ボーダーに好きな色を使用して、区別しやすいアラートスタイルを作成します。
角を丸くし、かすかな影を追加して際立たせます。

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

position: absolute を使用して、閉じるボタンを通知コンテナの右上隅に配置します。
背景を選択し、フォントサイズを調整します。
クリック可能に見え、背景から目立つようにします。

💡 色、余白、配置をいろいろ試して、思い通りのデザインに仕上げましょう！

自分で試してみよう

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