プログラミング

オフキャンバスメニューの作成方法

最終更新： 22/04/2025
1 分の読み

オフキャンバスメニュー（Off-Canvas Menu）は、ユーザーが画面の外側からスライドインしてくるメニューの一種です。モバイルサイトやレスポンシブデザインでよく使われ、画面スペースを節約するために便利です。この記事では、CSSと少しのJavaScriptを使って、オフキャンバスメニューを作成する方法を完全かつ包括的に解説します。

オフキャンバスメニューの基本的な仕組み

オフキャンバスメニューは、通常、画面の左または右側に隠れていて、ユーザーがメニューを表示するためにボタンをクリックまたはタップすることで表示されます。メニューが表示されるときは、画面の横からスライドインする動きが一般的です。

関連記事

ここでは、オフキャンバスメニューのHTML、CSS、そして簡単なJavaScriptを使って、実際に作成する方法を紹介します。

1. HTMLの構造

まず、オフキャンバスメニューを作成するための基本的なHTML構造を用意します。以下のコードは、メニューとそのトリガー（開くためのボタン）を含んだシンプルなHTML構造です。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>オフキャンバスメニューtitle>
    <link rel="stylesheet" href="styles.css">
head>
<body>
    <div id="menuToggle" class="menu-toggle">☰div>
    <div id="offCanvasMenu" class="off-canvas-menu">
        <ul>
            <li><a href="#">ホームa>li>
            <li><a href="#">サービスa>li>
            <li><a href="#">お問い合わせa>li>
            <li><a href="#">ブログa>li>
        ul>
    div>

    <div id="mainContent" class="main-content">
        <h1>オフキャンバスメニューのデモh1>
        <p>このページはオフキャンバスメニューを実装しています。p>
    div>

    <script src="script.js">script>
body>
html>

2. CSSでスタイルを設定

次に、オフキャンバスメニューの見た目やアニメーションのスタイルをCSSで設定します。メニューが画面外に隠れている状態と、スライドインしてくる状態を定義します。

css
/* 基本のスタイル */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* メニューのトリガー */
.menu-toggle {
    font-size: 30px;
    padding: 10px 15px;
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: #333;
    color: #fff;
    cursor: pointer;
    z-index: 1000;
}

/* オフキャンバスメニューのスタイル */
.off-canvas-menu {
    position: fixed;
    top: 0;
    left: -250px; /* 初期状態ではメニューが画面外 */
    width: 250px;
    height: 100%;
    background-color: #333;
    color: white;
    transition: left 0.3s ease; /* スライドインアニメーション */
    z-index: 999;
}

.off-canvas-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.off-canvas-menu li {
    padding: 15px;
    text-align: center;
}

.off-canvas-menu a {
    text-decoration: none;
    color: white;
    font-size: 18px;
}

/* メインコンテンツ */
.main-content {
    padding: 20px;
    margin-left: 20px;
}

/* メニューが開いた状態のスタイル */
.off-canvas-menu.open {
    left: 0; /* メニューがスライドイン */
}

/* メニューが開いている時のメインコンテンツのシフト */
.main-content.shifted {
    margin-left: 250px;
}

3. JavaScriptでインタラクションを追加

最後に、メニューを開いたり閉じたりするためのJavaScriptコードを追加します。メニューをトリガーするボタンをクリックしたときに、メニューがスライドイン・スライドアウトするようにします。

javascript
// メニューのトグルボタン
const menuToggle = document.getElementById('menuToggle');
// オフキャンバスメニュー
const offCanvasMenu = document.getElementById('offCanvasMenu');
// メインコンテンツ
const mainContent = document.getElementById('mainContent');

// メニューを開く/閉じるイベントリスナー
menuToggle.addEventListener('click', () => {
    offCanvasMenu.classList.toggle('open');
    mainContent.classList.toggle('shifted');
});

4. 説明と動作確認

このコードでは、ユーザーが「☰」のアイコンをクリックすることで、オフキャンバスメニューがスライドインします。メニューが表示されると、メインコンテンツは少し右にシフトして、メニューとの重なりを防ぎます。再度アイコンをクリックすると、メニューが閉じ、メインコンテンツも元に戻ります。

主なポイント

  • オフキャンバスメニューの初期位置はleft: -250px;で、画面外に隠れています。

  • メニューが表示されるとき、left: 0;に変更され、スライドインします。

  • メニューが表示されると、メインコンテンツは右にシフトします。

  • スライドインとスライドアウトのアニメーションは、CSSのtransitionプロパティを使って実現しています。

5. 応用とカスタマイズ

オフキャンバスメニューはシンプルな構造ですが、さまざまなカスタマイズが可能です。例えば、メニューを画面の右側に表示するように変更する、メニューが開くアニメーションを変える、メニュー内に画像やアイコンを追加するなど、デザインの変更は自由です。

まとめ

オフキャンバスメニューは、限られた画面スペースを有効活用できる便利な要素で、モバイルファーストなデザインには特に有用です。CSSと少しのJavaScriptを使うことで、シンプルに実装できます。上記の方法をベースに、自分のプロジェクトに合わせてさらに発展させることができます。

最終更新： 22/04/2025
1 分の読み
Back to top button