実装コード付き！さまざまなデザインパターンのアコーディオンUIを作りましたので参考に！
HTML / CSS / JavaScript を別ページに掲載していますので、気に入ったデザインがあれば自由にご利用ください。
Accordion UI Collection with Code Examples!
Explore various tab menu styles—all with implementation-ready HTML, CSS, and JavaScript available on separate pages. Feel free to use or customize any design you like.
シンプル
Simple
- Simple and easy-to-use design
- Basic open/close animation
- Responsive design
- Lightweight and fast
- Easy to customize
カード風
Card Style
- Card-like appearance
- Shadow effects for depth
- Hover effects included
- Smooth open/close animation
- Modern design
グラデーション
Gradient
- Beautiful gradient background
- Colorful and attractive
- Icon-equipped button
- Smooth animation
- Visually impactful design
ボーダー
Border
- Utilizes border lines
- Minimal and refined design
- Border animation on open/close
- Typography-focused
- Business-appropriate calm design
アイコン
Icon
- Plus/minus icon included
- Icon rotation animation
- Intuitive operation
- Visual feedback
- User-friendly design
ネオン風
Neon Style
- Neon light glowing effects
- Cyberpunk atmosphere
- Glowing animation on hover
- Perfect for dark themes
- Impactful presentation
グラスモーフィズム
Glassmorphism
- Glass effect background
- Blur effects for modern look
- Semi-transparent elegant design
- Beautiful harmony with background
- Latest design trend
3D
Three-Dimensional
- 3D depth design with perspective
- Perspective effects for depth
- 3D rotation animation on hover
- Press-down animation on click
- Modern and premium design
レトロゲーミング
Retro Gaming
- Classic CRT monitor style
- Green neon glow effects
- Scan line animations
- Retro gaming atmosphere
- Cyberpunk-inspired design
ミニマリスト
Minimalist
- Clean and minimal design
- Subtle animations
- Focus on typography
- Elegant transitions
- Professional appearance
ふせん風
Sticky Note Style
- Yellow sticky note appearance
- Natural paper texture
- Diagonal line patterns
- Friendly and approachable
- Handwritten feel
グレーアウト
Gray Out
- Muted gray color scheme
- Subtle transparency effects
- Elegant fade animations
- Professional and calm
- Minimal visual impact
アコーディオンとは？
アコーディオンは、クリックやタップでコンテンツの開閉を切り替えるUIです。縦に並んだ項目を省スペースで表示でき、FAQやメニューなどによく使われます。実装方法の詳細については以下記事にて。
本サイトで公開しているUIデザイン一覧
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS）
Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例やデザイン例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開してい...