はい、作れます。この例で使っている`

“`

このコードのポイントを解説します。

• <details>タグ: アコーディオン全体のコンテナ（入れ物）です。このタグで囲まれた部分が開閉の対象となります。
• <summary>タグ: 常に表示されるヘッダー（見出し）部分です。<details>タグの直下に、必ず1つだけ配置します。ユーザーがクリックするのはこの部分です。
• <summary>タグ以降の要素: <p>タグや<div>タグなど、<summary>タグの後ろに配置されたすべての要素が、開閉されるパネル（コンテンツ）部分になります。

このHTMLファイルをブラウザで開いてみてください。これだけでもう、クリックするとコンテンツが開閉するアコーディオンが機能しているはずです。非常に簡単ですね。

ステップ2: CSSでデザインを整える

HTMLだけで機能はしますが、デフォルトの見た目は非常に素っ気ないものです。ここからはCSSを使って、デザインを整えていきましょう。style.cssというファイルを作成し、HTMLファイルから読み込みます。

2-1. 基本的なスタイリング

まずは、全体の見た目を整えます。枠線や背景色、余白などを設定して、コンポーネントらしく見せましょう。

“`css
/ style.css /
body {
font-family: sans-serif;
padding: 2rem;
}

details {
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 1rem;
}

summary {
font-weight: bold;
padding: 1rem;
background-color: #f5f5f5;
}

/ パネル部分のスタイリング /
details > :not(summary) {
padding: 1rem;
}
“`

• details: 枠線(border)と角丸(border-radius)、要素間の余白(margin-bottom)を設定しました。
• summary: 太字(font-weight)にし、内側の余白(padding)と薄い背景色(background-color)を追加して、ヘッダーであることを分かりやすくしました。
• details > :not(summary): 少し高度なセレクタですが、「<details>タグの直接の子要素のうち、<summary>ではないものすべて」を意味します。つまり、パネル部分のコンテンツに余白を設定しています。

2-2. クリックできることをユーザーに示す

<summary>タグはクリックできる要素ですが、デフォルトではマウスカーソルが矢印のままです。cursor: pointer; を追加して、指の形（ポインター）に変化するようにしましょう。これにより、ユーザーは直感的に「ここがクリックできる場所だ」と認識できます。

css
summary {
font-weight: bold;
padding: 1rem;
background-color: #f5f5f5;
cursor: pointer; /* ← これを追加 */
}

2-3. デフォルトのマーカー（矢印）を消す

ブラウザは<summary>の先頭にデフォルトで三角形のマーカー（▶）を表示します。これを非表示にして、後ほど独自のアイコンに置き換えましょう。ブラウザごとに指定方法が少し異なります。

“`css
summary {
/ …既存のスタイル… /
list-style: none; / Firefox用の対策 /
}

summary::-webkit-details-marker {
display: none; / Chrome, Safari, Edge用の対策 /
}
“`

この2つの指定で、ほとんどのモダンブラウザでデフォルトのマーカーを非表示にできます。

2-4. カスタムマーカー（+ / -）を追加する

デフォルトのマーカーを消したので、代わりに開閉状態が分かりやすい独自のアイコンを追加します。CSSの擬似要素 ::before または ::after を使うのが一般的です。ここでは、閉じた状態では「+」、開いた状態では「-」が表示されるようにしてみましょう。

“`css
summary {
/ …既存のスタイル… /
position: relative; / 擬似要素を配置するため /
padding-left: 2.5rem; / アイコンのスペースを確保 /
}

summary::before {
content: ‘+’; / 閉じた状態のアイコン /
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
}

/ open属性がついたdetails内のsummary /
details[open] > summary::before {
content: ‘-‘; / 開いた状態のアイコン /
}
“`

コードの解説です。

1. summaryに position: relative; を指定します。これは、擬似要素を position: absolute; で絶対位置指定するための基準点となります。
2. アイコンを配置するスペースを確保するため、padding-left を追加しました。
3. summary::before で、<summary>要素の直前に擬似的な要素を作成します。content: '+'; で表示するテキスト（アイコン）を指定します。
4. position: absolute; と left, top, transform を使って、アイコンをヘッダーの左端中央にきれいに配置します。
5. そして、ここが重要なポイントです。<details>要素は、開いているときに open属性 が自動的に付きます。この性質を利用して、details[open] > summary::before というセレクタを書きます。
6. このセレクタは「open属性を持つ<details>内の<summary>の::before擬似要素」を指します。これに対して content: '-'; を指定することで、アコーディオンが開いたときだけアイコンが「-」に切り替わる、という仕組みを実現しています。

これで、見た目も機能も分かりやすい、カスタムデザインのアコーディオンが完成しました。

<details>タグの限界：アニメーションについて

この方法で作成したアコーディオンは非常に実用的ですが、一つだけ弱点があります。それは、開閉時に滑らかなアニメーションをCSSだけで簡単に追加できないことです。

CSSの transition プロパティを使えばアニメーションを実装できますが、これは height が 0 から auto（コンテンツに応じた自動の高さ）に変化するような動きには適用できません。

このアニメーションの課題を解決し、さらに複雑な機能（例：一つ開いたら他は閉じる）を実装したい場合には、次の章で解説するJavaScriptを使ったアプローチが必要になります。

第3章: JavaScriptで機能拡張！リッチなアコーディオン

<details>タグは手軽で素晴らしいですが、より洗練されたUI/UXを目指すならJavaScriptの出番です。JavaScriptを使えば、以下のような機能拡張が可能になります。

• 滑らかな開閉アニメーションの実装
• アコーディオンの一つが開いたら、他の開いているものを自動的に閉じる機能
• より自由なHTML構造とCSSデザイン
• アクセシビリティ（WAI-ARIA）のより細かい制御

この章では、JavaScriptを使って、デザイン性と機能性に優れたリッチなアコーディオンをゼロから構築する方法を解説します。

ステップ1: HTMLの構造を準備する

JavaScriptで制御する場合、<details>タグは使わず、より一般的な<div>や見出しタグ、ボタンタグを組み合わせて構造を作ります。こちらの方が、セマンティック（意味的）にも、アクセシビリティ的にも推奨されることが多いです。

“`html

“`

このHTML構造は少し複雑に見えますが、それぞれの要素には重要な役割があります。

• .accordion-item: アコーディオンの各項目をまとめるラッパー。
• .accordion-header (<h3>): ヘッダー部分。見出しタグを使うことで、ページの構造が明確になります。
• .accordion-trigger (<button>): 実際にクリックするトリガーです。<a>タグではなく<button>タグを使うことが非常に重要です。なぜなら、ボタンはキーボード（Enter/Spaceキー）での操作が標準で可能であり、スクリーンリーダーも「ボタン」として正しく認識してくれるからです。
• .accordion-panel (<div>): 開閉するコンテンツパネル。
• WAI-ARIA属性:
  • aria-expanded="false": このボタンが制御するパネルが現在「閉じている」ことを示します。JavaScriptで true に切り替えます。
  • aria-controls="panel-1": このボタンがどのパネル（id="panel-1"）を制御するのかを関連付けます。
  • role="region": パネル部分がひとまとまりの領域であることを示します。
  • hidden: HTMLの属性で、この要素が現在非表示であることを示します。CSSの display: none; と同様の効果があり、スクリーンリーダーもこの要素を無視します。

ステップ2: CSSでスタイルを定義する

次に、このHTML構造に対するCSSを書いていきます。ポイントは、アニメーションのために display: none; ではなく max-height を使うことです。

“`css
/ style.css /
.accordion-trigger {
/ buttonのデフォルトスタイルをリセット /
appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
text-align: left;

width: 100%;
padding: 1rem;
font-weight: bold;
cursor: pointer;
background-color: #f5f5f5;

}

.accordion-panel {
overflow: hidden; / はみ出したコンテンツを隠す /
max-height: 0; / 初期状態では高さを0にして隠す /
transition: max-height 0.3s ease-out, padding 0.3s ease-out; / アニメーションを設定 /
}

/ JavaScriptで is-open クラスが付与されたときのスタイル /
.accordion-panel.is-open {
/ 十分に大きな高さを指定。コンテンツの最大高さを超える値にする /
max-height: 500px;
}

.accordion-content {
padding: 0 1rem; / is-open になったときに padding を 1rem にする /
}
.accordion-panel.is-open .accordion-content {
padding: 1rem;
}
“`

CSSの重要なポイントです。

1. .accordion-panel は初期状態では max-height: 0; になっています。height: 0; ではなく max-height を使うのがコツです。そして overflow: hidden; で、高さが0のときにはみ出すコンテンツを隠します。
2. JavaScriptで開閉を制御する際に、.accordion-panel に is-open というクラスを付け外しします。
3. .accordion-panel.is-open のスタイルとして、max-height にコンテンツが十分収まるだけの大きな値（例: 500px）を指定します。
4. .accordion-panel に transition: max-height 0.3s ease-out; を設定しておくことで、max-height が 0 から 500px へ変化する際に、0.3秒かけて滑らかなアニメーションが実行される、という仕組みです。
5. padding も transition の対象にすることで、開閉時にコンテンツの余白も滑らかに変化し、より自然な見た目になります。

ステップ3: JavaScriptで開閉ロジックを実装する

いよいよJavaScriptで、インタラクティブな動きを実装します。

“`javascript
// script.js

document.addEventListener(‘DOMContentLoaded’, function () {
const triggers = document.querySelectorAll(‘.accordion-trigger’);

triggers.forEach(trigger => {
    trigger.addEventListener('click', function () {
        // クリックされたトリガーに対応するパネルを取得
        const panel = document.getElementById(this.getAttribute('aria-controls'));

        // is-openクラスをトグル（付け外し）
        panel.classList.toggle('is-open');

        // aria-expanded属性の値を更新
        const isExpanded = this.getAttribute('aria-expanded') === 'true';
        this.setAttribute('aria-expanded', !isExpanded);

        // hidden属性をトグル
        panel.hidden = !panel.hidden;
    });
});

});
“`

このコードの処理の流れは以下の通りです。

1. DOMContentLoaded イベントリスナーを使い、HTMLの読み込みが完了してからスクリプトが実行されるようにします。
2. document.querySelectorAll('.accordion-trigger') で、すべてのトリガーボタンを取得します。
3. forEach を使って、各トリガーボタンに click イベントリスナーを設定します。
4. ボタンがクリックされたら、以下の処理を実行します。
   • this.getAttribute('aria-controls') で、クリックされたボタンが持つ aria-controls 属性の値（パネルのID）を取得します。
   • document.getElementById() で、そのIDを持つパネル要素を取得します。
   • panel.classList.toggle('is-open') で、パネルに is-open クラスがあれば削除し、なければ追加します。これにより、CSSで定義した開閉スタイルが適用されます。
   • 現在の aria-expanded の状態を取得し、その逆の値 (true なら false、false なら true) を設定し直します。これにより、支援技術に現在の状態を正しく伝えることができます。
   • panel.hidden 属性も同様に true/false を切り替えます。これは、CSSが無効な環境や、アニメーションが終わるまでの間の状態を考慮したアクセシビリティ対策です。

ステップ4 (応用): 一つ開いたら他は閉じる

現在の実装では、複数の項目を同時に開くことができます。これを、アコーディオンのよう一つの項目を開いたら、他の開いている項目は自動的に閉じるように改良してみましょう。

“`javascript
// script.js (改良版)

document.addEventListener(‘DOMContentLoaded’, function () {
const container = document.querySelector(‘.accordion-container’);
const triggers = container.querySelectorAll(‘.accordion-trigger’);
const panels = container.querySelectorAll(‘.accordion-panel’);

triggers.forEach(trigger => {
    trigger.addEventListener('click', function () {
        const targetPanel = document.getElementById(this.getAttribute('aria-controls'));
        const isExpanded = this.getAttribute('aria-expanded') === 'true';

        // すべてのアコーディオンを一旦閉じる
        triggers.forEach(t => t.setAttribute('aria-expanded', 'false'));
        panels.forEach(p => {
            p.classList.remove('is-open');
            p.hidden = true;
        });

        // クリックされたものが閉じていた場合、それを開く
        if (!isExpanded) {
            this.setAttribute('aria-expanded', 'true');
            targetPanel.classList.add('is-open');
            targetPanel.hidden = false;
        }
    });
});

});
“`

改良版のロジックは以下の通りです。

1. トリガーがクリックされたら、まず最初にすべてのトリガーとパネルをループ処理して、強制的に閉じた状態にします。 (aria-expanded="false", is-openクラスを削除, hidden=true)
2. その上で、もしクリックされた項目が元々閉じていた (!isExpanded) のであれば、その項目だけを開く処理を行います。
3. もしクリックされた項目が元々開いていたのであれば、(1)の処理で閉じられるだけなので、結果としてクリックで閉じる動きになります。

これで、一つしか開けない、より一般的なアコーディオンの挙動が完成しました。

第4章: 実践！アコーディオンUIのベストプラクティスと注意点

アコーディオンの実装方法を学びましたが、ただ作れるだけでは不十分です。ユーザーにとって本当に使いやすく、誰にとっても公平なUIを提供するためには、いくつかの重要なポイント（ベストプラクティス）を押さえる必要があります。

1. アクセシビリティ (A11y) を最優先に考える

Webサイトは、視覚障がいのある方、キーボードだけで操作する方など、様々なユーザーが利用します。アコーディオンが彼らにとって障壁にならないよう、アクセシビリティを徹底的に考慮しましょう。

• トリガーには<button>を使う: 前章でも触れましたが、これは最も重要なルールの一つです。<div>や<span>にクリックイベントを設定するのではなく、必ず<button>要素を使いましょう。これにより、Tabキーでのフォーカス移動や、Enter/Spaceキーでの操作が自然に可能になります。
• WAI-ARIA属性を正しく使う: aria-expanded は、パネルが開いているか閉じているかの状態をスクリーンリーダーに伝える生命線です。JavaScriptで状態が変化するたびに、必ずこの属性値も更新してください。aria-controls は、ボタンとパネルの関連性を明確にします。
• フォーカス管理: キーボード操作時に、フォーカスがどこにあるか視覚的に分かるようにしましょう。button:focus や button:focus-visible セレクタを使って、フォーカスリング（アウトライン）を分かりやすく表示することが推奨されます。
  css
.accordion-trigger:focus-visible {
outline: 2px solid blue;
outline-offset: 2px;
}
• アイコンの意味: + や > などのアイコンは視覚的な補助ですが、スクリーンリーダーは読み上げません。そのため、アイコンだけに頼らず、ボタンのテキストやARIA属性で状態が伝わるように設計することが不可欠です。

2. 直感的なデザインとUIのヒント

ユーザーが一目見て「これはアコーディオンだ」と分かり、迷わず操作できるデザインを心がけましょう。

• 開閉可能であることを示すアフォーダンス: ヘッダーの右端に ▼（下向き三角）や +（プラス記号）のようなアイコンを配置することで、この要素が開閉可能であること（アフォーダンス）を視覚的に伝えられます。
• 状態変化をアイコンで示す: 開いた状態ではアイコンを ▲（上向き三角）や -（マイナス記号）に変化させましょう。これにより、ユーザーは現在の状態と次に行える操作（閉じること）を直感的に理解できます。
• 十分なクリック領域（ヒットエリア）を確保する: 特にモバイルデバイスでは、指でタップしやすいように、ヘッダー全体をクリック可能にし、十分な padding を設定してヒットエリアを広く確保することが重要です。
• 快適なアニメーション速度: アニメーションはUXを向上させますが、長すぎるとユーザーを待たせてイライラさせます。一般的に、0.2秒から0.4秒程度が、動きを認識でき、かつ邪魔にならない快適な速度とされています。

3. コンテンツ配置の注意点：アコーディオンの「使いどき」

アコーディオンは万能薬ではありません。使い方を間違えると、かえってUXを損なう可能性があります。

アコーディオンを使うべきでないケース

• サイトの核心となる最重要コンテンツ: ユーザーが必ず読むべき情報や、サイトの主要な価値を提供するコンテンツをアコーディオンの中に隠してはいけません。ユーザーはクリックする手間を嫌い、その情報を見逃してしまうリスクがあります。例えば、ECサイトの商品価格や購入ボタンをアコーディオンに隠すのは絶対にやめましょう。
• コンテンツが非常に短い場合: 各パネルの内容が一行か二行程度しかないのにアコーディオンを使うと、ユーザーは情報を読む時間よりもクリックする時間の方が長くなってしまいます。これは明らかに操作の手間を増やすだけで、UXの低下に繋がります。

アコーディオンが効果的なケース

• 二次的・補足的な情報: FAQ、製品の技術仕様、詳細な利用規約、用語集など、すべてのユーザーが必ずしも必要とするわけではないが、知りたい人にとっては重要な情報。
• 情報のグループ化: 複数のステップからなる手続きの説明や、関連するトピックのリストなど、情報を論理的な塊にグループ化して提示したい場合。
• 段階的開示 (Progressive Disclosure): ユーザーにまず概要を理解してもらい、必要に応じて詳細情報へと進んでもらうという、情報を段階的に見せたい場合。これにより、初心者を情報過多で混乱させることなく、上級者は詳細情報にアクセスできるという、幅広いユーザー層に対応したインターフェースが作れます。

4. SEOへの最終的な考察

第1章で述べた通り、現在のGoogleはアコーディオン内のコンテンツも問題なくインデックスします。しかし、常に100%安全とは言い切れません。以下の点を念頭に置くと、より盤石なSEO対策ができます。

• 最も重要なキーワードは隠さない: ページにとって最も重要なキーワードやキーフレーズは、アコーディオンのヘッダー部分（<summary>や見出しタグ内）に含めるのが賢明です。常に表示されているコンテンツの方が、検索エンジンからより重要だと判断される可能性は依然として残っています。
• ユーザーファーストが結果的にSEOに繋がる: SEOのテクニックに固執するよりも、「どうすればユーザーにとって最も情報が探しやすいか？」を第一に考えましょう。アコーディオンの導入によってユーザーの満足度が上がり、サイトでの滞在時間が延びれば、それがGoogleからの評価を高め、結果的にSEOに良い影響をもたらします。適切な場所で、適切にアコーディオンを使うことが最善の策です。

まとめ

この記事では、Webサイトの情報を整理し、ユーザー体験を向上させるための強力なUIコンポーネント「アコーディオン」について、そのメリットから具体的な実装方法、そして実践的なベストプラクティスまでを包括的に解説してきました。

最後に、本記事の要点を振り返ってみましょう。

• アコーディオンのメリット: 省スペースでの情報整理、ユーザーの認知負荷軽減によるUX向上、コンテンツの階層構造の明確化など、多くの利点があります。
• シンプルな実装: HTMLの<details>と<summary>タグを使えば、JavaScriptなしで手軽に、かつアクセシブルなアコーディオンを実装できます。
• リッチな実装: JavaScriptを使えば、滑らかなアニメーションや「一つ開くと他が閉じる」といった高度な機能を持つ、より洗練されたアコーディオンを構築できます。
• 最重要事項: 実装方法に関わらず、アクセシビリティへの配慮は不可欠です。<button>要素の使用やWAI-ARIA属性の適切な設定は、すべてのユーザーに公平な体験を提供するために必ず守るべきルールです。
• 適切な使い方: アコーディオンは万能ではありません。サイトの核心となる情報を隠さず、補足的な情報や関連情報のグループ化に利用するのが効果的です。

アコーディオンは、単なるデザイン上の仕掛けではありません。それは、増え続ける情報と、それを求めるユーザーとの間のコミュニケーションを円滑にするための、思慮深い設計思想の現れです。

今日学んだ知識を活かして、ぜひあなたのWebサイトにアコーディオンを導入してみてください。最初はシンプルなFAQページからでも構いません。実際に手を動かしてみることで、その効果と実装の勘所がより深く理解できるはずです。

Webサイト制作の世界は常に進化しています。今回のアコーディオン実装を足がかりに、今後はReactやVue.jsといったJavaScriptフレームワークでのコンポーネント作成や、Web Componentsといった新しい技術にも挑戦していくと、さらに表現の幅が広がるでしょう。

この記事が、あなたのWebサイトをより見やすく、より使いやすいものにするための一助となれば幸いです。