優れたアコーディオンUIコードスニペット8選【CSS/JavaScript】

狭いスペースに多くのコンテンツを入れられるアコーディオンUIは、多くのWebデザイナーに愛されてきました。ほとんどはモバイルにもデスクトップにも対応しており、インタラクティブな要素も取り入れられます。

今回は、最新の技術を取り入れたアコーディオンUIを8つご紹介します。

1. Pure CSS Horizontal Accordion

アコーディオンUIは縦型が主流でしたが、いまは横型も活躍しています。この横型のスニペットは、カーソルをあわせるとコンテンツが表示されます。CSSのみで作られている点も魅力です。

See the Pen Pure CSS Horizontal Accordion by Aysha Anggraini (@rrenula) on CodePen.

2. Funky Pure CSS Accordion

洗練された、美しいアコーディオンUI。CSSを駆使して、インタラクティブなイベントリストを制作しています。タブの遷移をサポートするアニメーションや、装飾的なアイコンが特徴です。

See the Pen Funky Pure CSS Accordion by Jamie Coulter (@jcoulterdesign) on CodePen.

3. Minimal Accordion in React

スムーズなアニメーションとミニマルなデザインが特徴の、現代的なWebアプリにおすすめのスニペット。ReactなどのJavaScriptライブラリも、アコーディオンUIを構築するのにぴったりです。

See the Pen Accordion – React by Matthew Vincent (@matthewvincent) on CodePen.

4. Native Accordion with <details>

HTML要素の<details>を使えば、アコーディオンUIを簡単に作れます。この例では、<details>を使ったうえで、スタイリング強化のためにCSSも活用。優れたパフォーマンスとアクセシビリティを実現しています。すべてのブラウザに対応している点も魅力です。

See the Pen Native accordion with details by Giana (@giana) on CodePen.

5. ARIA Accessible Accordion

アクセシビリティは、すべてのUIエレメントにおいて重要です。アコーディオンUIを使えば、TABとENTERを使って各セクションを移動し、コンテンツを閲覧できます。

See the Pen ARIA Accessible Accordion by Kiri Egington (@kiriegington) on CodePen.

6. Gracefully-Degrading <details> Accordion (Vanilla JS)

<details>を使ったうえで、優れたユーザーエクスペリエンスも実現しているアコーディオンUI。CSSとJavaScriptを使ってアニメーションを加え、各セクションの高さを計算しています。ユーザーがJavaScriptを有効にしていない場合はUIが劣化する点に注意です。

See the Pen Gracefully-degrading details; accordion (Vanilla JS) by Keith Pickering (@keithpickering) on CodePen.

7. Pure Accordion CSS

CSSのみで作られたアコーディオンUI。タイポグラフィーを駆使しつつ、各セクションのタイトルを目立たせています。ハッシュタグを活用している点も特徴です。CSSのみでありながら、さまざまな工夫によって小さなスペースに多くの情報を詰め込んでいます。

See the Pen Accordion by Tuna (@Tuna_) on CodePen.

8. Responsive CSS Accordion Gallery with Zoom Animation

CSSの画像フィルターやホバー効果など、魅力的なUXを実現するための要素が満載のアコーディオンUI。コードが最小限におさえられている点も魅力です。

See the Pen accordion gallery zoom animation (css, responsive) by Daniel Subat (@bbx) on CodePen.

おわりに

限られたスペースを活用できるアコーディオンUIは、まさに現代のWebデザインにぴったりの存在です。CSSだけで実装でき、JavaScriptを使えば高度な機能も追加できます。互換性とアクセシビリティを確保しつつ、ユニークなアコーディオンUIを作ってみましょう。

（執筆：Eric Karkovack　翻訳：Asuka Nakajima　編集：宮﨑駿　提供元：Speckyboy）