よくある質問や、長い補足説明をそのまま並べると、ページが縦に長くなって読みにくくなってしまいます。

この記事では、コピペするだけで使えるアコーディオン（クリックで開閉する折りたたみ）を20個まとめました。
よくある質問のQ＆A形式から、目次風、「もっと見る」ボタン型まで、場面ごとに使い分けられる種類を用意しています。

どれもHTMLのdetails・summaryタグとCSSだけで動くので、JavaScriptは必要ありません。
これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、アコーディオンを表示したい場所に貼り付けます。

質問はsummaryタグの中、答えはその下のdivタグの中に書き込みます。
最初から開いた状態にしたい時は、detailsタグに「open」と書き足してください（10番のサンプルがこの形です）。

01. シンプルな下線区切り

項目の下に線を引いただけの、どんなサイトにもなじむ定番タイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc01"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc01-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc01 summary { list-style: none; cursor: pointer; }
.kts-acc01 summary::-webkit-details-marker { display: none; }
.kts-acc01 { border-bottom: 1px solid #E5E7EB; font-family: sans-serif; }
.kts-acc01 summary { padding: 14px 4px; font-weight: 700; color: #111827; }
.kts-acc01-body { padding: 0 4px 14px; color: #4B5563; font-size: 14px; }

02. 枠線で囲んだボックス型

1つずつ枠で囲んで、項目の区切りをはっきり見せるタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc02"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc02-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc02 summary { list-style: none; cursor: pointer; }
.kts-acc02 summary::-webkit-details-marker { display: none; }
.kts-acc02 { border: 1px solid #D1D5DB; border-radius: 8px; font-family: sans-serif; }
.kts-acc02 summary { padding: 14px 16px; font-weight: 700; color: #1F2937; }
.kts-acc02-body { padding: 0 16px 16px; color: #4B5563; font-size: 14px; }

03. ＋と－のアイコン付き

閉じている時は＋、開くと－に変わる、状態がわかりやすいタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc03"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc03-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc03 summary { list-style: none; cursor: pointer; }
.kts-acc03 summary::-webkit-details-marker { display: none; }
.kts-acc03 { border-bottom: 1px solid #E5E7EB; font-family: sans-serif; }
.kts-acc03 summary { position: relative; padding: 14px 36px 14px 4px; font-weight: 700; color: #111827; }
.kts-acc03 summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 22px; color: #3B82F6; }
.kts-acc03[open] summary::after { content: "−"; }
.kts-acc03-body { padding: 0 4px 14px; color: #4B5563; font-size: 14px; }

04. 矢印が回転するタイプ

右端の矢印が、開くとくるっと下向きに回るタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc04"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc04-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc04 summary { list-style: none; cursor: pointer; }
.kts-acc04 summary::-webkit-details-marker { display: none; }
.kts-acc04 { border: 1px solid #E5E7EB; border-radius: 8px; font-family: sans-serif; }
.kts-acc04 summary { position: relative; padding: 14px 40px 14px 16px; font-weight: 700; color: #111827; }
.kts-acc04 summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #6B7280; border-bottom: 2px solid #6B7280; transform: translateY(-70%) rotate(-45deg); transition: transform .3s; }
.kts-acc04[open] summary::after { transform: translateY(-70%) rotate(45deg); }
.kts-acc04-body { padding: 0 16px 16px; color: #4B5563; font-size: 14px; }

05. Q＆A形式

質問にQ、答えにAの丸アイコンを付けた、よくある質問の定番スタイルです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc05"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc05-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc05 summary { list-style: none; cursor: pointer; }
.kts-acc05 summary::-webkit-details-marker { display: none; }
.kts-acc05 { border-bottom: 1px dashed #D1D5DB; font-family: sans-serif; }
.kts-acc05 summary, .kts-acc05-body { position: relative; padding: 14px 8px 14px 44px; }
.kts-acc05 summary { font-weight: 700; color: #111827; }
.kts-acc05-body { padding-top: 0; color: #4B5563; font-size: 14px; }
.kts-acc05 summary::before, .kts-acc05-body::before { position: absolute; left: 4px; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; text-align: center; font-weight: 700; color: #fff; }
.kts-acc05 summary::before { content: "Q"; top: 10px; background: #2563EB; }
.kts-acc05-body::before { content: "A"; top: -4px; background: #F97316; }

06. 見出しに背景色を付けたタイプ

質問部分に薄い背景色を敷いて、見出しを目立たせるタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc06"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc06-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc06 summary { list-style: none; cursor: pointer; }
.kts-acc06 summary::-webkit-details-marker { display: none; }
.kts-acc06 { border-radius: 8px; overflow: hidden; font-family: sans-serif; }
.kts-acc06 summary { padding: 14px 16px; background: #EFF6FF; font-weight: 700; color: #1E40AF; }
.kts-acc06-body { padding: 14px 16px; background: #fff; border: 1px solid #EFF6FF; border-top: 0; color: #4B5563; font-size: 14px; }

07. 左の線がアクセントのタイプ

左側に太い線を入れた、すっきりとした印象のタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc07"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc07-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc07 summary { list-style: none; cursor: pointer; }
.kts-acc07 summary::-webkit-details-marker { display: none; }
.kts-acc07 { border-left: 4px solid #10B981; background: #F9FAFB; font-family: sans-serif; }
.kts-acc07 summary { padding: 14px 16px; font-weight: 700; color: #065F46; }
.kts-acc07-body { padding: 0 16px 14px; color: #4B5563; font-size: 14px; }

08. 影付きのカード型

ふんわりとした影で、カードが浮いているように見せるタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc08"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc08-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc08 summary { list-style: none; cursor: pointer; }
.kts-acc08 summary::-webkit-details-marker { display: none; }
.kts-acc08 { background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.08); font-family: sans-serif; }
.kts-acc08 summary { padding: 16px 20px; font-weight: 700; color: #111827; }
.kts-acc08-body { padding: 0 20px 18px; color: #4B5563; font-size: 14px; }

09. 番号付きのタイプ

項目の頭に番号を付けて、手順や順番を見せたい時に使えるタイプです。

実際の見た目

01申し込みフォームに入力する

お名前・連絡先・希望日時を入力して送信してください。

HTMLコード

<details class="kts-acc09"><summary><span>01</span>申し込みフォームに入力する</summary><div class="kts-acc09-body">お名前・連絡先・希望日時を入力して送信してください。</div></details>

CSSコード

.kts-acc09 summary { list-style: none; cursor: pointer; }
.kts-acc09 summary::-webkit-details-marker { display: none; }
.kts-acc09 { border-bottom: 1px solid #E5E7EB; font-family: sans-serif; }
.kts-acc09 summary { display: flex; align-items: center; gap: 12px; padding: 14px 4px; font-weight: 700; color: #111827; }
.kts-acc09 summary span { font-size: 20px; color: #8B5CF6; }
.kts-acc09-body { padding: 0 4px 14px 48px; color: #4B5563; font-size: 14px; }

10. 開くと色が変わるタイプ

開いている項目だけ見出しの色が変わる、今どこを読んでいるかわかりやすいタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc10" open><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc10-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc10 summary { list-style: none; cursor: pointer; }
.kts-acc10 summary::-webkit-details-marker { display: none; }
.kts-acc10 { border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; font-family: sans-serif; }
.kts-acc10 summary { padding: 14px 16px; font-weight: 700; color: #374151; background: #fff; transition: background .3s, color .3s; }
.kts-acc10[open] summary { background: #0EA5E9; color: #fff; }
.kts-acc10-body { padding: 14px 16px; color: #4B5563; font-size: 14px; }

11. 丸いピル型

見出しを丸いボタンのような形にした、やわらかい印象のタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc11"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc11-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc11 summary { list-style: none; cursor: pointer; }
.kts-acc11 summary::-webkit-details-marker { display: none; }
.kts-acc11 { font-family: sans-serif; }
.kts-acc11 summary { padding: 12px 22px; border-radius: 999px; background: #FCE7F3; font-weight: 700; color: #9D174D; }
.kts-acc11-body { padding: 12px 22px; color: #4B5563; font-size: 14px; }

12. ダークカラーのタイプ

黒系の背景で、引き締まった印象にしたい時のタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc12"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc12-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc12 summary { list-style: none; cursor: pointer; }
.kts-acc12 summary::-webkit-details-marker { display: none; }
.kts-acc12 { background: #1F2937; border-radius: 8px; font-family: sans-serif; }
.kts-acc12 summary { padding: 14px 16px; font-weight: 700; color: #F9FAFB; }
.kts-acc12-body { padding: 0 16px 16px; color: #D1D5DB; font-size: 14px; }

13. グラデーション見出し

見出しにグラデーションをかけた、華やかなタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc13"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc13-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc13 summary { list-style: none; cursor: pointer; }
.kts-acc13 summary::-webkit-details-marker { display: none; }
.kts-acc13 { border-radius: 10px; overflow: hidden; border: 1px solid #EDE9FE; font-family: sans-serif; }
.kts-acc13 summary { padding: 14px 18px; background: linear-gradient(90deg, #6366F1, #A855F7); font-weight: 700; color: #fff; }
.kts-acc13-body { padding: 14px 18px; color: #4B5563; font-size: 14px; }

14. 絵文字アイコン付き

見出しの頭に絵文字を入れて、内容をひと目で伝えるタイプです。

実際の見た目

📦配送について

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc14"><summary><span>📦</span>配送について</summary><div class="kts-acc14-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc14 summary { list-style: none; cursor: pointer; }
.kts-acc14 summary::-webkit-details-marker { display: none; }
.kts-acc14 { border: 1px solid #FDE68A; border-radius: 8px; background: #FFFBEB; font-family: sans-serif; }
.kts-acc14 summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; color: #92400E; }
.kts-acc14 summary span { font-size: 20px; }
.kts-acc14-body { padding: 0 16px 14px 46px; color: #78350F; font-size: 14px; }

15. 小さめの補足タイプ

「詳しく見る」のように、本文の補足をそっと隠しておく控えめなタイプです。

実際の見た目

詳しく見る

土日祝日のご注文は、翌営業日の発送となります。

HTMLコード

<details class="kts-acc15"><summary>詳しく見る</summary><div class="kts-acc15-body">土日祝日のご注文は、翌営業日の発送となります。</div></details>

CSSコード

.kts-acc15 summary { list-style: none; cursor: pointer; }
.kts-acc15 summary::-webkit-details-marker { display: none; }
.kts-acc15 { font-size: 13px; font-family: sans-serif; }
.kts-acc15 summary { display: inline-block; color: #2563EB; text-decoration: underline; }
.kts-acc15 summary::before { content: "▶ "; font-size: 10px; }
.kts-acc15[open] summary::before { content: "▼ "; }
.kts-acc15-body { margin-top: 6px; padding: 10px 12px; background: #F3F4F6; border-radius: 6px; color: #4B5563; }

16. 「もっと見る」ボタン型

ボタンを押すと続きが表示される、長い説明をすっきり見せるタイプです。

実際の見た目

もっと見る

素材にこだわり、職人が一つひとつ手作業で仕上げています。サイズ違いのご相談も承ります。

HTMLコード

<details class="kts-acc16"><summary>もっと見る</summary><div class="kts-acc16-body">素材にこだわり、職人が一つひとつ手作業で仕上げています。サイズ違いのご相談も承ります。</div></details>

CSSコード

.kts-acc16 summary { list-style: none; cursor: pointer; }
.kts-acc16 summary::-webkit-details-marker { display: none; }
.kts-acc16 { text-align: center; font-family: sans-serif; }
.kts-acc16 summary { display: inline-block; padding: 10px 28px; border: 2px solid #111827; border-radius: 999px; font-size: 14px; font-weight: 700; color: #111827; }
.kts-acc16[open] summary { background: #111827; color: #fff; }
.kts-acc16-body { margin-top: 12px; text-align: left; color: #4B5563; font-size: 14px; }

17. 中にリストを入れた目次風

開くと項目の一覧が出る、目次やメニューとして使えるタイプです。

実際の見た目

この記事の目次

1. はじめに2. 使い方3. まとめ

HTMLコード

<details class="kts-acc17"><summary>この記事の目次</summary><div class="kts-acc17-body"><a href="#">1. はじめに</a><a href="#">2. 使い方</a><a href="#">3. まとめ</a></div></details>

CSSコード

.kts-acc17 summary { list-style: none; cursor: pointer; }
.kts-acc17 summary::-webkit-details-marker { display: none; }
.kts-acc17 { border: 1px solid #D1D5DB; border-radius: 8px; background: #F9FAFB; font-family: sans-serif; }
.kts-acc17 summary { padding: 12px 16px; font-weight: 700; color: #111827; }
.kts-acc17-body { padding: 0 16px 12px; }
.kts-acc17-body a { display: block; padding: 6px 0; border-top: 1px dotted #D1D5DB; color: #2563EB; text-decoration: none; font-size: 14px; }

18. 点線枠のやわらかいタイプ

点線で囲んだ、手作り感のあるやさしい印象のタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc18"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc18-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc18 summary { list-style: none; cursor: pointer; }
.kts-acc18 summary::-webkit-details-marker { display: none; }
.kts-acc18 { border: 2px dashed #FDBA74; border-radius: 14px; background: #FFF7ED; font-family: sans-serif; }
.kts-acc18 summary { padding: 14px 18px; font-weight: 700; color: #C2410C; }
.kts-acc18-body { padding: 0 18px 16px; color: #7C2D12; font-size: 14px; }

19. 複数の質問をまとめたFAQグループ

いくつかの質問を1つの枠にまとめて、区切り線で並べるタイプです。

実際の見た目

HTMLコード

<div class="kts-acc19">
  <details><summary>送料はいくらですか？</summary><div class="kts-acc19-body">5,000円以上のご注文で送料無料です。</div></details>
  <details><summary>返品はできますか？</summary><div class="kts-acc19-body">商品到着後7日以内であれば承ります。</div></details>
  <details><summary>支払い方法は？</summary><div class="kts-acc19-body">クレジットカード・銀行振込に対応しています。</div></details>
</div>

CSSコード

.kts-acc19 summary { list-style: none; cursor: pointer; }
.kts-acc19 summary::-webkit-details-marker { display: none; }
.kts-acc19 { border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; font-family: sans-serif; }
.kts-acc19 details + details { border-top: 1px solid #E5E7EB; }
.kts-acc19 summary { padding: 14px 16px; font-weight: 700; color: #111827; }
.kts-acc19 details[open] summary { color: #DB2777; }
.kts-acc19-body { padding: 0 16px 14px; color: #4B5563; font-size: 14px; }

20. 中身がふわっと表示されるタイプ

開いた時に、中身がふわっと浮かび上がるアニメーション付きのタイプです。

実際の見た目

配送にはどれくらいかかりますか？

ご注文から3〜5日ほどでお届けします。

HTMLコード

<details class="kts-acc20"><summary>配送にはどれくらいかかりますか？</summary><div class="kts-acc20-body">ご注文から3〜5日ほどでお届けします。</div></details>

CSSコード

.kts-acc20 summary { list-style: none; cursor: pointer; }
.kts-acc20 summary::-webkit-details-marker { display: none; }
.kts-acc20 { border: 1px solid #E5E7EB; border-radius: 8px; font-family: sans-serif; }
.kts-acc20 summary { padding: 14px 16px; font-weight: 700; color: #111827; }
.kts-acc20-body { padding: 0 16px 16px; color: #4B5563; font-size: 14px; }
.kts-acc20[open] .kts-acc20-body { animation: kts-acc20-fade .4s ease; }
@keyframes kts-acc20-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

カスタマイズの小ワザ

• 項目を増やしたい時は、detailsタグをまるごとコピーして並べてください。
• 最初から開いておきたい項目は、<details class=”…” open>のようにopenを付けます。
• 矢印や＋のアイコン（03・04番）は、CSSの疑似要素で描いているので、画像は必要ありません。
• よくある質問のページでは、Q＆A形式（05番）や複数まとめ型（19番）が読みやすくおすすめです。
• 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。

まとめ｜早見表

使いたい場面	該当するアコーディオン
シンプルに使いたい	01, 02, 07
開閉の状態を見せたい	03, 04, 10
よくある質問	05, 19
手順を見せたい	09
目立たせたい	06, 12, 13
やわらかい雰囲気	11, 14, 18
補足・続きを隠す	15, 16
目次・メニュー	17
動きを付けたい	20

20個のアコーディオンは、details・summaryタグとCSSだけで動き、JavaScriptは不要である。よくある質問・補足説明・目次など、用途に応じて使い分けられる。