(Sample)

以下は閉じるボタンを使ってアラートボックスを閉じるサンプルです。

Bootstrap5を使っています。

<!DOCTYPE html>
<html>
    <head>
        <title>alerts-that-can-be-closed.html</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>
    <body>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            このアラートは右端の閉じるボタンで閉じることができます。
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

ポイントは以下のクラスです。

<div class="alert alert-danger alert-dismissible fade show" role="alert">

1. alert-dismissible

  • 役割: アラートを閉じることができるようにします。
  • 効果: アラート要素に閉じるボタン（×）が表示され、ユーザーがそのボタンをクリックするとアラートが非表示になります。閉じるボタンはJavaScriptと連携して動作します。

2. fade

  • 役割: アニメーション効果を追加します。
  • 効果: 要素が表示される際や非表示になる際に、フェードイン・フェードアウトのアニメーション効果が適用されます。alert-dismissibleクラスと組み合わせて使用することが一般的です。

3. show

  • 役割: アラートを表示するためのクラスです。
  • 効果: アラートを即座に表示します。fadeクラスと併用することで、フェードインアニメーションが適用されます。

4. role="alert"

  • 役割: ARIAロール属性で、要素をアラートとしてスクリーンリーダーに通知します。
  • 効果: アクセシビリティを向上させ、視覚障害を持つユーザーがこの要素がアラートであることを認識できるようにします。
Webアプリケーション制作のための小ネタ集　目次に戻る