KAKERU Designing suetomi

CSSだけで作るアコーディオン｜コピペで使える5種類と、使う・使わないの判断

開け閉めするアコーディオンをCSSだけで コピペで使える5種類と、使う・使わないの判断

「よくある質問」のページで、質問を押すと答えが開き、もう一度押すと閉じる。この開け閉めの部品（アコーディオン）は、HTMLの <details> と <summary> に、CSSで見た目を付けるだけで作れます。JavaScriptは要りません。

使いどころ

質問と答えのように、読む人が「自分に関係ある項目だけ開けばいい」情報に使う。全員に読んでほしい情報（料金・キャンセルの条件など）は、閉じずに最初から見せる。

使うのは、開け閉めする箱の details（ディテールズ）、押すところになる summary（サマリー）、開いているときだけ当てはまる [open] という書き方です。矢印や「＋」の印は、CSSで自分で描きます。

トミー

連載「WEBの技術」の7回目です。
ここまでは「動き」や「飾り」が中心でしたが、今回はページの部品を取り上げます。

完成見本：アコーディオン5種類

下の5つは、ページを開いた時点から「閉じる → 開く → 閉じる」を自動でくり返しています。自動で動いている見本は押せません。実際に押して試せる見本は、後半の「応用」に置いています。

営業時間を教えてください

平日の10時から18時までです。土日と祝日はお休みです。

ARROW1. 矢印が回る
駐車場はありますか？

お店の裏に3台分あります。満車のときは、近くのコインパーキングをご利用ください。

PLUS / MINUS2. ＋が−に変わる
予約は必要ですか？

予約なしでもご来店いただけます。確実にご案内したいときは、前日までにご予約ください。

Q & A3. Q&A（よくある質問）
支払い方法は？

現金とクレジットカードが使えます。

領収書は出せますか？

はい。お会計のときにお申し付けください。

キャンセルできますか？

前日までなら、無料でキャンセルできます。

ONE AT A TIME4. 1つだけ開く
持ち帰りはできますか？

できます。容器代として、1つ30円をいただいています。

FADE IN5. 中身がふわっと出る

※ 見本の質問と答えは、架空のお店のものです。

止めて並べると、こうなります。

閉じた状態
開いた状態
1. 矢印が回る
営業時間を教えてください

平日の10時から18時までです。土日と祝日はお休みです。

営業時間を教えてください

平日の10時から18時までです。土日と祝日はお休みです。

2. ＋が−に変わる
駐車場はありますか？

お店の裏に3台分あります。満車のときは、近くのコインパーキングをご利用ください。

駐車場はありますか？

お店の裏に3台分あります。満車のときは、近くのコインパーキングをご利用ください。

3. Q&A（よくある質問）
予約は必要ですか？

予約なしでもご来店いただけます。確実にご案内したいときは、前日までにご予約ください。

予約は必要ですか？

予約なしでもご来店いただけます。確実にご案内したいときは、前日までにご予約ください。

4. 1つだけ開く
支払い方法は？

現金とクレジットカードが使えます。

領収書は出せますか？

はい。お会計のときにお申し付けください。

キャンセルできますか？

前日までなら、無料でキャンセルできます。

支払い方法は？

現金とクレジットカードが使えます。

領収書は出せますか？

はい。お会計のときにお申し付けください。

キャンセルできますか？

前日までなら、無料でキャンセルできます。

5. 中身がふわっと出る
持ち帰りはできますか？

できます。容器代として、1つ30円をいただいています。

持ち帰りはできますか？

できます。容器代として、1つ30円をいただいています。

※ スマホやパソコンで「動きを減らす」設定をオンにしている方には、印が回る動きや、中身がふわっと出る動きをなくし、すぐに切り替わる形で表示しています。理由は後半の「見る人への配慮」で説明します。

コピペ用のコード

見本ごとに、HTMLとCSSを並べました。HTMLは質問を置きたい場所に、CSSはサイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。質問と答えの文章は書きかえてください。

CSSの前半にある .kd-ac は、5種類に共通する「箱」の指定です。同じページで何種類か使うときは、1回だけ入れれば足ります。クラス名の頭の kd-ac- は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

1. 矢印が回る

右端の矢印が、開くと上向きに回ります。「押すと開く」「今は開いている」が矢印の向きで分かる、いちばん基本の形です。

営業時間を教えてください

平日の10時から18時までです。土日と祝日はお休みです。

自動で再生中
HTML
<details class="kd-ac kd-ac-arrow">
  <summary>営業時間を教えてください</summary>
  <div class="kd-ac-body"><p>平日の10時から18時までです。土日と祝日はお休みです。</p></div>
</details>
CSS
/* 5種類に共通：開け閉めする箱 */
.kd-ac {
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  background: #FFFFFF;
  color: #0F172A;
  text-align: left;
}
/* 押すところ（見出しの行） */
.kd-ac summary {
  position: relative;
  display: block;
  padding: 14px 48px 14px 16px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none; /* 最初から付いている三角を消す */
}
.kd-ac summary::-webkit-details-marker {
  display: none; /* Safari の三角を消す */
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-ac summary:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 2px;
  border-radius: 12px;
}
/* 開いたときに出る中身 */
.kd-ac-body {
  padding: 0 16px 16px;
  line-height: 1.8;
}
.kd-ac-body p {
  margin: 0;
}
.kd-ac-arrow summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #0284C7;
  border-bottom: 2px solid #0284C7;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s ease;
}
.kd-ac-arrow[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
/* 動きを減らす設定の人には、印が回る動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-ac-arrow summary::after {
    transition: none;
  }
}

2. ＋が−に変わる

横の線と縦の線を重ねて「＋」を作り、開くと縦の線が回って横に寝ます。重なって「−」になります。よくある質問のページでよく見る形です。

駐車場はありますか？

お店の裏に3台分あります。満車のときは、近くのコインパーキングをご利用ください。

自動で再生中
HTML
<details class="kd-ac kd-ac-plus">
  <summary>駐車場はありますか？</summary>
  <div class="kd-ac-body"><p>お店の裏に3台分あります。満車のときは、近くのコインパーキングをご利用ください。</p></div>
</details>
CSS
/* 5種類に共通：開け閉めする箱 */
.kd-ac {
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  background: #FFFFFF;
  color: #0F172A;
  text-align: left;
}
/* 押すところ（見出しの行） */
.kd-ac summary {
  position: relative;
  display: block;
  padding: 14px 48px 14px 16px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none; /* 最初から付いている三角を消す */
}
.kd-ac summary::-webkit-details-marker {
  display: none; /* Safari の三角を消す */
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-ac summary:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 2px;
  border-radius: 12px;
}
/* 開いたときに出る中身 */
.kd-ac-body {
  padding: 0 16px 16px;
  line-height: 1.8;
}
.kd-ac-body p {
  margin: 0;
}
.kd-ac-plus summary::before,
.kd-ac-plus summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: #0284C7;
  border-radius: 1px;
}
.kd-ac-plus summary::after {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}
.kd-ac-plus[open] summary::after {
  transform: rotate(180deg);
}
/* 動きを減らす設定の人には、印が回る動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-ac-plus summary::after {
    transition: none;
  }
}

3. Q&A（よくある質問）

質問に「Q」、答えに「A」の印を付けた形です。開くと箱の線が青くなり、どの質問を開いているかが離れて見ても分かります。

予約は必要ですか？

予約なしでもご来店いただけます。確実にご案内したいときは、前日までにご予約ください。

自動で再生中
HTML
<details class="kd-ac kd-ac-faq">
  <summary><span class="kd-ac-q" aria-hidden="true">Q</span>予約は必要ですか？</summary>
  <div class="kd-ac-body"><span class="kd-ac-a" aria-hidden="true">A</span><p>予約なしでもご来店いただけます。確実にご案内したいときは、前日までにご予約ください。</p></div>
</details>
CSS
/* 5種類に共通：開け閉めする箱 */
.kd-ac {
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  background: #FFFFFF;
  color: #0F172A;
  text-align: left;
}
/* 押すところ（見出しの行） */
.kd-ac summary {
  position: relative;
  display: block;
  padding: 14px 48px 14px 16px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none; /* 最初から付いている三角を消す */
}
.kd-ac summary::-webkit-details-marker {
  display: none; /* Safari の三角を消す */
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-ac summary:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 2px;
  border-radius: 12px;
}
/* 開いたときに出る中身 */
.kd-ac-body {
  padding: 0 16px 16px;
  line-height: 1.8;
}
.kd-ac-body p {
  margin: 0;
}
.kd-ac-faq summary,
.kd-ac-faq .kd-ac-body {
  padding-left: 52px;
}
.kd-ac-faq .kd-ac-q,
.kd-ac-faq .kd-ac-a {
  position: absolute;
  left: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
.kd-ac-faq .kd-ac-q {
  top: 12px;
  background: #0369A1;
  color: #FFFFFF;
}
.kd-ac-faq .kd-ac-body {
  position: relative;
}
.kd-ac-faq .kd-ac-a {
  top: 1px;
  background: #E0F2FE;
  color: #0369A1;
}
.kd-ac-faq summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #0284C7;
  border-bottom: 2px solid #0284C7;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s ease;
}
.kd-ac-faq {
  border-color: #D8E6F0;
  transition: border-color 0.3s ease;
}
.kd-ac-faq[open] {
  border-color: #0284C7;
}
.kd-ac-faq[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
/* 動きを減らす設定の人には、色と矢印が変わる動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-ac-faq {
    transition: none;
  }
  .kd-ac-faq summary::after {
    transition: none;
  }
}

4. 1つだけ開く

3つの質問に同じ名前（name="kd-ac-shop"）を付けると、1つを開いたとき、ほかは自動で閉じます。JavaScriptは要りません。開いているのが1つだけなので、ページが長く伸びません。

支払い方法は？

現金とクレジットカードが使えます。

領収書は出せますか？

はい。お会計のときにお申し付けください。

キャンセルできますか？

前日までなら、無料でキャンセルできます。

自動で再生中
HTML
<div class="kd-ac-group">
  <details class="kd-ac kd-ac-one" name="kd-ac-shop">
    <summary>支払い方法は？</summary>
    <div class="kd-ac-body"><p>現金とクレジットカードが使えます。</p></div>
  </details>
  <details class="kd-ac kd-ac-one" name="kd-ac-shop">
    <summary>領収書は出せますか？</summary>
    <div class="kd-ac-body"><p>はい。お会計のときにお申し付けください。</p></div>
  </details>
  <details class="kd-ac kd-ac-one" name="kd-ac-shop">
    <summary>キャンセルできますか？</summary>
    <div class="kd-ac-body"><p>前日までなら、無料でキャンセルできます。</p></div>
  </details>
</div>
CSS
/* 5種類に共通：開け閉めする箱 */
.kd-ac {
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  background: #FFFFFF;
  color: #0F172A;
  text-align: left;
}
/* 押すところ（見出しの行） */
.kd-ac summary {
  position: relative;
  display: block;
  padding: 14px 48px 14px 16px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none; /* 最初から付いている三角を消す */
}
.kd-ac summary::-webkit-details-marker {
  display: none; /* Safari の三角を消す */
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-ac summary:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 2px;
  border-radius: 12px;
}
/* 開いたときに出る中身 */
.kd-ac-body {
  padding: 0 16px 16px;
  line-height: 1.8;
}
.kd-ac-body p {
  margin: 0;
}
.kd-ac-group {
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  overflow: hidden;
}
.kd-ac-group .kd-ac {
  border: 0;
  border-radius: 0;
}
.kd-ac-group .kd-ac + .kd-ac {
  border-top: 1px solid #D8E6F0;
}
.kd-ac-group summary:focus-visible {
  outline-offset: -3px;
}
.kd-ac-one summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -13px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: #0284C7;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
.kd-ac-one[open] summary::after {
  transform: rotate(45deg);
}
/* 動きを減らす設定の人には、印が回る動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-ac-one summary::after {
    transition: none;
  }
}

5. 中身がふわっと出る

開いたとき、中身が少し上から、ふわっと現れます。開いた瞬間に中身が出る形と比べて、「どこが開いたか」を目で追いやすくなります。

持ち帰りはできますか？

できます。容器代として、1つ30円をいただいています。

自動で再生中
HTML
<details class="kd-ac kd-ac-fade">
  <summary>持ち帰りはできますか？</summary>
  <div class="kd-ac-body"><p>できます。容器代として、1つ30円をいただいています。</p></div>
</details>
CSS
/* 5種類に共通：開け閉めする箱 */
.kd-ac {
  border: 1px solid #D8E6F0;
  border-radius: 12px;
  background: #FFFFFF;
  color: #0F172A;
  text-align: left;
}
/* 押すところ（見出しの行） */
.kd-ac summary {
  position: relative;
  display: block;
  padding: 14px 48px 14px 16px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  list-style: none; /* 最初から付いている三角を消す */
}
.kd-ac summary::-webkit-details-marker {
  display: none; /* Safari の三角を消す */
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-ac summary:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 2px;
  border-radius: 12px;
}
/* 開いたときに出る中身 */
.kd-ac-body {
  padding: 0 16px 16px;
  line-height: 1.8;
}
.kd-ac-body p {
  margin: 0;
}
.kd-ac-fade summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -6px;
  border-left: 8px solid #0284C7;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: rotate(0deg);
  transition: transform 0.4s ease;
}
.kd-ac-fade[open] .kd-ac-body {
  animation: kd-ac-fade 0.4s ease;
}
@keyframes kd-ac-fade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.kd-ac-fade[open] summary::after {
  transform: rotate(90deg);
}
/* 動きを減らす設定の人には、矢印が回る動きと、中身がふわっと出る動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-ac-fade summary::after {
    transition: none;
  }
  .kd-ac-fade[open] .kd-ac-body {
    animation: none;
  }
}

※ WordPressのブロックエディターには、同じ details と summary を使う「詳細」ブロックがあります。見た目を変えたいときは、ブロックの「高度な設定」で追加CSSクラスに kd-ac kd-ac-arrow などを入れると、この記事のCSSが効きます。中身の段落は .kd-ac-body で囲まれないので、余白は必要に応じて調整してください。

※ WordPressのテーマによっては、[open] が「ショートコード」（[ ] で囲んだ短い呼び出し文字）として扱われ、本文に書いたCSSから消えてしまうことがあります。このブログで使っているテーマ（STORK19）もそうでした。CSSは本文ではなく、テーマの「追加CSS」に入れると安心です。

仕組み：開け閉めはブラウザに任せて、CSSは見た目だけ

details と summary だけで、もう開け閉めできる

<details> の中の最初に <summary> を置くと、ふだんは summary の行だけが見えて、押すと残りの中身が開きます。開いている間、details には open という印（属性）が付き、閉じると外れます。この切り替えは、ブラウザが最初から持っている仕組みです。JavaScriptを書かなくても動くのは、このためです。

最初から開いておきたい項目には、HTMLで <details open> と書きます。

三角を消して、自分の印を付ける

何も指定しないと、summary の左に小さな三角が付きます。見本では list-style: none と、Safari用の ::-webkit-details-marker の2か所で、この三角を消しています。片方だけだと、ブラウザによっては三角が残ります。

そのうえで、summary の右端に ::after（アフター＝要素のうしろに飾りを足す書き方）で矢印や線を描き、[open] が付いたときだけ向きを変えています。

書いたもの意味
.kd-ac-arrow summary::after閉じているときの矢印（下向き）
.kd-ac-arrow[open] summary::after開いているときの矢印（上向きに回す）
transition: transform 0.3s ease向きの変化を0.3秒かけて滑らかにする

name を同じにすると、1つだけ開く

4番目の見本は、3つの details に同じ name（名前）を付けています。同じ名前の details は1つのグループになり、1つを開くと、ほかは自動で閉じます。以前はJavaScriptで作っていた動きですが、今はHTMLだけで作れます。

「ふわっと」は transition ではなく animation で

閉じている間、中身は画面に表示されていません。表示されていなかったものが急に現れるときは、transition（変化を滑らかにつなぐ指定）が働きません。そこで5番目の見本では、[open] のときだけ、1回だけ再生される animation を付けています。開いた瞬間に、透明から見える状態へ、少し上から元の位置へ動きます。

なお、閉じるときはすぐに消えます。MDNにも、details の開け閉めの動きを付ける仕組みは標準では用意されていない、と書かれています。高さまで滑らかにする新しい書き方は、後半の「応用」で紹介します。

ここで使った details と summary は2020年1月から、主要なブラウザで使える機能とMDNで示されています。グループにする name 属性は2024年9月から使えるようになった、比較的新しい機能です。古いブラウザでは、1つだけ開く動きにならず、それぞれが別々に開け閉めできる形になります。

数値を変えるとどうなるか

「矢印が回る」の数値を1つずつ変えて並べました。ここの見本も、自動でくり返しています。

速さ：矢印が回る秒数

営業時間を教えてください

平日の10時から18時までです。土日と祝日はお休みです。

0.1秒
営業時間を教えてください

平日の10時から18時までです。土日と祝日はお休みです。

0.3秒
（見本）
営業時間を教えてください

平日の10時から18時までです。土日と祝日はお休みです。

0.8秒

0.1秒だと、回る途中がほとんど見えず、矢印がぱっと切り替わったように見えます。0.8秒だと、中身はもう開いているのに矢印がまだ回っていて、遅れて見えます。中身は一瞬で開くので、印の動きも0.2〜0.4秒あたりにそろえると、ずれを感じません。

押せる範囲：summary の上下の余白

営業時間を教えてください

平日の10時から18時までです。土日と祝日はお休みです。

上下 4px
営業時間を教えてください

平日の10時から18時までです。土日と祝日はお休みです。

上下 14px
（見本）
営業時間を教えてください

平日の10時から18時までです。土日と祝日はお休みです。

上下 22px

水色の部分が、押すと開く範囲です。上下4pxだと、指で押すには細く、隣の質問を押してしまいやすくなります。上下14pxなら、1行の質問でも高さが50px前後になります。W3Cのアクセシビリティの基準（WCAG 2.2）では、押す場所は少なくとも24×24 CSSピクセルが目安とされています。質問が何個も縦に並ぶアコーディオンでは、余裕を持たせておきます。

スマホと、見る人への配慮

スマホでは「押せる範囲」が大事

アコーディオンは、スマホで長いページを短く見せるためによく使われます。summary の行全体が押す場所になるので、文字の上だけでなく、右端の矢印のあたりを押しても開きます。上の比較のとおり、上下の余白は削りすぎないようにします。

キーボードでも開け閉めできる

details と summary はブラウザに最初から備わった部品なので、キーボードのTabキーで summary を選び、スペースキーなどで開け閉めできます。見本では、選んだときの枠（outline）を消さずに、:focus-visible（フォーカス・ビジブル＝キーボードなどで選んだ状態）で太くはっきり見せています。div と JavaScript で自作すると、ここを自分で作り込む必要があります。

summary の中に見出しタグを入れない

質問を見出しにしたくて、summary の中に <h3> などを入れたくなることがあります。MDNでは、ブラウザによって summary の扱いが違い、中の見出しが見出しとして伝わらない場合がある、と注意しています。見出しを付けたいときは、アコーディオンの上に置きます。

大事な情報は、閉じ込めない

閉じた中身は、開かない人には読まれません。料金やキャンセルの条件のように、全員に知ってほしいことをアコーディオンの中だけに書くのは避けます。質問の文だけで、中に何が書いてあるか分かるようにしておくのも大切です。

「動きを減らす」設定の人には、すぐ切り替える

画面の動きが苦手な人は、スマホやパソコンで「動きを減らす」設定をオンにしていることがあります。CSSの prefers-reduced-motion を使うと、この設定の人にだけ別の見え方を出せます。見本では、印が回る動きと、中身がふわっと出る動きをなくしています。開け閉めそのものは、そのまま使えます。

トミー

アコーディオンは便利ですが、閉じれば閉じるほど、読まれない文章が増えます。
「開かなくても困らない情報か」を、置く前に一度考えるようにしています。

応用：実際に押して試す

ここの見本は自動では動きません。押して開け閉めしてみてください。キーボードなら、Tabキーで選んでスペースキーで開きます。4番目は、1つを開くとほかが閉じます。

営業時間を教えてください

平日の10時から18時までです。土日と祝日はお休みです。

駐車場はありますか？

お店の裏に3台分あります。満車のときは、近くのコインパーキングをご利用ください。

予約は必要ですか？

予約なしでもご来店いただけます。確実にご案内したいときは、前日までにご予約ください。

支払い方法は？

現金とクレジットカードが使えます。

領収書は出せますか？

はい。お会計のときにお申し付けください。

キャンセルできますか？

前日までなら、無料でキャンセルできます。

持ち帰りはできますか？

できます。容器代として、1つ30円をいただいています。

高さも滑らかに開く見本です

Chrome や Edge では、中身の高さが0.4秒かけて伸び縮みします。ほかのブラウザでは、ふつうにすぐ開きます。

高さも滑らかに開け閉めする（Chrome・Edge）

最後の「高さも滑らかに開く見本」には、次のCSSを足しています。::details-content（ディテールズ・コンテント＝details の開け閉めする中身）の高さを0から auto（中身に合わせた高さ）へ変え、interpolate-size: allow-keywords で、その間を滑らかにつなぎます。

/* 高さも滑らかに開け閉めする（Chrome・Edge。ほかのブラウザでは、すぐ開く） */
.kd-ac-smooth {
  interpolate-size: allow-keywords;
}
.kd-ac-smooth::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.4s ease, content-visibility 0.4s allow-discrete;
}
.kd-ac-smooth[open]::details-content {
  block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
  .kd-ac-smooth::details-content {
    transition: none;
  }
}

::details-content は2025年9月から主要なブラウザで使えるようになりました。一方、interpolate-size は、2026年10月時点のMDNで Chrome と Edge だけが対応している、試験的な機能と示されています。対応していないブラウザでは滑らかにならず、ふつうにすぐ開きます。開け閉めができなくなるわけではないので、「対応しているブラウザでは少し気持ちよくなる」おまけとして足すのが、ちょうどいい使い方です。

AIに頼むなら

同じような部品は、Claudeなどの生成AIに頼んでもすぐ作れます。そのときは、見た目だけでなく、作り方・数値・配慮まで伝えると、直す回数が減ります。

よくある質問のページに、質問を押すと答えが開くアコーディオンを作りたい。
details と summary を使って、JavaScriptなしで。右端に矢印を付けて、開くと0.3秒で上向きに回す。
Safariでも三角が出ないように。押す範囲は高さ48px以上、キーボードで選んだときの枠は消さない。動きを減らす設定の人には動きをなくして。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • div と JavaScript で自作していないか。details と summary を使っていないと、キーボードで開けない部品になっていることがあります。Tabキーで選んで、スペースキーで開くかを試します
  • Safariで三角が残っていないか。list-style: none だけだと、Safariでは三角と自作の矢印が二重に出ます。::-webkit-details-marker の指定があるかを見ます
  • 高さの動きを、対応の狭い指定だけに頼っていないか。interpolate-size や JavaScript で高さを動かすコードが出てきたら、ほかのブラウザでも開け閉めできるか、スマホのSafariで確かめます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • 「よくある質問」には「＋が−に変わる」か「Q&A」。質問の数が多くても、読む人は自分の質問だけを開けば済みます
  • サービス紹介の「くわしい条件」や「注意事項」の補足には「矢印が回る」。本文の流れを止めずに、知りたい人だけが開けます
  • スマホで長くなりがちな手順の一覧には「1つだけ開く」。開いているのが常に1つなので、今どこを読んでいるかを見失いません

使わない場面

  • 料金・キャンセル条件など、全員に読んでほしい情報。閉じずに本文で見せます
  • 項目が1〜2個しかないとき。開け閉めの手間のほうが大きいので、最初から見せます
  • 本文の大半を閉じてしまうページ。開かないと何も分からないページは、読む人に作業をさせることになります
トミー

アコーディオンは「情報を隠す部品」ではなく、「読む人が選べるようにする部品」です。
開くかどうかを読む人に任せていい情報にだけ使う、と決めておくと迷いません。

まとめ

  • アコーディオンは、details と summary に CSS で見た目を付けるだけで作れる。JavaScriptは要らない
  • 三角は list-style: none と ::-webkit-details-marker の2か所で消し、::after で自分の印を描く
  • 開いているときは [open] で見た目を変える。同じ name を付けると1つだけ開く
  • 開くときの「ふわっと」は animation。高さを滑らかにする interpolate-size は、今は Chrome と Edge だけ
  • 押せる範囲は広めに。全員に読んでほしい情報は閉じ込めない

まずは「矢印が回る」のコードをコピーして、自分のサイトの質問に書きかえてみてください。HTMLを数行書くだけで開け閉めできるのが分かります。

参考にした資料

いずれも2026年10月12日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

CSSだけで作るローディングアニメーション コピペで使える5種類と、見る人への配慮
関連記事CSSだけで作るローディングアニメーション｜コピペで使える5種類と、見る人への配慮
マウスを乗せると動くボタンをCSSだけで コピペで使える5種類と、スマホ・キーボードへの配慮
関連記事マウスを乗せると動くボタンをCSSだけで｜コピペで使える5種類と、スマホ・キーボードへの配慮
画像に乗せるとズームする動きをCSSだけで コピペで使える5種類と、まわりを崩さない書き方
関連記事画像に乗せるとズームする動きをCSSだけで｜コピペで使える5種類と、まわりを崩さない書き方
下線が伸びるリンクをCSSだけで コピペで使える5種類と、文章の中のリンクの注意点
関連記事下線が伸びるリンクをCSSだけで｜コピペで使える5種類と、文章の中のリンクの注意点
開け閉めするアコーディオンをCSSだけで コピペで使える5種類と、使う・使わないの判断

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA