ネイティブ開閉アニメ（details）
HTMLの<details>だけで、中身がふわっと高さアニメーションしながら開閉する。::details-contentとcalc-size()でJSなしのアコーディオン。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- FAQ・配送/返品などの折りたたみ説明
- JS なしで高さアニメ付きの開閉
- 初期状態で1つ開いておく一覧
- 避ける場面
- 一度に1つだけ開かせたい制御（name 属性未使用）
- 全ブラウザで同じ動きが必須の案件
- 構成要素
- summary（見出し）
- ＋記号
- 本文
- 持っている状態
- 通常
- キーボード
Tab で各 summary へ、Enter／Space で開閉（ネイティブ details）
- 支援技術
ネイティブ details/summary なので役割と展開状態はブラウザが支援技術へ伝える。＋記号は aria-hidden の装飾。未対応環境と reduced-motion では瞬時に開閉
- 動き
::details-content の height 0→auto と opacity を 300ms ease（interpolate-size: allow-keywords）。＋が 45° 回転 300ms
デザインの要点
- :root に interpolate-size: allow-keywords を置くと height: 0 → auto を補間できる。JS で scrollHeight を測る必要がない
- transition に content-visibility 0.3s allow-discrete を含める。無いと閉じる瞬間に中身が先に消え、高さだけが縮む
- 開閉 300ms・＋の 45° 回転も同じ 300ms。時間を揃えると記号と本文が 1 つの動きに見える
- summary に min-height 44px と list-style: none。既定の三角マーカーを消して＋を右端に置き、行全体を押せる
実装メモ
HTML標準の<details>を、::details-content 疑似要素と calc-size()（interpolate-size: allow-keywords）で高さアニメーションさせる例です。JavaScriptによる高さ計測が不要になります。::details-content と height:auto へのトランジションは新しめのブラウザで有効で、未対応環境では<details>本来の「瞬時に開閉」へフォールバックするため機能は壊れません。
コード（コピーして使えます）
<div class="dd-wrap">
<details class="dd" open>
<summary>配送について<span class="dd-mark" aria-hidden="true">＋</span></summary>
<div class="dd-content">全国翌日配送に対応しています。離島・一部地域は2〜3日かかる場合があります。</div>
</details>
<details class="dd">
<summary>返品・交換<span class="dd-mark" aria-hidden="true">＋</span></summary>
<div class="dd-content">お届けから14日以内であれば、未使用品に限り返品・交換を承ります。</div>
</details>
<details class="dd">
<summary>支払い方法<span class="dd-mark" aria-hidden="true">＋</span></summary>
<div class="dd-content">クレジットカード・各種QR決済・コンビニ後払いに対応しています。</div>
</details>
</div>