CSS Stockを表示するスマートフォンのモック
デザインの例1デザインの例2デザインの例3

HTML・CSSのみでつくるアコーディオンメニュー8選

「ユーザーがクリックした時に開閉させたい」「Q&Aのリストを作りたい」そんな時におすすめなのがアコーディオンメニュー。今回はそんなアコーディオンのデザインスニペットをまとめました。本サイトで紹介するものは全てdetailsタグを使用しており、折りたたみ可能なコンテンツであることを検索エンジンに伝えられるのも嬉しいポイントです。

シンプルなアコーディオンメニュー

下線あり

下線あり

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • アイコンの種類
枠線あり

枠線あり

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状
  • アイコンの種類
背景色

背景色

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状
  • アイコンの種類
白背景 & シャドウ

白背景 & シャドウ

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状
  • アイコンの種類

可愛いアコーディオンメニュー

単色背景

単色背景

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状
  • アイコンの種類
枠線あり

枠線あり

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状
  • アイコンの種類
枠線あり & 吹き出し風

枠線あり & 吹き出し風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 形状
  • アイコンの種類
見出し風

見出し風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • アイコンの種類