1. オフキャンバスメニューとは？

オフキャンバスメニューとは、画面の外側（キャンバスの外）に隠れているナビゲーションメニューのことです。ボタンを押すと左や右からスライドして表示され、スマートフォンや小さい画面でもスッキリとメニューが使えるのが特徴です。

たとえば、ハンバーガーメニュー（三本線のアイコン）をタップすると、横からメニューが出てくるのを見たことがある人も多いと思います。あれが「オフキャンバス」です。

2. なぜ小画面ではオフキャンバスメニューが便利なの？

スマートフォンやタブレットのような小さな画面では、ナビゲーションを常に表示していると、ページのスペースが狭くなり、読みにくくなってしまいます。

そこで、オフキャンバスメニューを使えば、必要な時だけメニューを開いて使えるので、見やすさ・使いやすさ・整理されたデザインを実現できます。

3. Bootstrapのオフキャンバスメニューを作るには？

Bootstrapでは、特別なJavaScriptを書かなくても、offcanvasクラスを使うだけでオフキャンバスメニューを作れます。

以下のようなパーツを使います。

ボタン：メニューを開くためのトリガー
divタグ：スライド表示するナビゲーション部分

4. スターターテンプレートのHTMLコード

ここでは、Bootstrapでオフキャンバスメニューを作成し、小画面での操作性を改善したスターターテンプレートを紹介します。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>オフキャンバスメニューのスターター</title>
  <meta name="description" content="Bootstrapのオフキャンバスメニューで小画面でも使いやすいレイアウトを初心者向けに紹介。スターターテンプレートで簡単に実装。">
  <meta name="keywords" content="Bootstrap, オフキャンバス, offcanvas, スマホ対応, ハンバーガーメニュー, ナビゲーションメニュー, スターターテンプレート">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar bg-dark navbar-dark">
    <div class="container-fluid">
      <button class="btn btn-outline-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu">
        <i class="bi bi-list"></i>
      </button>
      <a class="navbar-brand ms-3" href="#">My Site</a>
    </div>
  </nav>

  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasMenu">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">メニュー</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">サービス</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">お問い合わせ</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="container mt-4">
    <h1 class="mb-4">オフキャンバスメニューでスマホ対応</h1>
    <p>このテンプレートでは、ボタンをタップするとメニューが左からスライドして表示されます。画面のスペースを有効活用でき、見た目もスッキリと整います。</p>
    <p>Bootstrapのクラスを使うだけで、初心者でもかんたんに作れるのが魅力です。</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ブラウザ表示