2026.07.18

アコーディオン実装の例を解説！簡単に作れる展開コンテンツのコード紹介

[PR]

ウェブサイトやブログでコンテンツを整理して見た目をすっきりさせたいとき、アコーディオンは非常に役立ちます。FAQや仕様説明など、長文になりがちな情報をユーザーが必要なところだけ読めるようにすることで、ユーザー体験が向上します。この記事ではコード例やWordPressでの設定方法、アクセシビリティ対応まで具体的に紹介するので、アコーディオン実装例を探している方には最適です。最新情報を元に、初心者にも分かりやすく解説していきます。

1 アコーディオン実装例：基本構造とコードパターンを比較
2 アコーディオン実装例：アクセシビリティとユーザー操作のポイント
3 アコーディオン実装例：WordPress での活用法とおすすめプラグイン
4 アコーディオン実装例：具体的な実装コードの紹介と解説
- 4.1 HTML／CSSのみの簡易アコーディオン例
- 4.2 JavaScript を使った応用アコーディオン例
5 アコーディオン実装例：デザイン・レスポンシブ対応とパフォーマンス調整
6 アコーディオン実装例：SEOと検索エンジン評価への影響
7 まとめ

アコーディオン実装例：基本構造とコードパターンを比較

アコーディオン実装例として、まずは基本的な構造と複数のコードパターンを比較します。どのようなHTMLタグを用いるか、CSSでの制御、JavaScriptあり・なしのパターンなど、それぞれの利点と制約を把握することが重要です。最新の実践例を元に、複数の実装方法とその比較を紹介します。

HTMLの基本構造（details／summary タグ使用）

最初の例は、`

` と `

` タグを使う方法です。この構造はブラウザにネイティブに対応しており、キーボード操作やスクリーンリーダーでの読み上げに標準で対応できるため、アクセシビリティ面で優れています。CSSのみで装飾でき、JavaScriptを使わなくてもアコーディオンが機能します。複雑なスタイリングが必要な場合や「開いているものを一つだけにする」など高度な制御が必要な場合には後述する JS の利用例が適しています。

JavaScript を使った高度な制御例

次に JavaScript を組み込んだ実装例です。このパターンではクリックでの開閉だけでなく、アニメーション、開いているパネルを一つに制限、動的に内容を読み込む Lazy Load などを実現できます。HTML に `button` 要素を使い、ARIA 属性（`aria-expanded` や `aria-controls`）を適切に指定すると、アクセシビリティを確保しながらインタラクティブな動きを加えられます。

CSSのみで実装する例とトリッキーなテクニック

もうひとつの例は CSS のみで開閉を制御する方法です。チェックボックス入力を隠し、`input[type=checkbox]:checked + label + .content` のようなセレクタを使って隣接要素の表示を切り替える手法があります。この方法は JavaScript を一切使わないのでページのロードが速く、スクリプトが制限される環境でも安心です。ただし、多くのアイテムがある場合のスタイリング制御や複雑なアニメーションの実装に制限があります。

アコーディオン実装例：アクセシビリティとユーザー操作のポイント

どんなに見た目が良くても、操作性やアクセスのしやすさが欠けているとユーザーが離れてしまいます。アコーディオン実装例として、アクセシビリティを確保するためのポイントやユーザー操作の重要な要素を押さえましょう。特にスクリーンリーダー利用者やキーボード操作をする人に配慮した設計が不可欠です。

ARIA 属性の使い方

アコーディオンのトリガーには `aria-expanded` を使って開いているか閉じているかを伝えます。また、どのパネルを制御しているかを示すために `aria-controls` を使い、対応するパネルの ID を指定します。パネル自身には `aria-labelledby` を使って、ヘッダーと関連付けたり、場合によっては `role=”region”` を与えて範囲を明示することがあります。これらの属性はスクリーンリーダー使用時の理解を助けます。

キーボード操作対応

アコーディオン実装例として必須のポイントが、キーボードでの操作対応です。Enter キーや Space キーで開閉できること、Tab キーでフォーカスがヘッダーに移行し、Shift＋Tab で戻ること、場合によっては矢印キーでヘッダー間を移動できることが望まれます。これによりマウスを使わないユーザーでも快適に操作できます。

開閉状態の管理と動的制御

複数の開閉可能なパネルを持たせる場合、どのパネルが開いているかを管理する仕組みが必要です。JavaScript で状態を追跡したり、最初から特定のパネルを開いておく初期状態を設定する例があります。さらに、他のアイテムを閉じる「アコーディオンモード」（一つだけ開く）や、複数開いてよいモードの切り替え、開閉時のアニメーションを取り入れることも可能です。

アコーディオン実装例：WordPress での活用法とおすすめプラグイン

WordPress を利用している場合、手作業で HTML／CSS／JS を書く方法だけでなく、プラグインやブロックを使って効率的にアコーディオンを導入できます。SEOやパフォーマンス、使いやすさの観点から、どの方法が適しているかを実際の例を交えて紹介します。

プラグインを使うメリットとデメリット

プラグインを使うと、開閉動作やデザイン設定、アイコン変更、レスポンシブ対応などを GUI 上で簡単に設定できます。自分でコードを書く手間が省ける反面、読み込み速度や不要な機能が入ることによるパフォーマンス低下の恐れがあります。最新のプラグインでは軽量化や Lazy Load 対応などが進んでおり、選び方が重要です。

プラグイン名	特徴	こんなときに向いている
Lightweight Accordion	HTML の details／summary を使いスクリプト不要でシンプルに動く	ページ表示速度を最優先したい場合や FAQ など軽量構成が十分な場合
Easy Accordion	アニメーションや複数レイアウト、WooCommerce 連携など対応	デザイン重視で見栄え良くしたい場合、商品説明やスペック表など
Accordions（複数機能型）	ネスト可能、タブ表示もあり、統合スタイル設定が豊富	複数の領域でアコーディオンを使いたいケースや統一したデザインを適用したい場合

WordPress のブロックエディタでの実装例

WordPress の最新バージョンには、デフォルトで詳細／要約を作れるブロックが含まれています。このブロックを使えば HTML 詳細要素を使ったアコーディオンに似た形をビジュアルに編集でき、スクリプト不要でアクセス性も保たれます。また、プラグインを使う場合でも Gutenberg ブロック互換のものを選ぶと、テーマ変更や将来的な保守が楽になります。

アコーディオン実装例：具体的な実装コードの紹介と解説

ここでは具体的なコード例を示します。最初は HTML／CSS のみの簡易版、次に JavaScript を使った応用版の両方です。WordPress の投稿に直接貼れる形で記述してありますので、コピペで使いながら自分のサイトに合ったものをカスタマイズしてください。

HTML／CSSのみの簡易アコーディオン例

次の例は HTML の details／summary タグを使って CSS だけでスタイルを付けたものです。開閉時のアイコン表示や背景の変化なども CSS で表現可能です。

<details class="accordion">

<summary class="accordion-summary">セクション1のタイトル</summary>

<div class="accordion-panel">

<p>ここにセクション1の内容が入ります。テキストや他の HTML 要素が含まれても構いません。</p>

</div>

<details class="accordion">

<summary class="accordion-summary">セクション2のタイトル</summary>

<div class="accordion-panel">

<p>セクション2の内容です。もっと書きたいときはこのパネル内に追加します。</p>

</div>

</details>

CSS は以下のように設定すると見た目が整い、開閉アイコンの状態やパネルのパディングなどが調整できます。

.accordion-summary { cursor: pointer; padding:10px; background:#eee; }

.accordion-summary:hover { background:#ddd; }

.accordion-panel { padding:10px; background:#f9f9f9; }

details[open] .accordion-summary { background:#ddd; }

JavaScript を使った応用アコーディオン例

こちらは複数のパネルを持ち、アニメーション付きで一つだけを開くタイプの例です。開閉時に他のパネルを自動で閉じるように制御しています。

<div class="accordion js-accordion">

<button type="button" class="accordion-header" aria-expanded="false" aria-controls="panel1" id="header1">見出し1</button>

<div class="accordion-panel" id="panel1" aria-labelledby="header1" hidden>

<p>パネル１の内容です。テキストや画像などを含められます。</p>

</div>

<button type="button" class="accordion-header" aria-expanded="false" aria-controls="panel2" id="header2">見出し2</button>

<div class="accordion-panel" id="panel2" aria-labelledby="header2" hidden>

<p>パネル２の内容です。別の内容を記述できます。</p>

</div>

</div>

対応する JavaScript の例：

document.querySelectorAll('.js-accordion .accordion-header').forEach(button => {

  button.addEventListener('click', () => {

    const expanded = button.getAttribute('aria-expanded') === 'true';

    document.querySelectorAll('.js-accordion .accordion-header').forEach(btn => {

      btn.setAttribute('aria-expanded', 'false');

      document.getElementById(btn.getAttribute('aria-controls')).hidden = true;

    });

    if (!expanded) {

      button.setAttribute('aria-expanded', 'true');

      document.getElementById(button.getAttribute('aria-controls')).hidden = false;

    }

  });

});

アコーディオン実装例：デザイン・レスポンシブ対応とパフォーマンス調整

アコーディオンがどれだけ見た目が整っていても、スマートフォンユーザーなどモバイル環境で不便だと離脱につながります。ここではレスポンシブデザインや読み込み速度の観点から、実際の実装で気を付けたいポイントを例とともに紹介します。

レスポンシブデザインのコツ

モバイル画面ではアコーディオンのヘッダー部分をタップしやすく、大きめのタッチ領域を確保することが大切です。具体的にはパディングを広めにとった背景色変更やボーダーの見せ方などを調整します。また、アイコンの配置を左寄せか右寄せか、文字との余白を確保するかなども重要です。ビュー幅によってフォントサイズや高さを調整する CSS メディアクエリを使った応答性の実装例を入れるとよいでしょう。

パフォーマンスに関する工夫

JavaScript を使う場合、不要な再レンダリングを防ぐようにイベントリスナをまとめたり、開閉時のアニメーションを CSS トランジションで行うとブラウザ負荷が軽減されます。また、Lazy Load の考え方を応用して、アコーディオンパネルの内容を非表示時には読み込まず、ユーザーの操作やスクロールに応じて挿入する方法もあります。これは特に画像や重いコンテンツを含むパネルで有効です。

デザイン表現とスタイリング例

見出し部分にアイコンをつけたり、背景色やボーダー、ホバー時の変化などで視覚的に操作箇所を明確にすると使いやすさが上がります。たとえばアクティブなパネルの見出しに色を変える、パネル開閉時に矢印が回転するなどの演出を CSS で加える方法があります。以下はスタイリングの具体例です。

.accordion-header { display:flex; justify-content:space-between; align-items:center; padding:15px; background:#eee; cursor:pointer; border-bottom:1px solid #ccc; }

.accordion-header:hover { background:#ddd; }

.accordion-header .icon { transition:transform 0.3s; }

.accordion-header[aria-expanded="true"] .icon { transform:rotate(90deg); }

.accordion-panel { padding:15px; border-bottom:1px solid #ccc; }

アコーディオン実装例：SEOと検索エンジン評価への影響

アコーディオンを使ったコンテンツは適切に実装すれば SEO の点でも有利になりますが、誤った使い方をすると評価が下がることもあります。検索意図に合うコンテンツ構造や表示の可視性など、検索エンジンがコンテンツをどう扱うかを理解しておくことが重要です。

検索エンジンによるインデックスと可視性

アコーディオンの内容が最初は非表示になっている場合、検索エンジンがどれだけその内容を認識できるかが鍵です。HTML の `details` タグや適切なARIA属性を使うことで、検索エンジンがコンテンツを読み取れるようになる例が多いです。非表示状態でもその情報が重要な場合は、「FAQ schema」など構造化データを使って検索結果での表示を改善する手法があります。

モバイルファーストと UX 重視の設計

検索エンジンはモバイルでの使い勝手を重視しており、タッチ操作の快適さやレスポンシブ対応が評価対象になります。アコーディオンはモバイルで特に威力を発揮するインターフェースですので、タップできる領域を十分に大きくすることやアイコンや見出しの余白を確保することが UX の評価を向上させます。

速度・ページ重量と影響

プラグインを使った重いスクリプトや多数のアニメーションがパフォーマンスに影響を与えると、ページの読み込み速度が遅くなり SEO にマイナスになります。できるだけスクリプト量を抑え、CSS トランジションなどブラウザに負荷が少ない方法を取り入れることが推奨されます。ネイティブ要素を活用した軽量構成が検索エンジン評価を高めやすいです。

まとめ

アコーディオン実装例を実際に作る際には、構造・アクセシビリティ・ユーザー操作・レスポンシブ対応・SEO という複数の視点をバランスよく考えることが重要です。基本は HTML の `details`／`summary` タグを使う簡易版で十分なケースが多く、CSS や JS を補ってより高度な制御を加える形が現場での標準です。

WordPress を使っている場合は、軽量なプラグインやブロックエディタの詳細要素を活用し、必要に応じて高度なプラグインを導入するとよいでしょう。ページの読み込み速度を損なわず、ユーザーにとっても検索エンジンにとっても価値あるアコーディオンを実装して、見やすく使いやすいサイトを目指して下さい。

デバウンスとスロットリングの違いとは？最適な使い分けでパフォーマンス改善

CSPとは？設定の基本を初心者向けに解説