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は「クラスを付け外しするだけ」に専念する——これがハンバーガーメニューの土台になる考え方です。

まとめ

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

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

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

TAG
ブログ

BLOG

View All
PAGE TOP