Bootstrap - オフキャンバス：初級者向けガイド

こんにちは、未来のウェブ開発者たち！今日は、Bootstrapのオフキャンバスコンポーネントの素晴らしい世界に飛び込みます。これは初めてで不安がある也不用担心 - 私はあなたの親切なガイドとして、一緒にこのトピックをステップバイステップで探求します。で、お気に入りの飲み物を手に取り、リラックスして、このエキサイティングな旅に出発しましょう！

概要

まず最初に - オフキャンバスとは一体何でしょうか？想像してみてください、狭いアパートに住んでいて、もっと収納スペースが必要なとき。突然、壁から隠されたコンパートメントがスライドして出てくる - これがウェブデザインにおけるオフキャンバスです！それは、ナビゲーションやフォーム、または必要なまで隠しておきたい他のコンテンツを表示させることができるサイドバーです。

オフキャンバスコンポーネント

構築を始める前に、オフキャンバスの主要な部分を分解してみましょう：

1. トリガー：通常はボタンで、クリックするとオフキャンバスが表示されます。
2. オフキャンバスそのもの：表示されるパネルです。
3. バックドロップ：オフキャンバスが開いている間にメインコンテンツを暗くするオプションのオーバーレイです。

これらのコンポーネントがどのようにコードで組み合わされるかを見てみましょう！

ライブデモ

以下は簡単な例です：

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas">
オフキャンバスを開く
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">オフキャンバスのタイトル</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
</div>
<div class="offcanvas-body">
<p>これはオフキャンバスのコンテンツです。ここに何を入れても構いません！</p>
</div>
</div>

これを分解してみましょう：

1. ボタンには data-bs-toggle="offcanvas" が付いており、Bootstrapにオフキャンバスのトリガーであることを伝えます。
2. data-bs-target="#demoOffcanvas" は、ボタンをIDが一致するオフキャンバスにリンクします。
3. オフキャンバス自体は div で、クラス offcanvas を持ちます。
4. offcanvas-start は、左側に配置します（後で他の位置も探求します）。
5. ヘッダーにはタイトルと閉じるボタンがあります。
6. ボディにはメインコンテンツを入れる場所です。

ボディのスクロール

デフォルトでは、オフキャンバスが開いている間、背景のボディはスクロールできません。でも、スクロールを許可したい場合はどうしますか？簡単です！オフキャンバスの div に data-bs-scroll="true" を追加します：

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="scrollableOffcanvas">
<!-- オフキャンバスのコンテンツ -->
</div>

ボディのスクロールとバックドロップ

スクロールを許可しつつ、ファンシーなバックドロップを保持したい場合は、data-bs-backdrop="false" と一緒に data-bs-scroll="true" を追加します：

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="scrollableBackdropOffcanvas">
<!-- オフキャンバスのコンテンツ -->
</div>

ステップ バックドロップ

オフキャンバスを explicit に閉じない限り開けたままにしたい場合は、data-bs-backdrop="static" を使用します：

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdropOffcanvas">
<!-- オフキャンバスのコンテンツ -->
</div>

ダークオフキャンバス

ややゴシックな雰囲気を楽しみたい場合は、オフキャンバスをダークにします！text-bg-dark クラスを追加します：

<div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="darkOffcanvas">
<!-- オフキャンバスのコンテンツ -->
</div>

レスポンシブ

ここに素晴らしいトリックがあります - オフキャンバスをレスポンシブにします！小さなスクリーンではオフキャンバス、大きなスクリーンではインラインコンテンツにすることができます。.offcanvas-{breakpoint} クラスを使用します：

<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="responsiveOffcanvas">
<!-- オフキャンバスのコンテンツ -->
</div>

このオフキャンバスは、 'lg' ブレイクポイントより大きなスクリーンではインライン、小さなスクリーンではオフキャンバスになります。

配置

先ほど位置を変更できることを言及しましたが、以下の方法で行います：

クラス	位置
offcanvas-start	左
offcanvas-end	右
offcanvas-top	上
offcanvas-bottom	下

例えば、右側に配置するには：

<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas">
<!-- オフキャンバスのコンテンツ -->
</div>

アクセシビリティ

最後に、オフキャンバスをすべてのユーザーにアクセシブルにすることについて話しましょう：

1. aria-labelledby を使用して、オフキャンバスをタイトルにリンクします：

<div class="offcanvas offcanvas-start" tabindex="-1" id="accessibleOffcanvas" 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>

2. トリガーボタンには aria-controls を使用します：

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#accessibleOffcanvas" aria-controls="accessibleOffcanvas">
アクセシブルなオフキャンバスを開く
</button>

そして、皆さん！オフキャンバスの専門家になりました。実践が完璧を生むことを忘れないでくださいので、これらのコンポーネントをあなたのプロジェクトで実験してみてください。誰 knows? あなたが次の大きなスライディングセンセーションをウェブデザインで作るかもしれません！

ハッピーコーディング、そしてあなたのオフキャンバスが常にスムーズにスライドすることを祈っています！

Credits: Image by storyset