# アコーディオン（FAQ）のCSS実装

> HTML標準の<details>で作る開閉式FAQ。開閉ロジックはブラウザ任せで、CSSは見た目と「＋」印の回転だけを担当します。

- カテゴリ: 表示・フィードバック
- URL: https://www.css-dictionary.com/recipes/accordion/

## HTML

```html
<details class="acc" open>
  <summary>返品はできますか？</summary>
  <p>商品到着後14日以内であれば返品を承ります。同封の返品票をご利用ください。</p>
</details>
<details class="acc">
  <summary>送料はいくらですか？</summary>
  <p>全国一律520円です。5,000円以上のご注文で送料無料になります。</p>
</details>
```

## CSS

```css
.acc {
  border: 1px solid #e2d8c2;
  border-radius: 8px;
  background: #fff;
}

.acc + .acc {
  margin-top: 8px;
}

.acc summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  list-style: none; /* 標準の▶マーカーを消す */
}

.acc summary::-webkit-details-marker {
  display: none; /* 旧Safari向けのマーカー除去 */
}

.acc summary::after {
  content: "＋";
  color: #b0413e;
  transition: transform 0.2s;
}

.acc[open] summary::after {
  transform: rotate(45deg); /* ＋を45度回して×（閉じる）に見せる */
}

.acc summary:focus-visible {
  outline: 2px solid #b0413e;
  outline-offset: -2px;
  border-radius: 8px;
}

.acc p {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: #5c5445;
}

@media (prefers-reduced-motion: reduce) {
  .acc summary::after { transition: none; }
}
```

## 仕組みの解説

<details>と<summary>は、クリックでの開閉・Enterキー操作・open属性の管理をすべてブラウザが標準で行います。CSSの仕事は装飾だけです。標準の▶マーカーは summary の list-style: none（旧Safariは ::-webkit-details-marker）で消し、代わりに ::after の「＋」を配置。open状態で45度回転させると「×」に見え、閉じられることが伝わります。

## 実装のポイント

開閉に高さのアニメーションを付けたい場合は、interpolate-size: allow-keywords と transitionの組み合わせが新しい定番です（対応ブラウザに注意）。

## AIに依頼するときの文例

<details>と<summary>を使ったアコーディオン型FAQを作ってください。標準マーカーはlist-style: noneで消して::afterの「＋」に置き換え、open時に45度回転させてください。JSは使わないでください。

## 使っているプロパティ

- [list-style](https://www.css-dictionary.com/property/list-style.md)
- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [transition](https://www.css-dictionary.com/property/transition.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)