マネーフォワード クラウド確定申告 AD

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

アコーディオンUI

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

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

1. Pure CSS Horizontal Accordion

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

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

2. Funky Pure CSS Accordion

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

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

3. Minimal Accordion in React

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

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

4. Native Accordion with <details>

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

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

5. ARIA Accessible Accordion

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

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

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.0

7. Pure Accordion CSS

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

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

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.0

おわりに

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

(執筆:Eric Karkovack 翻訳:Asuka Nakajima 編集:宮﨑駿 提供元:Speckyboy

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
エンジニア副業案件
Workship