HTMLHTMLだけでアコーディオンを作るアコーディオンを使った動きをつけるには、JavascriptやCSSなどを利用して実装したりしますが、HTML要素だけでも簡単にアコーディオンの動きを作ることができます。実装方法HTMLだけでアコーディオンを実装するためには、「details」と「summary」要素を使います。ここに項目に対する説明文などを記述する</details><details>~</details>がアコーディオンとなる部分で、<summary>~</summary>で囲った部分をクリックすると開閉するという仕組みになります。このままではクリックできる箇所なのかが分かりずらいので、CSSを使って少しカスタマイズします。カーソルポインターを変更するカーソルのポインターを変えることでクリックできる場所であることを分かりやすくしてあげます。none;」を使って消すこともできます。none;}矢印を変更するデフォルトで表示される三角の矢印ではなく、違うリストマークを表示したい場合は画像を読み込むことで変更することができます。transparent;」で非表示(透明)にしてから背景画像として表示させます。Firefoxの場合は、「list-style-image」を使って画像を表示させることができます。初めから説明文の箇所を開いた状態にしておきたい場合は、details要素に「open」を付与することで開いた状態にしておくことができます。開いたときに背景の色を変えたいなどちょっとしたデザインを加えたい場合は、details要素に対してopen属性を指定することで変えることができます。#327fa8;}transitionを使えばふわっとした動きをつけることもできます。details要素とsummary要素に高さを指定してtransitionと組み合わせれば、すーっと伸びるようなアニメーションにもなります。DEMO以上が、HTMLだけでアコーディオンを作成する方法となります。