<details> <summary class="details-summary">1つ目のアコーディオンのタイトル</summary> ここは、1つ目のアコーディオンの中身です。 </details> <details> <summary class="details-summary">2つ目のアコーディオンのタイトル</summary> ここは、2つ目のアコーディオンの中身です。 </details> <details> <summary class="details-summary">3つ目のアコーディオンのタイトル</summary> ここは、3つ目のアコーディオンの中身です。 </details>
.details-summary { cursor: pointer; transition: 0.2s; padding: 6px; border-radius: 6px; font-size: 20px; /* ホバー時のスタイル */ &:hover { cursor: pointer; background-color: #bee1de; } /* タブフォーカス時のスタイル */ &:focus-visible { outline: dashed #00a5a0; } } /* 以下の記述は不要です */ body { margin: 20px; }