【2026年9月最新】HTMLでアコーディオンを作る方法｜details/summary要素の使い方からCSSカスタマイズまで完全解説
aikanri-admin
「見出しをクリックすると中身が開閉する、あのUI部品を自社サイトにも入れたい」——FAQページやLPを作る中で、多くの担当者が一度は検討するのがアコーディオン表示です。
アコーディオンは、見出し部分だけを常に表示し、クリック（タップ）することで詳細な内容を開閉できるUIパーツです。実は特別なJavaScriptライブラリを使わなくても、HTML標準の機能だけで実装できることをご存知でしょうか。
この記事では、HTML標準のdetails・summary要素を使ったアコーディオンの作り方から、CSSでのカスタマイズ方法、メリット・デメリット、SEOへの影響まで一通り解説します。後半では、弊社（株式会社GENAI）がClaude CodeでLPのUIパーツ実装をどこまで自動化しているかの実例も紹介します。
代表菅澤
AI鬼管理山崎
この記事を最後まで読むと、次のことが分かります。
01 WHAT IS ACCORDION アコーディオン表示とは何か クリックで開閉するUIパーツの基本概念
📚 用語解説
アコーディオン（Accordion UI）：見出し部分をクリック（タップ）することで、その下に隠れている詳細な内容を開閉表示できるUIパーツ。楽器のアコーディオンが蛇腹状に伸び縮みする様子になぞらえてこう呼ばれています。
よく使われる場面としては、FAQ（よくある質問）ページ、料金プランの詳細説明、スマートフォン向けのメニュー、長い規約文などが挙げられます。情報量が多いページで、必要な情報だけを選んで見てもらいたいときに効果を発揮するUIパターンです。
アコーディオンにはjQueryや専用ライブラリを使う実装方法も存在しますが、この記事ではまずHTML5で標準搭載されているdetails/summary要素を軸に解説します。追加のJavaScriptを書かなくても、HTML本体の機能だけで開閉が実現できる点が最大の利点です。
弊社が業務自動化の導入支援を行う中でも、「LPの改修を依頼するたびに、制作会社とのやり取りに数日かかる」という相談をよくいただきます。アコーディオンのような小さなUIパーツの追加・修正であればなおさら、外部依頼のリードタイムが割に合わないと感じる場面は少なくありません。この記事の後半では、こうした小規模な実装作業をAIエージェントに任せることで、依頼から反映までの時間をどこまで圧縮できるかについても触れていきます。
02 DETAILS & SUMMARY details要素とsummary要素で作る HTML標準機能だけで実装する最もシンプルな方法
📚 用語解説
details要素：開閉可能な詳細情報のブロックを作るHTML要素。ブラウザ標準の機能として、JavaScriptを一切使わずにクリックでの開閉が実現できます。
📚 用語解説
summary要素：details要素の中に必ず1つ配置する、常に表示されている見出し部分の要素。ここをクリックすることでdetails内の残りのコンテンツが開閉します。
<details>
<summary>セクション1</summary>
ここに詳細な内容が入ります。
</details>
これだけで、「セクション1」という見出しをクリックすると詳細内容が開閉するアコーディオンが完成します。
最初から開いた状態にしておきたい場合は、detailsタグにopen属性を追加します。
<details open>
<summary>重要なお知らせ</summary>
このセクションは最初から開いています。
</details>
| 要素 | 役割 |
|---|---|
| details | 開閉可能なブロック全体を定義する親要素 |
| summary | details内に配置する、常時表示される見出し部分 |
AI鬼管理山崎
📚 用語解説
toggleイベント：details要素が開閉されたタイミングで自動的に発生するJavaScriptのイベント。addEventListener('toggle', ...)のように監視することで、「開いたときだけ広告を非表示にする」といった追加の制御も可能です。
03 CSS CUSTOMIZATION CSSでのカスタマイズ方法 標準の矢印デザインを自社サイトの雰囲気に合わせる
details/summary要素は初期状態だと、ブラウザ標準の三角矢印（▶マーク）が表示されます。デザインを整えるには、この矢印を消したり、独自のアイコンに差し替えたりするCSSカスタマイズが必要になります。
Chrome・FirefoxなどはCSSのsummary { list-style: none; }で矢印を消せますが、Safariでは同じ指定だけでは消えないことがあり、summary::-webkit-details-marker { display: none; }を併用する必要があります。両方を指定しておくと主要ブラウザに対応できます。
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; margin-right: 8px; }
details[open] summary::before { content: "−"; }
これにより、標準の三角矢印の代わりに「＋／－」のアイコンで開閉状態を表現できます。
📚 用語解説
details[open] セレクタ：「開いている状態のdetails要素」だけに対してCSSを適用するための属性セレクタ。details[open] summary { ... }のように書くことで、「開いているときだけ見出しの背景色を変える」といった制御ができます。
summary { background-color: #f8f9fa; padding: 12px; cursor: pointer; }
summary:hover { background-color: #e7e7e7; }
details[open] summary { background-color: #dc2626; color: #fff; }
details/summary要素の開閉は、標準のままだとアニメーションなしで瞬時に切り替わります。「ふわっと開く」ような滑らかな動きを付けたい場合は、CSSのgrid-template-rowsを0frと1frで切り替えるテクニックや、JavaScriptで高さを計算してtransitionを適用する追加実装が必要です。
3-1. 複数のアコーディオンを排他的に開閉する
FAQページでよくある「1つ開いたら他は自動的に閉じる」という挙動は、details要素に共通のname属性を指定することで実現できます。
<details name="faq"><summary>質問1</summary>回答1</details>
<details name="faq"><summary>質問2</summary>回答2</details>
同じname属性の値を持つdetails要素同士は、1つを開くと他が自動的に閉じるグループとして扱われます。
この機能は近年のモダンブラウザで対応が進んだ比較的新しいHTML仕様です。古いブラウザへの対応が必須のサイトでは、代替としてJavaScriptで排他制御を実装するか、事前に主要ブラウザでの動作確認を行うことを推奨します。
04 ACCESSIBILITY details/summary要素のアクセシビリティ上の利点 キーボード操作・スクリーンリーダー対応が標準で備わっている
details/summary要素を使う大きな利点として見落とされがちなのがアクセシビリティ（利用しやすさ）対応が標準で組み込まれている点です。div要素とJavaScriptだけで自作したアコーディオンでは、こうした対応を開発者自身が追加実装する必要があります。
📚 用語解説
アクセシビリティ：キーボード操作しかできない人、スクリーンリーダー（画面の内容を音声で読み上げるソフト）を使う視覚障害のある人など、様々な利用状況の人がサイトを問題なく使えるようにする設計上の配慮全般を指します。
div要素とJavaScriptだけでアコーディオンを自作する場合、role="button"・aria-expanded・tabindexなどのARIA属性を開発者が手動で付与し、開閉状態に応じて値を切り替える処理まで自前で実装する必要があります。details/summary要素であればこれらが標準で担保されます。
代表菅澤
05 PROS AND CONS アコーディオン表示のメリット・デメリット 導入前に押さえておきたい両面
4-1. メリット
4-2. デメリット
代表菅澤
06 OTHER METHODS HTML以外でアコーディオンを作る方法 JavaScript・CSSのみ・WordPressプラグインとの比較
| 実装方法 | 特徴 | 向いているケース |
|---|---|---|
| details/summary（HTML標準） | JS不要、アクセシビリティ対応済み、開閉アニメーションは自前実装が必要 | シンプルなFAQ・料金詳細など |
| JavaScript / jQuery | 開閉アニメーション・複雑な制御が自由に作れる | 凝った演出やアニメーションが必要な場合 |
| CSSのみ（チェックボックスハック） | JS不要でアニメーションも付けられるが実装がやや複雑 | JS不要かつアニメーションも欲しい場合 |
| WordPressプラグイン | コーディング不要で管理画面から設定できる | ノーコードで運用したいサイト |
📚 用語解説
チェックボックスハック：HTMLの<input type="checkbox">と<label>を組み合わせ、CSSの疑似クラス（:checked）を使ってJavaScriptなしで開閉やアニメーションを実現するテクニック。実装はやや複雑になりますが、アニメーション付きのアコーディオンをJS無しで作りたい場合に使われます。
自社サイトがWordPressで構築されている場合、専用のブロックやプラグインを使えばコーディングなしでアコーディオンを設置できます。一方、LPのようにデザインの自由度や表示速度を重視する場面では、details/summary要素またはCSS/JSでの直接実装の方が細かい調整がしやすい傾向にあります。
6-1. プラグインを使う際の注意点
WordPressのアコーディオン系プラグインは手軽に導入できる反面、プラグイン自体が読み込む追加のCSS/JavaScriptによってページの表示速度が低下することがあります。既に他のプラグインを多数導入しているサイトでは、プラグインの競合や表示速度への影響を事前に確認してから本番反映することをおすすめします。
ページ表示速度はSEO・コンバージョン率の両方に影響する要素です。アコーディオンの数が少ない、あるいはLPのように速度がシビアに問われるページでは、プラグインに頼らずdetails/summary要素を直接コーディングする方が、余計な読み込みを増やさずに済みます。
どの実装方法を選ぶべきか迷ったときは、以下の判断フローに沿って考えると整理しやすくなります。
不要？
→details/summaryで
十分
運用したい？
→WordPress
プラグイン
必要？
→JavaScript/
jQuery
アニメも欲しい？
→CSSのみ
（チェックボックスハック）
07 SEO IMPACT アコーディオン表示とSEOの関係 「隠れたテキストは評価されない」は本当か
「アコーディオンで隠れているテキストは、Googleに正しく評価されないのでは？」という疑問はよく聞かれます。この点についてGoogleは公式に見解を示しており、タブやアコーディオンの中に隠れているコンテンツも、表示されているコンテンツと同様にクロール・インデックスされるとしています。
モバイルファーストインデックスの文脈でGoogleが明言しているのは、「見た目上折りたたまれているだけのコンテンツは、隠しテキストとしてペナルティの対象にはならない」という点です。ユーザー体験のためにアコーディオンで整理すること自体は、SEO上のマイナス要因にはなりません。
SEO評価上は問題なくても、重要な訴求文まで折りたたんでしまうと、ユーザーがクリックせずに離脱し、結果的にコンバージョン率が下がるリスクがあります。SEOとUXは別軸の話として、「見せるべき情報」と「畳んでよい情報」を分けて設計することが重要です。
AI鬼管理山崎
08 FOR NON-ENGINEERS 【独自】非エンジニアが知っておくべき「使いどころの判断」 LP・サイト制作を依頼する立場での視点
ここからは視点を変えて、自社のLP・サイト制作を外部や社内の担当者に依頼する経営者・マーケティング担当者に向けた内容です。「この部分はアコーディオンにしましょう」という提案を受けたとき、それが本当に適切かを判断する基準を持っておくと、制作物のクオリティコントロールに役立ちます。
「このアコーディオンは開閉アニメーション付きですか？」「スマホでの表示は確認済みですか？」の2点を聞くだけでも、実装の丁寧さがある程度判断できます。標準のdetails/summary要素をそのまま使っただけの実装は、ブラウザ標準の見た目のままになっている場合があります。
09 GENAI CASE STUDY 【独自データ】Claude CodeでLPのUI実装を代行させる 弊社が実際にどこまでAIエージェントへ任せているか
弊社（株式会社GENAI）ではClaude Max 20xプラン（月額$200、約30,000円）を契約し、経営・営業・広告・経理・秘書業務に加えてLP・サイトのUI実装にもClaude Codeを日常的に使っています。ここでは、アコーディオンのようなUIパーツの実装をAIエージェントにどこまで任せられるかを、実運用の感覚で共有します。
| 作業内容 | 従来の所要時間（目安） | Claude Code活用時 |
|---|---|---|
| FAQ用アコーディオンの新規実装 | 30分〜1時間（クロスブラウザ確認込み） | 数分〜（指示から実装・見た目調整まで） |
| 既存デザインに合わせた矢印・配色の調整 | 20〜30分（CSSの試行錯誤） | デザイン画像を渡すだけで近い見た目を再現 |
| スマホ表示の崩れ修正 | 30分〜（実機・エミュレータ確認込み） | スクリーンショットを渡すだけで原因特定・修正 |
上記は弊社の肌感ベースの数値であり、既存サイトの複雑さやデザイン要件によって変動します。あくまで「AIエージェントをUI実装業務に組み込むとどの程度の体感差が出るか」の参考情報としてご覧ください。
Claude Codeは、HTML/CSSの記述からブラウザでの見た目確認、修正までを一連の流れとして自律的に行えるエージェント型のAIです。「このFAQセクションをアコーディオンにして、開いたときにふわっと動くようにして」といった日本語の指示を渡すだけで、必要なコードを判断して実装してくれます。
日本語で
やりたい見た目を伝える
Claude Codeが
HTML/CSSを実装
表示崩れ等を
自動でチェック
問題があれば
自律的に修正
代表菅澤
もちろん、この記事で紹介したdetails/summaryの基礎知識があれば、AIが出したコードを見て「開閉の仕組みが正しく実装されているか」を検証できます。「何をしているか分かった上で、実際の手数はAIに任せる」というのが、非エンジニアの経営者にとって最も現実的なスタンスです。
9-1. 非エンジニアがAIエージェントに任せる際の注意点
AI鬼管理山崎
10 CONCLUSION まとめ ── アコーディオンの基礎と、UI実装の未来 知識とAI活用は両立する
この記事では、HTML標準のdetails/summary要素を使ったアコーディオンの作り方、CSSカスタマイズ、メリット・デメリット、他の実装方法との比較、SEOへの影響、そして非エンジニアが押さえておくべき視点までを整理しました。最後にポイントを振り返ります。
最後にお伝えしたいのは、「HTMLの基礎を理解すること」と「AIエージェントに実装を任せること」は対立しないという点です。基礎を理解している人ほど、AIの出力を正しく検証でき、結果としてサイト制作全体のスピードと品質の両方が上がります。
代表菅澤
LP・サイトのUI改善、AIエージェントでどこまで圧縮できるか診断します
UI実装・表示崩れ対応など、目に見えにくい制作工数をどこまでAIに任せられるか。
弊社の実運用ノウハウをベースに、個別に導入設計のご相談を承ります。
AI鬼管理山崎
ここから先の進め方は、大きく2つあります。
自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。
覚えるより任せたい方は、AI社員AIKATAでこの記事のような定型業務を丸ごと預ける道があります。料金は月30万円の月額定額、追加費用は0円です。
どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
よくある質問
Q. details/summary要素はすべてのブラウザで使えますか？
A. 主要なモダンブラウザ（Chrome・Firefox・Safari・Edge）では標準対応しています。ただし矢印のカスタマイズなど一部のCSSの挙動はブラウザによって差異があるため、複数ブラウザでの表示確認をおすすめします。
Q. アコーディオンを開いたときにふわっとアニメーションさせることはできますか？
A. 標準のdetails/summary要素だけではアニメーションは付きません。CSSのgrid-template-rowsを利用したテクニックや、JavaScriptで高さを計算してtransitionを適用する実装を追加することで、滑らかな開閉アニメーションを実現できます。
Q. アコーディオンにすると、中の文章はSEOで評価されなくなりますか？
A. Googleは公式に、アコーディオンやタブの中に隠れているコンテンツも表示されているコンテンツと同様にクロール・インデックスされるとしています。折りたたむこと自体がSEO上のペナルティにつながることはありません。
Q. 1つ開いたら他のアコーディオンを自動的に閉じることはできますか？
A. details要素に共通の名前を持つname属性を指定すると、同じグループ内で1つが開くと他が自動的に閉じる挙動を実現できます。古いブラウザへの対応が必要な場合は、事前の動作確認かJavaScriptでの代替実装を検討してください。
Q. WordPressサイトでもdetails/summary要素は使えますか？
A. 使えます。カスタムHTMLブロックや、テーマ・プラグインが提供するコードエディタ機能から直接記述することで実装できます。専用のアコーディオンブロックが用意されているテーマ・プラグインもあります。
Q. アコーディオンを使いすぎるとユーザー体験は悪くなりますか？
A. 重要な情報まで折りたたんでしまうと、クリックされずに見落とされるリスクが高まります。あくまで「興味がある人だけが深掘りする補足情報」の整理に使い、成約に直結する情報は常に見える状態にしておくのが適切な使い方です。
Q. Claude CodeにUI実装を任せる場合、費用はどれくらいかかりますか？
A. 弊社が契約しているClaude Max 20xプランは月額$200（約30,000円）で、UI実装を含む複数の業務用途で共有して使っています。API従量課金とは異なり定額制のため、使えば使うほど追加費用がかさむ心配がない点が導入しやすいポイントです。
Q. details要素はキーボードだけで操作できますか？
A. できます。summary要素はTabキーでフォーカスを移動でき、Enterキーまたはスペースキーで開閉できます。マウスを使わないユーザーでも問題なく操作できる点は、div要素とJavaScriptだけで自作する場合には追加実装が必要な部分です。
Q. アコーディオンの中に画像や表を入れることはできますか？
A. できます。details要素の中にはsummary要素以外の任意のHTML（画像・表・リストなど）を自由に配置できます。ただし折りたたまれた状態では画像の遅延読み込み設定によって表示タイミングに影響が出る場合があるため、実装時に確認しておくと安心です。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
AI鬼管理／AI社員AIKATAへのお問い合わせ
この記事を読んで気になった方へ。
専門スタッフが、御社に最適な
業務自動化・業務代行プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
