オフキャンバス（Offcanvas） v5.0.0新設

いくつかのクラスとJavaScriptプラグインを使用して、ナビゲーションやショッピングカートなどの非表示のサイドバーをプロジェクトに組み込む。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

このページの項目 v5.0.0新設

使い方（How it works）

オフキャンバスは、JavaScriptを経由して切り替えて、ビューポートの左端、右端、上端、下端から表示できるサイドバーコンポーネント。ボタンやアンカーは、切り替えた特定の要素に関連付けるトリガーとして使用され、data 属性はJavaScriptを呼び出すために使用される。

オフキャンバスは、モーダルと同じJavaScriptコードの一部を共有しており、概念的には非常に似ているが、別々のプラグインである。
同様に、オフキャンバスのスタイルと大きさの一部のソースSass変数は、モーダルの変数から継承される。
表示されている場合のオフキャンバスには、非表示にするのにクリック可能なデフォルトの背景が含まれている。
モーダル同様、一度に表示できるオフキャンバスは1つだけ。

注意！CSSがアニメーションを処理する方法を考えると .offcanvas 要素に margin と translate は使用できない。代わりのクラスを独立したラッピング要素にご使用下さい。

このコンポーネントのアニメーション効果は、prefers-reduced-motion メディアクエリに依存。詳細はアクセシビリティのモーションを小さくするに記載。

実例（Examples）

オフキャンバスコンポーネント（Offcanvas components）

以下は、（.offcanvas の .show を経由して）デフォルトで表示されるオフキャンバスの例。オフキャンバスには、閉じるボタンのあるヘッダと、初期 padding 用のオプションのボディクラスのサポートが含まれている。できる場合はいつでも、却下アクションを含むオフキャンバスヘッダを含めるか、明示的な却下アクションの提供を推奨。

見本オフキャンバスを開いた状態で表示

これがオフキャンバスのコンテンツ。ここにほぼすべてのBootstrapコンポーネントやカスタム要素が配置できる。

※ココでは閉じるボタンを押しても閉じない仕様にしている。

設定例

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    これがオフキャンバスのコンテンツ。ここにほぼすべてのBootstrapコンポーネントやカスタム要素が配置できる。
  </div>
</div>

オフキャンバスの設定（Live demo）v5.2.0設定変更

以下のボタンをクリックすると、クラスを変更して他の要素を表示したり非表示にする：

.offcanvas は、コンテンツを非表示にする（デフォルト）
.offcanvas.show は、コンテンツを表示する

href 属性を持つリンクか data-bs-target 属性を持つボタンが使用できる。どちらの場合も、data-bs-toggle="offcanvas" が必要。

見本

href属性を持つリンク

プレースホルダとしてのテキスト。実生活では、選択した要素を持つことができます。いいね、テキスト、画像、リストなど。

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">
  href属性を持つリンク
</a>
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">
  data-bs-target属性を持つボタン
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>   
  </div>
  <div class="offcanvas-body">
    <div>
      プレースホルダとしてのテキスト。...
    </div>
    <div class="dropdown mt-3">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        ドロップダウン
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">メニュー1</a></li>
        <li><a class="dropdown-item" href="#">メニュー2</a></li>
        <li><a class="dropdown-item" href="#">メニュー3</a></li>
      </ul>
    </div>
  </div>
</div>

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  href属性を持つリンク
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  data-bs-target属性を持つボタン
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">オフキャンバス</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      プレースホルダとしてのテキスト。...
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        ドロップダウン
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">メニュー1</a></li>
        <li><a class="dropdown-item" href="#">メニュー2</a></li>
        <li><a class="dropdown-item" href="#">メニュー3</a></li>
      </ul>
    </div>
  </div>
</div>

【設定】

button.btn《切替ボタン》 + 〔div.offcanvas.offcanvas-start > {div.offcanvas-header > h5.offcanvas-title《タイトル》 + button.btn-close[data-bs-dismiss="offcanvas"][aria-label="閉じる"]《閉じるアイコンボタン》}《ヘッダ》 + div.offcanvas-body《コンテンツ》〕《オフキャンバス部分》
オフキャンバスのプラグインを使用するため、
- 切替ボタンには、[data-bs-toggle="offcanvas"]（プラグインを有効にする）と、[data-bs-target="#オフキャンバスのID"] か [href="#オフキャンバスのID"]
- div.offcanvas（ボタンのリンク先）には、id="ID名" と tabindex="-1"（Esc を押すとオフキャンバスが閉じるようにする）
をそれぞれ入れること

【アクセシビリティの設定】

h5.offcanvas-title に id="ID名" を入れ、div.offcanvas に aria-labelledby="タイトルのID" 属性（タイトルをオフキャンバスのラベルとして関連付ける）を入れること
切替ボタン部分には、
- aria-expanded="false" 属性（支援技術に要素の開閉の状態を伝える）
- aria-controls="コンテンツのID" 属性（リンクまたはボタンリンクまたはボタンとコンテンツの関連付け）
- コントロールが a.btn の場合は、role="button"（支援技術にボタンの役割を伝える）
を入れる

【変更履歴】

【v5.2.0】
- オフキャンバスを閉じるボタン：.btn-close.text-reset ⇒ .btn-close
- ドロップダウン：button.btn.dropdown-toggle の id="ID" と ul.dropdown-menu の aria-labelledby="ID" 属性はそれぞれ不要に

body本体のスクロール（Body scrolling）v5.2.0「背景」から移動

オフキャンバスとその背景が表示されている場合、<body> 要素のスクロールは無効になる。data-bs-scroll 属性を使用して、<body> 本体のスクロールを有効にする。

見本

ページの残りの部分をスクロールして、このオプションの動作をご確認下さい。

設定例

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">bodyのスクロールが有効</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">body本体がスクロールするオフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <p>...</p>
  </div>
</div>

【設定】

data-bs-scroll="true", data-bs-backdrop="false" 属性を .offcanvas に入れる

【変更履歴】

【v5.2.0】
- オフキャンバスを閉じるボタン：.btn-close.text-reset ⇒ .btn-close

body本体のスクロールとオーバーレイ背景が両方とも有効（Body scrolling and backdrop）v5.2.0「背景」から移動

オーバーレイ背景が表示された状態での <body> のスクロールも有効にできる。

見本

ページの残りの部分をスクロールして、このオプションの動作をご確認下さい。

設定例

<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">スクロールとオーバーレイ背景が両方とも有効</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">スクロール可能なオーバーレイ背景</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <p>...</p>
  </div>
</div>

【設定】

data-bs-scroll="true" 属性を .offcanvas に入れる

【変更履歴】

【v5.2.0】
- オフキャンバスを閉じるボタン：.btn-close.text-reset ⇒ .btn-close

静的な背景（Static backdrop）v5.2.0新設

背景が静的に設定されている場合、オフキャンバスはその外側をクリックしても閉じられない。

見本

オフキャンバスの外側の背景をクリックしてもオフキャンバスは閉じない。閉じるボタンを押すと閉じる。

設定例

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  静的なオフキャンバスに切替
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      ...
    </div>
  </div>
</div>

【設定】

.offcanvas に [data-bs-backdrop="static"] を追加
Esc を押しても閉じないようにするには、さらに [data-bs-keyboard="false"] を追加

ダークオフキャンバス（Dark offcanvas）v5.2.0新設 v5.3.0非推奨

ユーティリティを使用してオフキャンバスの外観を変更し、ダークナビゲーションバーなどのさまざまな背景とよりよく一致させる。ここでは、[data-bs-theme="dark"] を .offcanvas に追加して、ダークオフキャンバスとして適切なスタイルを設定する。

注意！コンポーネントのダーク・バージョンは、カラーモードの導入に伴いv5.3.0で非推奨になった。.text-bg-dark, .btn-close-white, .dropdown-menu-dark といったクラスを手動で追加する代わりにルート要素、親要素のラッパー、コンポーネント自体にdata-bs-theme="dark" を設定すること。

見本オフキャンバスを開いた状態で表示

これがオフキャンバスのコンテンツ。

※ココでは閉じるボタンを押しても閉じない仕様にしている。

Bootstrap5.3.0の設定例緑背景が変更箇所

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel" data-bs-theme="dark">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">オフキャンパス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvasDark" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <p>これがオフキャンバスのコンテンツ。</p>
  </div>
</div>

※Bootstrap5.2.xの設定例赤背景が変更箇所

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">オフキャンパス</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <p>これがオフキャンバスのコンテンツ。</p>
  </div>
</div>

【設定】

オフキャンバス：.offcanvas に [data-bs-theme="dark"] を追加

【変更履歴】

【v5.3.0】
- オフキャンバス：.text-bg-dark は不要に
- 閉じるボタン：.btn-close-white は非推奨になったので削除

レスポンシブ（Responsive）v5.2.0新設

レスポンシブ・オフキャンバスクラスは、ビューポートの外側のコンテンツを指定されたブレークポイントから下では隠す。そのブレークポイントを超えると、その中のコンテンツは通常どおりに動作。例えば、.offcanvas-lg は、lg ブレークポイントより下のオフキャンバスのコンテンツを非表示（オフキャンバス切替ボタンを押すと表示）にするが、lg ブレークポイントより上のコンテンツは通常に表示する。

見本

ブラウザのサイズを変更して、レスポンシブなオフキャンバスの切替を表示させて下さい。

これは .offcanvas-lg 内のコンテンツ。

設定例

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">オフキャンバスの切替</button>

<div class="alert alert-info d-none d-lg-block">ブラウザのサイズを変更して、レスポンシブなオフキャンバスの切替を表示させて下さい。</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">レスポンシブ・オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">これは <code>.offcanvas-lg</code> 内のコンテンツ。</p>
  </div>
</div>

レスポンシブ・オフキャンバスクラスは、ブレークポイントごとに利用できる。

定義済クラスの種類

ブレークポイント	クラス名	オフキャンバスになるビューポートの範囲
常時	`.offcanvas`	すべて
小より下	`.offcanvas-sm`	`576px`以下
中より下	`.offcanvas-md`	`768px`以下
大より下	`.offcanvas-lg`	`992px`以下
特大より下	`.offcanvas-xl`	`1200px`以下
超特大より下	`.offcanvas-xxl`	`1400px`以下

【設定】

.offcanvas の代わりに .offcanvas-{breakpoint}（上記の「定義済クラスの種類」から選択）を入れる
- {breakpoint}（sm（小）, md（中）, lg（大）, xl（特大）, xxl（超特大）のいずれかを選択）は、グリッド・システムのビューポイントに準ずる

【注意】

閉じるボタン button.btn-close[data-bs-dismiss="offcanvas"][aria-label="閉じる"] に [data-bs-target] を設定する必要あり

配置（Placement）v5.0.0一部追加

オフキャンバスコンポーネントのデフォルトの配置はないため、以下の修飾子クラスのいずれかを追加する必要がある。

.offcanvas-start は、ビューポートの左側にオフキャンバスを配置
.offcanvas-end は、ビューポートの右側にオフキャンバスを配置
.offcanvas-top は、ビューポートの上側にオフキャンバスを配置
.offcanvas-bottom は、ビューポートの下側にオフキャンバスを配置

以下に上側、右側、下側の実例を表示。

1.上側にオフキャンバスを配置 v5.0.0追加

見本

...

設定例

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">上側オフキャンバスの切替</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasTopLabel">上側オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じるe"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

2.右側にオフキャンバスを配置

見本

...

設定例

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">右側オフキャンバスの切替</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">右側オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

3.下側にオフキャンバスを配置

見本

...

設定例

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">下側オフキャンバスの切替</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">下側オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

【設定】

左側にオフキャンバスを配置：.offcanvas.offcanvas-start
右側にオフキャンバスを配置：.offcanvas.offcanvas-end
上側にオフキャンバスを配置：.offcanvas.offcanvas-top
下側にオフキャンバスを配置：.offcanvas.offcanvas-bottom

【変更履歴】

【v5.0.0】
- 上側にオフキャンバスを配置（.offcanvas.offcanvas-top）を追加
【v5.2.0】
- オフキャンバスを閉じるボタン：.btn-close.text-reset ⇒ .btn-close

アクセシビリティ（Accessibility）

オフキャンバスパネルは概念的にはモーダルダイアログであるため、オフキャンバスのタイトルに必ず aria-labelledby="..." を .offcanvas に追加して下さい。すでにJavaScriptを経由して追加しているため、role="dialog" を追加する必要はないので注意。

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、オフキャンバスは、リアルタイムのカスタマイズを強化するために、.offcanvas でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_offcanvas.scss 内 offcanvas-css-vars の設定--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
--#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
--#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
--#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
--#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
--#{$prefix}offcanvas-color: #{$offcanvas-color};
--#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
--#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
--#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
--#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
--#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 offcanvas-variables の設定$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                var(--#{$prefix}body-bg);
$offcanvas-color:                   var(--#{$prefix}body-color);
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

使用方法（Usage）

オフキャンバスプラグインは、いくつかのクラスと属性を利用して、手間のかかる作業を処理：

.offcanvas は、コンテンツを非表示にする
.offcanvas.show は、コンテンツを表示する
.offcanvas-start は、左側のオフキャンバスを非表示にする
.offcanvas-end は、右側のオフキャンバスを非表示にする
.offcanvas-top は、上側のオフキャンバスを非表示にする
.offcanvas-bottom は、下側のオフキャンバスを非表示にする

data-bs-dismiss="offcanvas" 属性を使用して閉じるボタンを追加し、これを押すことによりJavaScript機能が起動される。すべてのデバイスで適切に動作するように、必ず <button> 要素をご使用下さい。

データ属性経由で（Via data attributes）

切替（Toggle）

要素に data-bs-toggle="offcanvas" と data-bs-target か href を追加して、1つのオフキャンバス要素の制御を自動的に割り当てる。data-bs-target 属性は、オフキャンバスを適用するCSSセレクタを受け入れる。必ず .offcanvas クラスをオフキャンバス要素に追加して下さい。またデフォルトで開いた状態にしたい場合は、あらかじめ .show クラスを追加する。

閉じる（Dismiss）v5.1.0追加

オフキャンバスを閉じるには、下記のようにオフキャンバス内のボタンの data 属性を使用して実行できる：

設定例

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>

または、下記のように追加の data-bs-target を使用してオフキャンバスの外側のボタンに表示できる：

設定例

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="閉じる"></button>

オフキャンバスを閉じる2つの方法がサポートされているが、オフキャンバスの外側のボタンから閉じる場合は、ARIA Authoring Practices Guide dialog (modal) patternと一致しないので注意。これは自己責任で行って下さい。

JavaScript経由で（Via JavaScript）v5.2.0設定変更

手動で有効にする：

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

JavaScriptconst offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

JavaScriptvar offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

【変更履歴】

【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

オプション（Options）

オプションは、データ属性かJavaScriptを経由して渡すことができるため、data-bs-animation="{value}" のように、オプション名を data-bs- に追加できる。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース（単語の先頭を大文字にする）からケバブケース（単語をハイフンでつなぐ）にご変更下さい。例：data-bs-customClass="beautifier" ではなく、data-bs-custom-class="beautifier" を使用する。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント構成を格納できる実験的な予約済データ属性 data-bs-config をサポート。要素に data-bs-config='{"delay":0, "title":123}' と data-bs-title="456" 属性がある場合、最終的な title 値は 456 になり、個別のデータ属性は data-bs-config で指定された値を再定義する。さらに、既存のデータ属性には、data-bs-delay='{"show":0,"hide":150}' のようなJSON値を格納できる。

名前	タイプ	デフォルト	説明
`backdrop` v5.2.0一部変更	boolean か string `'static'`	`true`	オフキャンバスが開いている間にbodyにオーバーレイ背景を適用 `true`：有効／`false`：無効または、背景クリック時にオフキャンバスを閉じないようにするには `static` を指定（実例は静的な背景に記載）
`keyboard`	boolean	`true`	`Esc` が押されたときにオフキャンバスを閉じる `true`：有効／`false`：無効
`scroll`	boolean	`false`	オフキャンバスが開いているときにbodyをスクロールできるようにする `true`：有効／`false`：無効

【変更履歴】

【v5.2.0】
- backdrop のタイプに"string 'static'" を追加

メソッド（Methods）v5.0.2メソッド追加

すべてのAPIメソッドは非同期で遷移を開始する。これらは、遷移が開始されるとすぐに呼び出し元に戻るが遷移が終了する前に戻る。さらに遷移中のコンポーネントでのメソッド呼び出しは無視される。詳細については、Javascriptのドキュメントに記載。

コンテンツをオフキャンバス要素としてアクティブ化し、オプションの object を受け入れる。

コンストラクタを使用してオフキャンバス・インスタンスが作成できる。以下に例を表示：

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

JavaScriptconst bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

JavaScriptvar myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

メソッド	説明
`dispose` v5.3.3追加	要素のオフキャンバスを破棄（DOM要素に保存されているデータを削除）。
`getInstance`	DOM要素に関連付けられたオフキャンバス・インスタンスを取得できる静的メソッド。
`getOrCreateInstance` v5.0.2追加	DOM要素に関連付けられたオフキャンバス・インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド。
`hide`	オフキャンバス要素を非表示にする。オフキャンバス要素が実際に非表示にされる前（つまり、`hidden.bs.offcanvas` イベントが発生する前）に呼び出し元に戻る。
`show`	オフキャンバス要素を表示。オフキャンバス要素が実際に表示される前（つまり、`shown.bs.offcanvas` イベントが発生する前）に呼び出し元に戻る。
`toggle`	オフキャンバス要素を表示または非表示に切り替える。オフキャンバス要素が実際に表示されたり非表示にされる前（つまり、`shown.bs.offcanvas` または `hidden.bs.offcanvas` イベントが発生する前）に呼び出し元に戻る。

【変更履歴】

【v5.0.2】
- getOrCreateInstance メソッドが追加
【v5.2.0】
- JavaScriptの記述をES6(ES2015)に変更

イベント（Events）v5.2.0タイプ追加

Bootstrapのオフキャンバスクラスは、オフキャンバス機能に接続するためのいくつかのイベントを公開している。

イベントタイプ	説明
`hide.bs.offcanvas`	`hide` のメソッドが呼び出されると直ちに発動。
`hidden.bs.offcanvas`	オフキャンバス要素がユーザーから非表示になったときに発動（完全にCSS遷移が完了するまで待機）。
`hidePrevented.bs.offcanvas`v5.2.0追加	オフキャンバスの `backdrop` オプションが `static` であり、オフキャンバスが表示され、オフキャンバスの外側をクリックされたときに発動。`keyboard` オプションが `false` に設定されている場合に `Esc` を押しても発動。
`show.bs.offcanvas`	`show` のインスタンス・メソッドが呼び出されると直ちに発動。
`shown.bs.offcanvas`	ユーザーにオフキャンバス要素が表示されたときに発動（完全にCSS遷移が完了するまで待機）。

使用例 v5.2.0設定変更

JavaScriptconst myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // 何かをする...
})

前のページ
ナビ&タブ

次のページ
ページ送り

オフキャンバス（Offcanvas） v5.0.0新設

使い方（How it works）

実例（Examples）

オフキャンバスコンポーネント（Offcanvas components）

見本 オフキャンバスを開いた状態で表示

オフキャンバス

設定例

オフキャンバスの設定（Live demo）v5.2.0設定変更

見本

オフキャンバス

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

【設定】

【アクセシビリティの設定】

【変更履歴】

body本体のスクロール（Body scrolling）v5.2.0「背景」から移動

見本

body本体がスクロールするオフキャンバス

設定例

【設定】

【変更履歴】

body本体のスクロールとオーバーレイ背景が両方とも有効（Body scrolling and backdrop）v5.2.0「背景」から移動

見本

スクロール可能なオーバーレイ背景

設定例

【設定】

【変更履歴】

静的な背景（Static backdrop）v5.2.0新設

見本

オフキャンバス

設定例

【設定】

ダークオフキャンバス（Dark offcanvas）v5.2.0新設 v5.3.0非推奨

見本 オフキャンバスを開いた状態で表示

オフキャンパス

Bootstrap5.3.0の設定例 緑背景が変更箇所

※Bootstrap5.2.xの設定例 赤背景が変更箇所

【設定】

【変更履歴】

レスポンシブ（Responsive）v5.2.0新設

見本

レスポンシブ・オフキャンバス

設定例

定義済クラスの種類

【設定】

【注意】

配置（Placement）v5.0.0一部追加

1.上側にオフキャンバスを配置 v5.0.0追加

見本

上側オフキャンバス

設定例

2.右側にオフキャンバスを配置

見本

右側オフキャンバス

設定例

3.下側にオフキャンバスを配置

見本

下側オフキャンバス

設定例

【設定】

【変更履歴】

アクセシビリティ（Accessibility）

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0設定移行

デフォルトの設定

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

使用方法（Usage）

データ属性経由で（Via data attributes）

切替（Toggle）

閉じる（Dismiss）v5.1.0追加

設定例

設定例

JavaScript経由で（Via JavaScript）v5.2.0設定変更

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

【変更履歴】

オプション（Options）

【変更履歴】

メソッド（Methods）v5.0.2メソッド追加

見本オフキャンバスを開いた状態で表示

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

見本オフキャンバスを開いた状態で表示

Bootstrap5.3.0の設定例緑背景が変更箇所

※Bootstrap5.2.xの設定例赤背景が変更箇所

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所