RYX

Blog

Web制作 — 2026.02.05

【コピペで実装】初心者必見！アコーディオンメニューの作り方

← ブログ一覧に戻る

はじめに

「FAQ形式のページを作りたいけど、アコーディオンの実装方法がわからない…」
「クリックで開閉するメニューを簡単に作りたい…」

そんな悩みを持つ方も多いのではないでしょうか？

この記事では、アコーディオンメニューの基本から実践的な実装方法まで、初心者にもわかりやすく解説します。
コピペするだけで実装できるコードも用意していますので、ぜひ最後までご覧ください。

見本

今回は下記のようなアコーディオンメニューを作っていきます。

ポイントは下記になります。

  • クリックで開閉する
  • スムーズなアニメーション付き
  • シンプルで使いやすいデザイン
  • 複数のアコーディオンに対応

アコーディオンメニューの見た目の制作

HTML

<!-- アコーディオン -->
<div class="accordion">
  <div class="accordion-item js-accordion">
    <div class="accordion-header js-accordion-header">
      <p class="accordion-title">質問1：アコーディオンとは？</p>
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <div class="accordion-content__inner">
        <p>アコーディオンとは、クリックすることで開閉するUIパーツのことです。よくあるFAQなどで使用されます。</p>
      </div>
    </div>
  </div>
  <div class="accordion-item js-accordion">
    <div class="accordion-header js-accordion-header">
      <p class="accordion-title">質問2：どんな時に使う？</p>
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <div class="accordion-content__inner">
        <p>FAQページやメニュー、商品の詳細情報など、情報を整理して表示したい時に便利です。</p>
      </div>
    </div>
  </div>
</div>

まずはHTMLですが、それぞれの要素について解説します。

  1. アコーディオンのアイテム
  • accordion-item: 各アコーディオンの親要素
  • js-accordion: JavaScriptで操作するためのクラス
  1. ヘッダー部分（クリックする部分）
  • accordion-header: スタイリングのためのクラス
  • js-accordion-header: クリックイベントを設定するためのクラス
  • accordion-icon: 開閉を示す矢印アイコン用のクラス
  1. コンテンツ部分（開閉する部分）
  • accordion-content: 開閉する内容を含む要素
  • accordion-content__inner: 実際のコンテンツを含む内部要素

CSS実装

/=========================================
#accordion
=========================================/
.accordion-item {
    border-bottom: 1px solid #e8e8e8;
}


/* ヘッダー部分 */
.accordion-header {
    position: relative;
    padding: 20px 40px 20px 0;
    cursor: pointer;
}


.accordion-title {
    font-weight: bold;
}


/* 開閉アイコン */
.accordion-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}


.accordion-icon::before,
.accordion-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #333333;
    transition: transform .3s;
}


/* 縦線 */
.accordion-icon::before {
    width: 2px;
    height: 16px;
    margin-left: -1px;
    transform: translateY(-50%);
}


/* 横線 */
.accordion-icon::after {
    width: 16px;
    height: 2px;
    margin-top: -1px;
    transform: translateX(-50%);
}


/* 開いているときは縦線を非表示に */
.accordion-item.is-active .accordion-icon::before {
    transform: translateY(-50%) rotate(90deg);
}


/* コンテンツ部分 */
.accordion-content {
    height: 0;
    overflow: hidden;
    transition: height .3s;
}


.accordion-content__inner {
    padding: 0 0 20px;
}

主要なポイントを以下に解説します。

  1. 基本的なスタイリング
  • border-bottomで区切り線を表示
  • padding で適切な余白を設定
  1. 開閉アイコン（＋マーク）の作成
  • ::before と::after で縦線と横線を作成
  • transition で回転アニメーションを設定
  • is-active 時に縦線を90度回転させて非表示に
  1. コンテンツの開閉アニメーション
  • height: 0 と overflow: hiddenで初期状態は非表示
  • transition で開閉をアニメーション化
  • JavaScriptで要素の高さを動的に設定

アコーディオンメニューの動きの制作

見た目が完成したので、次は動きをつけてアコーディオンの開閉ができるようにしていきます。

JavaScriptの完成コード

/=========================================
#アコーディオンメニュー
=========================================/
const accordions = document.querySelectorAll('.js-accordion');


accordions.forEach(accordion => {
  const accordionHeader = accordion.querySelector('.js-accordion-header');
  const accordionContent = accordion.querySelector('.accordion-content');


  accordionHeader.addEventListener('click', () => {
    // アコーディオンの開閉状態を切り替え
    accordion.classList.toggle('is-active');


// コンテンツの高さを設定
if (accordion.classList.contains(&apos;is-active&apos;)) {
  accordionContent.style.height = accordionContent.children[0].clientHeight + &apos;px&apos;;
} else {
  accordionContent.style.height = &apos;0&apos;;
}



  });
});

上記コードは、アコーディオンメニューの開閉を制御するためのものです。

主要な部分を解説します。

  1. 要素の取得
const accordions = document.querySelectorAll('.js-accordion');
  • ページ内の全てのアコーディオンを取得
  1. 各アコーディオンに対するイベント設定
accordions.forEach(accordion => {
  const accordionHeader = accordion.querySelector('.js-accordion-header');
  const accordionContent = accordion.querySelector('.accordion-content');
  • 各アコーディオンのヘッダーとコンテンツ部分を取得
  1. クリックイベントの処理
accordionHeader.addEventListener('click', () => {
  // クラスの切り替え
  accordion.classList.toggle('is-active');


  // 高さの設定
  if (accordion.classList.contains('is-active')) {
    accordionContent.style.height = accordionContent.children[0].clientHeight + 'px';
  } else {
    accordionContent.style.height = '0';
  }
});
  • クリック時にis-activeクラスを切り替え
  • コンテンツの実際の高さを計算して設定
  • 閉じる時は高さを0に設定

完成コード

以下は完成後のコードです。

HTML

<!-- アコーディオン -->
<div class="accordion">
  <div class="accordion-item js-accordion">
    <div class="accordion-header js-accordion-header">
      <p class="accordion-title">質問1：アコーディオンとは？</p>
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <div class="accordion-content__inner">
        <p>アコーディオンとは、クリックすることで開閉するUIパーツのことです。よくあるFAQなどで使用されます。</p>
      </div>
    </div>
  </div>


  <div class="accordion-item js-accordion">
    <div class="accordion-header js-accordion-header">
      <p class="accordion-title">質問2：どんな時に使う？</p>
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <div class="accordion-content__inner">
        <p>FAQページやメニュー、商品の詳細情報など、情報を整理して表示したい時に便利です。</p>
      </div>
    </div>
  </div>
</div>

CSS

/=========================================
#accordion
=========================================/
.accordion-item {
    border-bottom: 1px solid #e8e8e8;
}


/* ヘッダー部分 */
.accordion-header {
    position: relative;
    padding: 20px 40px 20px 0;
    cursor: pointer;
}


.accordion-title {
    font-weight: bold;
}


/* 開閉アイコン */
.accordion-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}


.accordion-icon::before,
.accordion-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #333333;
    transition: transform .3s;
}


/* 縦線 */
.accordion-icon::before {
    width: 2px;
    height: 16px;
    margin-left: -1px;
    transform: translateY(-50%);
}


/* 横線 */
.accordion-icon::after {
    width: 16px;
    height: 2px;
    margin-top: -1px;
    transform: translateX(-50%);
}


/* 開いているときは縦線を非表示に */
.accordion-item.is-active .accordion-icon::before {
    transform: translateY(-50%) rotate(90deg);
}


/* コンテンツ部分 */
.accordion-content {
    height: 0;
    overflow: hidden;
    transition: height .3s;
}


.accordion-content__inner {
    padding: 0 0 20px;
}

JavaScript

/=========================================
#アコーディオンメニュー
=========================================/
const accordions = document.querySelectorAll('.js-accordion');


accordions.forEach(accordion => {
  const accordionHeader = accordion.querySelector('.js-accordion-header');
  const accordionContent = accordion.querySelector('.accordion-content');


  accordionHeader.addEventListener('click', () => {
    // アコーディオンの開閉状態を切り替え
    accordion.classList.toggle('is-active');


// コンテンツの高さを設定
if (accordion.classList.contains(&apos;is-active&apos;)) {
  accordionContent.style.height = accordionContent.children[0].clientHeight + &apos;px&apos;;
} else {
  accordionContent.style.height = &apos;0&apos;;
}



  });
});

さいごに

今回は簡単にアコーディオンメニューを作る方法を詳しく解説しました。

アコーディオンメニューは使う機会も非常に多いので、ぜひこの記事をブックマークして、すぐに見返すことができるようにしておくと便利です。

Contact

Shopifyのご相談はこちら

構築・移行・改修・運用改善まで。状況を伺って最短ルートをご提案します。

相談・見積もり無料 / 24時間以内に返信

無料相談 ↗見積もり
← ブログ一覧に戻る
相談する