アコーディオン — 動きの伝え方辞典

accordion / expand collapse

アコーディオン

クリックで回答欄の高さがなめらかに開閉するFAQの定番UI。「height: auto はアニメーションできない」というCSSの古典的な壁を、grid-template-rows: 0fr→1fr で解決するのが現在の正攻法。max-heightのマジックナンバーはもう要らない。

01 — Demo video

Play live →

02 — Prompt template

FAQに accordion(開閉アニメーション)を実装してください。

- 回答部分は display: grid のラッパーで包み、grid-template-rows を 0fr(閉)⇔1fr(開)で切り替えて {{duration}}s {{easing}} でtransitionする
- グリッドの内側の要素に overflow: hidden と min-height: 0 を付ける(これがないと0frでも潰れず閉じない)
- height: auto や max-height の決め打ちでアニメーションしない(内容量が変わると破綻する)
- 見出しは button 要素にして aria-expanded を開閉状態と同期させる
- +アイコンの回転などの装飾は transform で動かす
- prefers-reduced-motion 時はtransitionなしで即時に開閉する

FAQに accordion(開閉アニメーション)を実装してください。

- 回答部分は display: grid のラッパーで包み、grid-template-rows を 0fr(閉)⇔1fr(開)で切り替えて {{duration}}s {{easing}} でtransitionする
- グリッドの内側の要素に overflow: hidden と min-height: 0 を付ける(これがないと0frでも潰れず閉じない)
- height: auto や max-height の決め打ちでアニメーションしない(内容量が変わると破綻する)
- 見出しは button 要素にして aria-expanded を開閉状態と同期させる
- +アイコンの回転などの装飾は transform で動かす
- prefers-reduced-motion 時はtransitionなしで即時に開閉する

FAQに accordion(開閉アニメーション)を実装してください。

- 回答部分は display: grid のラッパーで包み、grid-template-rows を 0fr(閉)⇔1fr(開)で切り替えて {{duration}}s {{easing}} でtransitionする
- グリッドの内側の要素に overflow: hidden と min-height: 0 を付ける(これがないと0frでも潰れず閉じない)
- height: auto や max-height の決め打ちでアニメーションしない(内容量が変わると破綻する)
- 見出しは button 要素にして aria-expanded を開閉状態と同期させる
- +アイコンの回転などの装飾は transform で動かす
- prefers-reduced-motion 時はtransitionなしで即時に開閉する

03 — Params

duration(開閉時間 s) — 範囲 0.15〜0.8 / 初期 0.35
0.25〜0.4sが目安。FAQは連続で開閉されるUIなので、0.5sを超えるとテンポを削ぐ。
easing(緩急) — 選択: ease / ease-out / cubic-bezier(0.22, 1, 0.36, 1)（初期: ease-out）
ease-outが無難。cubic-bezier(0.22,1,0.36,1)は着地がより柔らかい強めの減速。

04 — Vocab

grid-template-rows: 0fr→1fr — frは比率の単位でtransition可能。「中身の高さぶんだけ」を具体的な数値なしでアニメーションできる。
min-height: 0 — グリッドアイテムはデフォルトで中身より小さくなれない(min-height: auto)。これを外さないと0frにしても閉じない。
max-heightハック — 旧来の代替手段。「十分大きい値」へのtransitionで擬似的に開閉するが、実際の高さとの差分だけ速度が狂い不自然になる。
aria-expanded — 開閉状態を支援技術に伝えるbutton属性。CSSのセレクタとしても使え、状態とスタイルの同期点になる。

05 — NG → OK examples

言い方: 「「FAQをアコーディオンにして、開閉をアニメーションさせて」」

なぜNG: height: auto がアニメできないため、max-height: 500px のような決め打ち実装が返ってきがち。回答が長いと途中で切れ、短いと開き終わりだけ異様に速い、という不自然な動きになる。

言い方: 「「accordionをgrid-template-rows: 0fr→1frのtransition(0.35s ease-out)で実装。グリッド内側にoverflow: hiddenとmin-height: 0、見出しはbutton+aria-expanded。max-heightの決め打ち禁止」」

なぜOK: 実装方式(grid rows)を指定することでmax-heightハックを確実に回避できる。min-height: 0 の一言が「なぜか閉じない」事故を防ぐ。