Bootstrap 5のオフキャンバスの位置設定方法

1. オフキャンバスを左側に配置する例:

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#myOffcanvas">Toggle Offcanvas</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="myOffcanvas" aria-labelledby="myOffcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="myOffcanvasLabel">Offcanvas Title</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Offcanvas content goes here.
  </div>
</div>

2. オフキャンバスを右側に配置する例:

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#myOffcanvas">Toggle Offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="myOffcanvas" aria-labelledby="myOffcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="myOffcanvasLabel">Offcanvas Title</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Offcanvas content goes here.
  </div>
</div>

上記の例では、offcanvas-startクラスを使用してオフキャンバスを左側に配置し、offcanvas-endクラスを使用してオフキャンバスを右側に配置しています。data-bs-toggle属性とdata-bs-target属性を使用することで、オフキャンバスのトグルボタンを作成し、対応するオフキャンバス要素を指定します。