JavaScript不要！detailsタグとsummaryタグで簡単に作れるアコーディオンの実装方法【HTML＋CSS】

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

アコーディオンUI（クリックで開閉できるメニュー）は、FAQや情報の整理などでよく使われる便利なパーツです。
でも「JavaScriptを書くのは面倒…」と感じている方も多いのではないでしょうか？

実は、HTMLのdetailsとsummaryタグを使えば、JavaScriptなしでアコーディオンを実装できます！
今回は、基本の使い方から、CSSでのデザイン調整方法まで、実例コード付きでわかりやすく解説します。

1. detailsとsummaryとは？

detailsはHTML5から導入されたタグで、開閉できるセクションを作ることができる要素です。
その中にsummaryを入れることで、クリックできるタイトル部分を指定できます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

クリックすると内容がスライドのように開く、シンプルなアコーディオンになります。

2. 実際に表示される見た目

デフォルトの見た目はブラウザによって多少異なりますが、基本的には以下のようになります。

そのままでも使えますが、見た目を整えるにはCSSでのカスタマイズが必要です。

3. CSSでおしゃれにカスタマイズする

以下は、アコーディオンをシンプルかつ見やすく装飾するCSSの例です。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

4. よくある使い方：FAQセクション

FAQコーナーで使うと、情報がコンパクトにまとまり、読み手にとっても親切です。

<details>
  <summary>Q. 納期はどれくらいですか？</summary>
  <p>A. 通常、3〜4週間ほどで納品いたします。</p>
</details>
<details>
  <summary>Q. 修正は可能ですか？</summary>
  <p>A. はい、納品後1回まで無料修正を承っております。</p>
</details>

 

5. detailsタグのメリットと注意点

6. アニメーションを追加したい場合

detailsではスムーズな開閉アニメーションをCSSだけでつけるのは難しいですが、近年はdetails内の内容をCSSでtransitionする方法も少しずつ工夫されています。

ただし、本格的なアニメーションが必要な場合はJavaScriptの導入も検討しましょう。

まとめ

detailsとsummaryを使えば、JavaScriptなしでもアコーディオン機能を簡単に実装できます。
FAQや注意事項の展開、メニューの開閉などにピッタリの方法です。

見た目を整えるCSSを活用すれば、ユーザーにもわかりやすく、コンパクトで機能的なUIが作れます。

ぜひご自身のホームページにも取り入れてみてくださいね！

 

satokotadesignキャンペーン実施中！