はじめに
Bootstrap5 には、画面の外側からスライドして表示される「オフキャンバス」という便利なコンポーネントがあります。
スマートフォンのような狭い画面では、メニューやナビゲーションを省スペースで表示できるため、とても相性の良いUIです。
また、左側だけでなく、右側・上下からも表示できる柔軟さがあり、用途に合わせてさまざまなレイアウトに活用できます。
今回は、このオフキャンバスを実際に触りながら、使い方や気づいたポイントをまとめてみました。
オフキャンバスとは何か
オフキャンバスは、ボタンやリンクをクリックしたときに、画面の外側からスライドして表示されるコンテンツ領域です。
スマートフォンのメニュー表示としてよく使われる UI で、限られた画面スペースを有効に使えるのが大きな特徴です。
Bootstrap5 では、必要な属性を HTML に追加するだけで簡単に動作し、左右・上下など表示位置も柔軟に切り替えられます。
どんな場面で活用できるのか
オフキャンバスは、メニュー以外にもさまざまな用途に活用できます。
カテゴリ一覧、フィルタメニュー、プロフィール、設定パネルなど、補助的な情報を表示する場面で特に便利です。
PC ではサブメニューとして、スマホでは主役の UI として活躍するため、レスポンシブなサイト制作と相性が良いと感じました。
基本的な実装方法
Bootstrap5 のオフキャンバスは、data-bs-toggle と data-bs-target を指定するだけで動作します。
以下は最もシンプルな実装例です。
表示位置は offcanvas-start（左）、offcanvas-end（右）、offcanvas-top（上）、offcanvas-bottom（下）などに変更できます。
用途に合わせてレイアウトを調整できる点がとても便利です。
実際に触ってみて感じたこと
実際にオフキャンバスを試してみると、次のような気づきがありました。
・アニメーションが自然で、アプリのような操作感が出る
・HTML とクラス指定だけで動くため、実装がとても簡単
・幅や背景色を変えるだけで印象が大きく変わる
・スマホでは主役、PC では補助 UI として使い分けられる
特に、軽い管理画面や補助メニューとして使うと、サイト全体の操作性が向上する印象です。
まとめ
オフキャンバスは、Bootstrap5 の中でも特に使いやすいコンポーネントだと感じました。
スマホとの相性が良く、アプリのような操作感を簡単に実装できるため、今後の制作でも積極的に活用していきたい UI です。
レイアウトの自由度も高く、メニュー以外の用途にも応用できるので、サイトの使いやすさを向上させたい場面で大いに役立ちます。
