Bootstrap 5 モーダルの使用方法

必要なファイルの読み込み: Bootstrap 5 を使用するためには、まず必要なファイルを読み込む必要があります。以下のコードを <head> セクションに追加してください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

モーダルの基本的な構造: モーダルを作成するには、以下のような基本的な構造を持つ HTML 要素を作成します。

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- モーダルのコンテンツをここに追加 -->
    </div>
  </div>
</div>

モーダルのトリガーの作成: モーダルを表示するためのトリガー（ボタンやリンクなど）を作成します。以下の例では、ボタンを使用してモーダルを表示する方法を示しています。

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">
  モーダルを開く
</button>

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>モーダルの本文</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存する</button>
      </div>
    </div>
  </div>
</div>

これらのステップに従って Bootstrap 5 モーダルを作成しました。モーダルの表示やデザインをカスタマイズするには、Bootstrap のドキュメントや公式ウェブサイトを参照してください。