アコーディオン

こちらはCSSのみでのアニメーションを実装したアコーディオンです。jsを利用したアコーディオンはこちらをご覧ください。

基本的な実装

interpolate-size: allow-keywords:が、未対応ブラウザがあることから、gridを使用したアコーディオンを実装： https://www.tak-dcxi.com/article/css-only-details-animation-2025/

※注意点 ::details-content: ChromeとFirefoxサポート注視（ Can I use ） interpolate-size: allow-keywords: SarafiとFirefox未対応（ Can I use ）参考： Browserslist

よくある質問のタイトルがここに入ります

こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。

<details class="c-accordion">
<summary class="c-accordion_summary"><span class="c-accordion_switch">
<span></span>
<span></span>
</span> よくある質問のタイトルがここに入ります</summary>
<div class="c-accordion_body">
<div class="c-accordion_contents">  <p>こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。</p>  </div>
</div>
</details>

基本的な実装

※注意点：2025/10時点、open属性はChrome109（シェア：0.66%）、112（シェア：2.9%）のため使用注意参考： Can I use ／ https://browsersl.ist/#q=defaults

よくある質問のタイトルがここに入ります

<details class="c-accordion" name="demo">
<summary class="c-accordion_summary"><span class="c-accordion_switch">
<span></span>
<span></span>
</span> よくある質問のタイトルがここに入ります</summary>
<div class="c-accordion_body">
<div class="c-accordion_contents">  <p>こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。</p>  </div>
</div>
</details>
<details class="c-accordion" name="demo">
<summary class="c-accordion_summary"><span class="c-accordion_switch">
<span></span>
<span></span>
</span> よくある質問のタイトルがここに入ります</summary>
<div class="c-accordion_body">
<div class="c-accordion_contents">  <p>こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。</p>  </div>
</div>
</details>
<details class="c-accordion" name="demo">
<summary class="c-accordion_summary"><span class="c-accordion_switch">
<span></span>
<span></span>
</span> よくある質問のタイトルがここに入ります</summary>
<div class="c-accordion_body">
<div class="c-accordion_contents">  <p>こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。<br aria-hidden="true">こちらに回答テキストが表示されます。詳細な説明や解決方法などを記載できます。</p>  </div>
</div>
</details>