WordPress

jQuery基礎 1時間集中レッスン｜ボタンでメニューを開閉する

この記事でわかること

「jQueryってなんとなく難しそう…」と感じている初心者の方に向けて、1時間で「読み込んで、動かして、メニューを開閉する」ところまで一気に体験できるレッスンをまとめてみました。

まずは小さな成功体験から。空の<p>に文字を入れて、色をつけて、最後はボタンでメニューを開いたり閉じたりできるようにしていきます。

このレッスンのゴール

  • jQueryを読み込んで動かす、最初の感覚をつかむ
  • 空の<p>に文字を入れ、色をつけ、ボタンで切り替える
  • .toggleClass() など、次のステップの入口まで触れてみる

1. 環境準備

まずは動かす場所をつくります。

  1. 新規フォルダを作成（例：jquery-lesson）
  2. その中に index.html を作成
  3. HTMLの骨組みを用意し、jQueryをCDNから読み込む

</head> の中に、次の1行を書いておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

これで、jQueryが使えるようになりました。

2. 空の<p>に文字を表示する

HTMLに空の<p>を置いてみます。

<p></p>

そして </body> の直前に、こう書きます。

<script>
  $('p').html('jsでも文字が入力できます！');
</script>

空だった<p>の中に、文字が入って表示されれば成功です。

3. 色をつける

同じ<p>に、今度は背景色をつけてみます。

<script>
  $('p').css('background', 'pink');
</script>

ピンクの背景がつきました。.css() はスタイルを操作するメソッドです。

4. ボタンを押したときだけ動かす

ここまでは「読み込んだら即実行」でした。次は「ボタンを押したら実行」に変えてみます。

<body>
  <p></p>
  <button>button</button>

  <script>
    $('button').click(function () {
      $('p').html('jsでも文字が入力できます！');
      $('p').css('background', 'pink');
    });
  </script>
</body>

$('button').click(function(){ ... }); で「ボタンが押されたら、中の処理を動かす」という形になります。これがjQueryの基本の型です。

5. ボタンでメニューを出す・消す

いよいよメニューの開閉です。押すと出て、もう一度押すと消える動きをつくります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    .list {
      display: none;
    }
  </style>
</head>

<body>
  <p></p>
  <button>button</button>
  <ul class="list">
    <li class="item">メニュー1</li>
    <li class="item">メニュー2</li>
    <li class="item">メニュー3</li>
  </ul>

  <script>
    // true  = 表示
    // false = 非表示
    let on = false; // 状態管理（false＝非表示）

    $('button').click(function () {
      if (on) {
        $('.list').css('display', 'none'); // 表示中だったら閉じる
      } else {
        $('.list').css('display', 'block'); // 非表示だったら開く
      }
      on = !on; // 状態を反転
    });
  </script>
</body>

</html>

ポイントは let on = false; という「今開いているか閉じているか」を覚えておく変数です。ボタンを押すたびに on = !on; で状態をひっくり返して、開閉を切り替えています。

6. .toggleClass() でスッキリ書く

実は、開いているかどうかを自分で管理しなくても、jQueryには「クラスを付けたり外したりを自動でやってくれる」.toggleClass() があります。

<body>
  <p></p>
  <button>button</button>

  <script>
    $('button').click(function () {
      $('p').toggleClass('active'); // クラスを付けたり外したり
    });
  </script>
</body>

ボタンを押すたびに、active クラスが付いたり外れたりします。状態を覚えておく変数が要らなくなり、コードがぐっと短くなりました。

7. ナビメニューに応用する

最後に、これをスマホのナビメニュー（ハンバーガーメニューの中身）っぽくしてみます。

<body>
  <ul class="sp-navi__list">
    <li class="sp-navi__item">リスト1</li>
    <li class="sp-navi__item">リスト2</li>
    <li class="sp-navi__item">リスト3</li>
  </ul>
  <button>button</button>

  <script>
    $('button').click(function () {
      $('.sp-navi__list').toggleClass('on'); // クラスを付け外し
    });
  </script>

  <style>
    .sp-navi__list {
      display: none;
    }

    .sp-navi__list.on {
      display: block;
      background: red;
    }
  </style>
</body>

普段は display: none; で隠しておき、on クラスが付いたときだけ display: block; で表示する。表示・非表示のルールはCSSに任せて、jQueryは「クラスを付け外しするだけ」に専念する——これがハンバーガーメニューの土台になる考え方です。

8. 右からスライドさせる（ドロワーメニュー）

ここまでは「パッと出て、パッと消える」開閉でした。最後に、メニューが右からスーッとスライドしてくる動きに変えてみます。よくある「ドロワー（引き出し）メニュー」です。

むずかしそうに見えますが、やることは今までと同じ。クラスを付け外しするだけで、「隠す場所」と「動き方」をCSSに教えてあげるだけです。

考え方は「引き出し」

タンスの引き出しをイメージしてください。ふだんは中にしまわれていて見えません。取っ手を引くと、スーッと手前に出てきます。

これをWebで再現するには、こう考えます。

  • ふだん：メニューを画面の右の外に隠しておく
  • ボタンを押したら：メニューを画面の中に滑り込ませる
  • その移動を、ゆっくり時間をかけて動かす（これがスライドの正体）

まず隠し場所を「画面の外」にする

これまでは display: none; で消していました。ドロワーでは消すのではなく、画面の外に置いておくのがポイントです。

.sp-navi__list {
  position: fixed;   /* 画面に対して位置を固定する */
  top: 0;
  right: -250px;     /* 画面の右の「外」に250px分はみ出させて隠す */
  width: 250px;      /* メニューの幅 */
  height: 100%;      /* 画面の高さいっぱい */
  background: #fff;
  transition: right 0.4s;  /* right の変化を0.4秒かけてなめらかに */
}

ポイントは2つです。

  • right: -250px; … 幅と同じだけマイナスにして、ちょうど画面の外に隠します
  • transition: right 0.4s; … これがスライドの魔法。「rightの値が変わるときは、0.4秒かけてゆっくり動いてね」という命令です。これが無いと、パッと瞬間移動してしまいます

開いたら「画面の中」に入れる

あとは on クラスが付いたときに、right を 0 に戻すだけ。すると、隠れていたメニューが右からスーッと出てきます。

.sp-navi__list.on {
  right: 0;   /* 画面の中（右端ぴったり）に戻す */
}

JavaScript（jQuery）は、7章とまったく同じで大丈夫です。やっているのは「onクラスの付け外し」だけ。動きの中身はぜんぶCSSが引き受けてくれます。

<script>
  $('button').click(function () {
    $('.sp-navi__list').toggleClass('on'); // 7章と同じ。クラスを付け外しするだけ
  });
</script>

jQueryは「クラスを付け外しするだけ」。
「どう動くか」はぜんぶCSSに任せる。
この役割分担が、ドロワーメニューでも変わらない土台です。

7章との違いは、ここだけ

「表示・非表示」から「右からスライド」へ。変わったのはCSSの数行だけです。

  7章（表示・非表示） 8章（ドロワー）
隠し方 display: none;（消す） right: -250px;（外に置く）
出し方 display: block;（出す） right: 0;（中に入れる）
動き パッと切り替わる 0.4秒かけてスライド
jQuery toggleClass(‘on’) toggleClass(‘on’)（同じ）

「消す」のではなく「外に置いておく」。この発想の切り替えができれば、ドロワーメニューはもう作れます。動き（アニメーション）はjQueryではなく、CSSの transition が担当している——ここが今日いちばん覚えて帰ってほしいポイントです。

まとめ

今回のレッスンで触れた流れを整理しておきます。

ステップ やったこと 使ったメソッド
1 jQueryをCDNで読み込む <script src=”…”>
2 空の要素に文字を入れる .html()
3 背景色をつける .css()
4 ボタンを押したら実行する .click()
5 メニューを開閉する（状態管理） .css() + 変数
6・7 クラスの付け外しで開閉する .toggleClass()

いきなり完成形のハンバーガーメニューを目指すと難しく感じますが、こうして「文字を入れる → 色をつける → クリックで動かす → 開閉する」と一段ずつ積み上げていくと、無理なくたどり着けます。まずは手元で動かしてみてください。

TAG
ブログ

BLOG

View All
PAGE TOP