Web制作

  1. ブログトップ
  2. Web制作
  3. Tailwind CSSでアコーディオンメニューを実装する方法

Web制作

Tailwind CSSでアコーディオンメニューを実装する方法

仲川 舞

Tailwind CSSでアコーディオンメニューを実装する方法

Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、迅速にデザインを構築するために非常に便利です。アコーディオンメニューは、ユーザーがクリックした際にコンテンツを開閉できるインタラクティブなUI要素です。この記事では、Tailwind CSSを使用してアコーディオンメニューを実装する方法を説明します。

Accordion Menu with Tailwind CSS

HTML

Tailwind CSSを使って、各要素にスタイルを適用します。アコーディオンのヘッダーには背景色、テキスト色、フォントサイズ、パディングなどを設定します。また、開いたときに矢印の向きが変わるように、SVGアイコンの回転を制御するクラス（rotate-0）を追加します。

<div class="accordion-item">
  <button class="accordion-header w-full text-left p-4 text-lg text-gray-500 font-semibold bg-gray-100 rounded-t-lg"
    aria-expanded="false">
    メニュー 1
    <svg data-accordion-icon class="w-3 h-3 rotate-0 shrink-0 transition-transform duration-300">
      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1L5 5 1 1"/>
    </svg>
  </button>
  <div class="accordion-content hidden p-4 text-gray-700 bg-gray-50 rounded-b-lg" aria-hidden="true">
    <p>メニュー 1 の内容です。</p>
  </div>
</div>
  • p-4 — パディングを指定
  • bg-gray-100 — 背景色（薄い灰色）
  • hover:bg-blue-100 — ホバー時に薄いブルーに変化
  • focus:bg-blue-500 — クリック時に青色に変化
  • rotate-0 — 初期状態の矢印は下向き
  • transition-transform duration-300 — アニメーションでスムーズに回転

アコーディオンの動作

アコーディオンメニューが開閉できるようにするため、JavaScriptを使ってアコーディオンの動作を制御します。accordion-headerがクリックされたときに、次のaccordion-contentの表示・非表示を切り替えるとともに、矢印の向きも変えます。

document.querySelectorAll('.accordion-header').forEach((header) => {
  header.addEventListener('click', () => {
    const content = header.nextElementSibling; // 次の要素（コンテンツ）を取得
    const icon = header.querySelector('svg'); // 矢印のアイコンを取得

    // コンテンツの表示・非表示を切り替え
    content.classList.toggle('hidden');
    // 矢印の向きも切り替え
    icon.classList.toggle('rotate-180');

    // aria-expanded属性を更新
    const isExpanded = content.classList.contains('hidden');
    header.setAttribute('aria-expanded', !isExpanded);

    // aria-hidden属性を更新
    content.setAttribute('aria-hidden', isExpanded);

    // 他の項目を閉じる
    document.querySelectorAll('.accordion-content').forEach((item) => {
      if (item !== content) {
        item.classList.add('hidden');
        item.setAttribute('aria-hidden', 'true');
      }
    });

    // 他の項目の矢印を元に戻す
    document.querySelectorAll('.accordion-header').forEach((otherHeader) => {
      if (otherHeader !== header) {
        const otherIcon = otherHeader.querySelector('svg');
        otherIcon.classList.remove('rotate-180');
        otherHeader.setAttribute('aria-expanded', 'false');
        const otherContent = otherHeader.nextElementSibling;
        otherContent.setAttribute('aria-hidden', 'true');
      }
    });
  });
});

このコードでは、以下のような動作を実現しています。

  • ヘッダーをクリックすると、対応するコンテンツが表示・非表示になります。
  • 矢印がクリックごとに回転し、開いたときには上向き、閉じたときには下向きに切り替わります。
  • クリックしたアコーディオン項目のみが開き、他の項目は閉じられます。
  • 他の項目の矢印も元に戻し、背景色も初期状態に戻ります。

アクセシビリティの向上

アコーディオンメニューは、ユーザーのインタラクションを追跡するインターフェースであるため、アクセシビリティの観点からも工夫が必要です。上記の例では、aria-hiddenやaria-expandedの属性を設定して、スクリーンリーダーでもアコーディオンの状態がわかるようにすることができます。

aria-expanded:

  • header.setAttribute('aria-expanded', !isExpanded);
    ここで、aria-expandedを更新しています。コンテンツが表示されているかどうかを確認するために、hiddenクラスが付いているかどうかで判断し、その反対の値（表示されている場合はtrue、非表示の場合はfalse）を設定します。

aria-hidden:

  • content.setAttribute('aria-hidden', isExpanded);
    コンテンツの表示状態に基づいて、aria-hidden属性も変更します。表示されていない場合はtrue、表示されている場合はfalseを設定します。
  • 他の項目が開かれているときには、それらのaria-hiddenをtrueに設定して非表示状態を示します。

終わりに

このように、Tailwind CSSを使用して、シンプルで使いやすいアコーディオンメニューを簡単に実装することができます。Tailwindのユーティリティクラスを活用して、スタイルのカスタマイズも容易に行えます。ぜひ活用してみてください。

spoool blog

TOP