JavaScriptで作るアコーディオンと、今回の方法の違いは何ですか？

JavaScript製は複雑なアニメーションを付けられるなど自由度が高い反面、実装が複雑で、ライブラリによってはサイトが重くなることがあります。 HTMLの<details>タグを使う方法は、実装が非常に簡単で軽量、かつアクセシビリティにも標準で優れているのが大きな違いです。

アコーディオンの中に、さらに入れ子でアコーディオンを作ることはできますか？

はい、可能です。 <details>タグの中に、さらに別の<details>タグを記述することで、入れ子構造のアコーディオンを作成できます。

アイコンをFont AwesomeやSVG画像にすることはできますか？

はい、可能です。CSSの::after疑似要素のcontentプロパティにFont Awesomeのユニコードを指定したり、background-imageプロパティでSVGを指定したりすることで、テキスト以外のアイコンも利用できます。

開閉時にアニメーション（ふわっと開くなど）を付けることはできますか？

残念ながら、CSSだけでは<details>タグの開閉に滑らかなアニメーションを付けるのは難しいのが現状です。アニメーションを実装したい場合は、JavaScriptを併用する必要があります。

HTMLだけでアコーディオンを実装！【JS不要】CSSコピペで簡単な作り方

Webサイトの「よくある質問」や「商品の詳細説明」が長くなってしまい、ユーザーにとって情報が探しにくくなっていませんか？
コンテンツをすっきりと整理したいけれど、JavaScriptなどの専門知識がなくて困っている方も多いのではないでしょうか。

実は、現在のHTMLとCSSを使えば、プログラミングの知識がなくても、クリックで開閉する「アコーディオン」を驚くほど簡単に実装できます。

この記事では、初心者の方でもコピペですぐに使える具体的なコードを交えながら、HTMLの<details>タグを使ったアコーディオンの作り方を徹底解説します。
デザインのカスタマイズ方法から、SEOやアクセシビリティにおけるメリットまで、この記事一本で全てが分かります。

なぜ今「HTMLアコーディオン」なのか？JS不要で得られる4つのメリット
【コピペOK】HTMLとCSSで作るアコーディオン実装ガイド
もっと知りたい！アコーディオン活用のための知識
よくある質問（FAQ）
まとめ

なぜ今「HTMLアコーディオン」なのか？JS不要で得られる4つのメリット

かつてアコーディオンUIはJavaScriptやjQueryライブラリを使うのが一般的でしたが、今はHTMLの標準機能だけで実装するのが主流です。
それには、現代のWeb制作において見逃せない、大きなメリットがあるからです。

メリット1：JavaScript不要で軽量！サイト表示を高速化

JavaScriptを使わない最大のメリットは、ページの読み込みが速くなることです。
外部ファイルを読み込む必要がないため、サイト全体の表示速度が向上し、ユーザーを待たせません。
これは、ユーザー体験の向上はもちろん、Googleがサイト評価の指標としている「コアウェブバイタル」にも良い影響を与え、SEOの観点からも非常に重要です。
脱jQueryを進めたい、軽量な実装を探しているWeb制作者の方にも最適な方法です。

メリット2：HTMLだけで意味が伝わる正しい構造

<details>タグは「詳細情報」、<summary>タグは「その要約」というセマンティック（意味的に正しい）な役割を持っています。
これは、ただ見た目を整えるだけでなく、「この部分は見出しで、こちらがその詳細内容です」と、検索エンジンのロボットにコンテンツの構造を正しく伝える手助けになります。
結果として、検索エンジンがページ内容を理解しやすくなり、適切な評価につながる可能性があります。

メリッ3：標準で高いアクセシビリティを確保

【アコーディオンをキーボードで操作しているイラスト】

<details>タグは、私たちが特別な設定をしなくても、生まれつき高いアクセシビリティを備えています。
例えば、以下のような操作が標準でサポートされています。

キーボード操作：Tabキーでアコーディオンにフォーカスを当て、Enterキーやスペースキーで開閉できます。
スクリーンリーダー対応：目の不自由な方が利用するスクリーンリーダー（音声読み上げソフト）は、これが開閉する要素であることを認識し、その状態（開いているか、閉じているか）をユーザーに伝えてくれます。

すべてのユーザーが情報にアクセスしやすいWebサイトを作る上で、これは非常に大きなアドバンテージです。

メリット4：実装がとにかく簡単！初心者でも安心

何よりも、実装が驚くほど簡単なのがこの方法の魅力です。
後ほど詳しく解説しますが、基本的なHTMLの知識さえあれば、HTML初心者の方でも数行のコードでアコーディオンを設置できます。
これまでJavaScriptの複雑さに挫折してしまった経験がある方も、ぜひ挑戦してみてください。

【コピペOK】HTMLとCSSで作るアコーディオン実装ガイド

それでは、実際にアコーディオンを作成していきましょう。コードはそのままコピー＆ペーストして使えるので、ぜひご自身の環境で試してみてください。

See the Pen アコーディオン by take it easy (@take-it-easy) on CodePen.

骨格を作るHTMLの書き方 (detailsとsummaryタグ)

まず、アコーディオンの骨格となるHTMLを記述します。
必要なのは<details>タグと<summary>タグの2つだけです。

<details>
  <summary>ここをクリックすると内容が開きます</summary>
  <p>
    こちらがアコーディオンで表示されるコンテンツです。
    段落だけでなく、リストや画像なども入れることができます。
  </p>
</details>

<details>：アコーディオン全体を囲むタグです。
<summary>：常に表示される見出し部分です。ユーザーはこの部分をクリックします。

たったこれだけで、クリックで開閉する機能を持ったアコーディオンが完成します。

ちなみに、最初から開いた状態にしておきたい場合は、以下のように<details>タグにopen属性を追加するだけです。

<details open>
  <summary>このアコーディオンは最初から開いています</summary>
  <p>open属性を指定するだけで、初期表示状態を制御できます。</p>
</details>

見た目を整えるCSSの基本デザイン

HTMLだけでは少し素っ気ないので、CSSで見やすく、使いやすいデザインに整えましょう。
以下のCSSをコピペして適用してみてください。

/* アコーディオン全体 */
details {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* 見出し部分 */
details summary {
  font-weight: bold;
  cursor: pointer; /* カーソルを指マークに */
  padding: 1rem;
  outline: none; /* クリック時の枠線を消す */
}

/* 詳細コンテンツ部分 */
details div {
  padding: 1rem;
  border-top: 1px solid #ccc;
}

ポイント：詳細コンテンツを<p>タグではなく<div>タグで囲み、paddingを指定することで、より柔軟なレイアウトに対応しやすくなります。

【デザイン応用①】デフォルトの三角マークを消してアイコンを変更する

ブラウザが標準で表示する三角マーク（マーカー）は、デザインの統一感を損なうことがあります。
これをCSSで消して、オリジナルのアイコンに置き換えてみましょう。

summaryのスタイルに、list-style: none;を追加するだけです。（※一部ブラウザ向けに::-webkit-details-markerも指定します）

details summary {
  list-style: none; /* 標準のマーカーを消す (Firefoxなど) */
}

details summary::-webkit-details-marker {
  display: none; /* 標準のマーカーを消す (Chrome, Safari) */
}

これでdetails マーカー非表示が実現できました。この状態で、CSSの疑似要素（::after）を使えば、好きなアイコンを変更して配置できます。

details summary {
  position: relative; /* アイコンの位置を決める基準にする */
  padding-right: 2.5rem; /* アイコン分の余白を確保 */
  /* 他のスタイルは省略 */
}

details summary::after {
  content: '▼'; /* 表示するアイコン */
  font-size: 1rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

【デザイン応用②】開閉状態でアイコンを切り替えるCSSテクニック

さらに、アコーディオンが開閉するのに合わせてアイコンが自動で切り替わると、より親切なデザインになります。
これは、detailsタグがopen属性を持つ時だけ適用されるCSSセレクタdetails[open]を使うことで、CSSだけで簡単に実現できます。

/* 開いている時のアイコン */
details[open] summary::after {
  content: '▲';
}

もっと知りたい！アコーディオン活用のための知識

基本的な実装方法をマスターしたら、さらに活用するための知識も身につけておきましょう。

WordPressで使うには？カスタムHTMLブロックが便利

WordPressのサイトでこのアコーディオンを使いたい場合、投稿編集画面の「カスタムHTML」ブロックを利用するのが最も簡単で安全です。
ブロックを追加し、これまでに紹介したHTMLとCSS（CSSは<style>タグで囲むか、テーマの追加CSSに記述）を貼り付けるだけで、記事内によくある質問コーナーなどを設置できます。

対応ブラウザと、古いブラウザ（IE）への考え方

ご紹介した<details>タグは、主要なモダンブラウザ（Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge）で完全にサポートされています。

Internet Explorer（IE）ではサポートされていませんが、IEのサポートは2022年6月に終了しており、Microsoftも後継のEdgeブラウザへの移行を推奨しています。
そのため、現在ではほとんどのWebサイトで安心して利用できるHTML機能と言えます。

より詳しい仕様や最新情報については、Web技術の公式ドキュメントであるMDN Web Docsを参照することをおすすめします。

: 詳細折りたたみ要素 - HTML | MDN

は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは要素を使用して提供する必要があります。

: 概要明示要素 - HTML | MDN

は HTML の要素で、要素の折りたたみボックスの要約、キャプション、説明、凡例を表します。要素をクリックすると、親の要素の開閉状態を切り替えることができます。

アコーディオンのデザイン事例とインスピレーション

CSSを工夫すれば、アコーディオンのデザインは無限に広がります。
例えば、見出し部分の背景色を変えたり、開いた時に影をつけたり、コンテンツ部分に背景色を設定したりすることで、サイトの雰囲気に合わせたオリジナルデザインを作ることができます。
様々なWebサイトのデザインを参考に、自分だけのアコーディオンを作ってみましょう。

よくある質問（FAQ）

Q
JavaScriptで作るアコーディオンと、今回の方法の違いは何ですか？: A

JavaScript製は複雑なアニメーションを付けられるなど自由度が高い反面、実装が複雑で、ライブラリによってはサイトが重くなることがあります。
HTMLの<details>タグを使う方法は、実装が非常に簡単で軽量、かつアクセシビリティにも標準で優れているのが大きな違いです。

Q
アコーディオンの中に、さらに入れ子でアコーディオンを作ることはできますか？: A

はい、可能です。
<details>タグの中に、さらに別の<details>タグを記述することで、入れ子構造のアコーディオンを作成できます。

Q
アイコンをFont AwesomeやSVG画像にすることはできますか？: A

はい、可能です。CSSの::after疑似要素のcontentプロパティにFont Awesomeのユニコードを指定したり、background-imageプロパティでSVGを指定したりすることで、テキスト以外のアイコンも利用できます。