aria-hidden

html bootstrap5 Sample

js アラートを閉じるボタンでしか消えないモーダル:data-bs-backdrop


  <button type="button" class="btn btn-primary" data-bs-toggle="modal"
      data-bs-target="#staticBackdropLive">×でしか閉じないモーダル</button>
  
      <div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>I will not close if you click outside me. Don't even try to press escape key.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Understood</button>
        </div>
      </div>
    </div>
  </div>

ページネーションにアイコンを使用する:«


  <nav>
    <!-- 記号を使用した場合は、aria-labelやvisually-hiddenで視覚者支援をする -->
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#" aria-label="前へ">
          <span aria-hidden="true">«</span><span class="visually-hidden">前へ</span></a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#" aria-label="次へ">
          <span aria-hidden="true">»</span><span class="visually-hidden">次へ</span></a></li>
    </ul>
  </nav>

フォームタイトルのアイコン、水平レイアウト:rowとcolとfa-shopping-basket


formタイトルにfont-awesome

  <!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
  <!-- font-awesomeによるアイコン -->
  <h3 class="block-title-info">
    <i class="fa fa-shopping-basket" aria-hidden="true"></i>formタイトルにfont-awesome
  </h3>
  <div class="row">
    <!-- formのレイアウトにrowcolを利用して、垂直から水平レイアウトに変更する -->
    <!-- 最小単位のセット、勝手に順番に2列で並んでいく -->
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-select">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="mb-3 col-sm-6">
      <!-- クリックするとファイルダイヤログが表示 -->
      <label for="file1">Fileを選択を開く</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">check:</label>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1a" checked />
        <label class="form-check-label" for="check1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1b" />
        <label class="form-check-label" for="check1b">Check B</label>
      </div>
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">radio:</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
        <label class="form-check-label" for="radio1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1b" />
        <label class="form-check-label" for="radio1b">Check B</label>
      </div>
    </div>
  </div>

js インジケータ、タイトル、キャプション付きカルーセル:carousel-indicatorsとdata-bs-slide-to


  <div id="carouselSample" class="carousel slide" data-bs-ride="carousel">
    <!-- インジケーターによるフェード遷移(好きな場所にクリックでいける) -->
    <ol class="carousel-indicators">
      <li data-bs-target="#carouselSample" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#carouselSample" data-bs-slide-to="1"></li>
      <li data-bs-target="#carouselSample" data-bs-slide-to="2"></li>
    </ol>
    <!-- カルーセル部分 -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" slide"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" alt="img"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" alt="img"
          src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
        <div class="carousel-caption d-none d-md-block">
          <h5>スライドタイトル</h5>
          <p>スライドのキャプション</p>
        </div>
      </div>
    </div>
    <!-- コントローラー部分 -->
    <!-- 前と次のアイコン付きカルーセル -->
    <a class="carousel-control-prev" href="#carouselSample" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">前に戻る</span>
    </a>
    <a class="carousel-control-next" href="#carouselSample" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">次に送る</span>
    </a>
  </div>

js データ属性でインターバルの設定:data-bs-interval


  <div class="container">
    <!-- intervalの設定 -->
    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="15000">
      <ol class="carousel-indicators">
        <li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Second slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
        <!-- Third slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
          <div class="carousel-caption">
            <h5>スライドタイトル</h5>
            <p>スライドのキャプション</p>
          </div>
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">次に送る</span>
      </a>
    </div>
  </div>

js データ属性でフェードトランジションの設定:carousel-fade


  <div class="container">
    <!-- スライドの代わりにフェードトランジションでスライドをアニメーションさせる -->
    <div id="carouselExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
      <ol class="carousel-indicators">
        <li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
        <li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
      </ol>
      <!-- カルーセル部分 -->
      <div class="carousel-inner">
        <!-- First slide -->
        <div class="carousel-item active"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
          <div class="carousel-caption">
            <h5>スライドタイトル1</h5>
            <p>スライドのキャプション3</p>
          </div>
        </div>
        <!-- Second slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/665566/FF0000/000000?text=Second slide">
          <div class="carousel-caption">
            <h5>スライドタイトル2</h5>
            <p>スライドのキャプション3</p>
          </div>
        </div>
        <!-- Third slide -->
        <div class="carousel-item"> <img class="d-block w-100" alt="img"
            src="https://via.placeholder.com/1600x900/664466/FFEE00/000000?text=Third slide">
          <div class="carousel-caption">
            <h5>スライドタイトル3</h5>
            <p>スライドのキャプション3</p>
          </div>
        </div>
      </div>
      <!-- 前に戻るアイコン -->
      <a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">前に戻る</span>
      </a>
      <!-- 次に送るアイコン -->
      <a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">次に送る</span>
      </a>
    </div>
  </div>

js インジケーター、キャプションを暗くする:carousel-dark


  <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <ol class="carousel-indicators">
      <li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
      <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active" data-bs-interval="10000">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
          xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide"
          preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>image svg 1</title>
          <rect width="100%" height="100%" fill="#f5f5f5" /><text x="50%" y="50%" fill="#aaa" dy=".3em">First
            slide</text>
        </svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>First タイトル</h5>
          <p>First xxxxxxxxxxxxxx</p>
        </div>
      </div>
      <div class="carousel-item" data-bs-interval="2000">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
          xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide"
          preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>image svg 2</title>
          <rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#bbb" dy=".3em">Second
            slide</text>
        </svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>Second タイトル</h5>
          <p>Second xxxxxxxxxxxxxx</p>
        </div>
      </div>
      <div class="carousel-item">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400"
          xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide"
          preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>image svg 3</title>
          <rect width="100%" height="100%" fill="#e5e5e5" /><text x="50%" y="50%" fill="#999" dy=".3em">Third
            slide</text>
        </svg>
        <div class="carousel-caption d-none d-md-block">
          <h5>Third タイトル</h5>
          <p>Third xxxxxxxxxxxxxx</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true">
        <span class="visually-hidden">Previous
    </a>
    <a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true">
        <span class="visually-hidden">Next
    </a>
  </div>

js モーダル 表示ボタン、外枠(非表示)、本体、コンテンツ、閉じるボタンの5点セット


  <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal"-->
  <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          モーダルの本文が入ります。
        </div>
        <div class="modal-footer">
          <!-- 「data-bs-dismiss=”modal”」が閉じる動作 -->
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
        </div>
      </div>
    </div>
  </div>

js モーダルのアニメーション設定:fade


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal2">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal2"-->
    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            モーダルの本文が入ります。
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

js 垂直方向中央に配置するモーダル:modal-dialog-centered


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal3">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal3"-->
    <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <!-- モーダルの×ボタン -->
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            モーダルの本文が入ります。
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .row>.col,
    .row>[class^=col-] {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      background-color: f8f8ff;
      border: 1px solid #aaa;
    }
  </style>

js グリッドレイアウトを使用したモーダル:rowとcol


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal4">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal4"-->
    <div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">
            <!-- container-fluidは画面いっぱい -->
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-4">col-md-4</div>
                <div class="col-md-4 ms-auto">col-md-4、ms-auto</div>
              </div>
              <div class="row">
                <div class="col-md-3 ms-auto">col-md-3、ms-auto</div>
                <div class="col-md-2 ms-auto">col-md-2、ms-auto</div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

js 長いコンテンツのモーダル:modal-body


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal5">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal5"-->
    <div class="modal fade" id="exampleModal5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <!-- モーダルのダイアログ本体 -->
      <div class="modal-dialog" role="document">
        <!-- モーダルのコンテンツ -->
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

js 長いコンテンツ、スクロールのモーダル:modal-dialog-scrollable


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModalsc">スクロールモーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModalsc"-->
    <div class="modal fade" id="exampleModalsc" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <!-- モーダルのダイアログ本体 -->
      <div class="modal-dialog modal-dialog-scrollable" role="document">
        <!-- モーダルのコンテンツ -->
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
            <p>モーダル本文</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>

js 大きなサイズのモーダル サイズのオプション:modal-lg


  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#largeModal6">大きなモーダルボタン</button>
    <!-- モーダル id="largeModal6"-->
    <div class="modal fade" id="largeModal6" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel"
      aria-hidden="true">
      <!-- 大きなモーダルのダイアログ本体modal-lg -->
      <!-- modal-sm:300px,Default(None):500px,modal-lg:800px,modal-xl:1140px
  -->
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="largeModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <!-- モーダルのフッター -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

js 小さなサイズのモーダル:modal-sm


    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#smallModal">小さなモーダルボタン(modal-sm)</button>
    <!-- モーダル id="smallModal"-->
    <div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
      aria-hidden="true">
      <!-- 小さなモーダルのダイアログ本体modal-sm -->
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="smallModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

js フルスクリーンのモーダル:modal-fullscreen


    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#fullModal">フルスクリーンモーダルボタン(modal-fullscreen)</button>
    <!-- モーダル id="fullModal"-->
    <div class="modal fade" id="fullModal" tabindex="-1" role="dialog" aria-labelledby="fullModalLabel"
      aria-hidden="true">
      <div class="modal-dialog  modal-fullscreen" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="fullModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">モーダルの本文</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
    
</body>
</html>