CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでアラートメッセージを作成する方法【サンプルコード付き】

CSSを使えば、シンプルなマークアップと数行のスタイル定義だけで、視認性の高いアラートメッセージ（通知バー）を作成できます。さらに「×」ボタンにJavaScriptのonclickイベントを組み合わせれば、クリック時にメッセージを非表示にする「閉じる」機能も簡単に実装可能です。

以下に、赤い背景の警告メッセージと、ホバー時の色変化を持つ閉じるボタンを実装したコード例を示します。

実装例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .alertMessage {
        padding: 20px;
        background-color: #f44336;
        color: white;
        font-size: 20px;
    }
    .close{
        margin-left: 15px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
    }
    .close:hover {
        color: black;
    }
</style>
</head>
<body>
<h1>Alert Message Example</h1>
<div class="alertMessage">
<span class="close" onclick="this.parentElement.style.display='none';">&times;</span>
<strong>This cannot be revered!</strong> You account will be deleted.
</div>
</body>
</html>

コードのポイント

  • .alertMessageクラス： paddingで内側の余白を確保し、background-color（#f44336）で警告を表す赤い背景、color: whiteで白い文字を指定しています。
  • .closeクラス： float: rightで閉じるボタンを右上に配置し、cursor: pointerでクリックできることを示しています。
  • .close:hover： ボタンにカーソルを合わせると文字色が黒に変化し、transitionプロパティにより滑らかなアニメーション効果が付きます。
  • onclick属性： this.parentElement.style.display='none'によって、クリックされた「×」ボタンの親要素（アラート全体）が非表示になります。

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSでアラートメッセージを作成する方法【サンプルコード付き】
  1. CSSでコールアウトメッセージを作成する方法をわかりやすく解説

    CSSを使えば、画面の隅に表示されるコールアウトメッセージ（通知ボックス）を簡単に作成できます。コールアウトとは、ユーザーの注意を引きつけるためにページ上に表示される小型のポップアップ型メッセージで、お知らせやプロモーション情報などを伝えたい場面でよく活用されています。 以下のコードでは、position: fixed を使用して画面右下に固定表示されるコールアウトを実装しています。右上の閉じるボタン（×）をクリックすると、onclickイベントによってコールアウトが非表示になる仕組みです。 実装例 <!DOCTYPE html> <html> <head>

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>