CSSで作るアコーディオンUIデザイン集【コピペOK】

CSSで作るアコーディオンUIデザイン集【コピペOK】

アコーディオンUIは、限られたスペースに情報を整理して表示できる便利なコンポーネントです。

FAQ、お問い合わせページ、採用サイト、サービス紹介ページなど様々な場面で利用されています。

この記事では実務で使えるアコーディオンUIを紹介します。すべてコピペOKです。

基本のアコーディオンUI

① シンプルなアコーディオン

HTML
<details>
  <summary>アコーディオンタイトル</summary>
  <p>ここにコンテンツが入ります。</p>
</details>
CSS
details {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

HTML標準のdetails要素を使用するためJavaScript不要です。

アコーディオンタイトル

ここにコンテンツが入ります。

② ボーダー付きFAQデザイン

HTML
<details class="faq-item">
  <summary class="faq-question">
    サービスの対応エリアを教えてください？
  </summary>
  <div class="faq-answer">
    全国対応しております。オンラインでのお打ち合わせも可能です。
  </div>
</details>

<details class="faq-item">
  <summary class="faq-question">
    見積もりは無料ですか？
  </summary>
  <div class="faq-answer">
    はい、お見積もり・ご相談は無料です。
  </div>
</details>

<details class="faq-item">
  <summary class="faq-question">
    納期はどのくらいですか？
  </summary>
  <div class="faq-answer">
    制作内容によりますが、一般的なコーポレートサイトで1〜2ヶ月程度です。
  </div>
</details>
CSS
.faq-item {
  border-bottom: 1px solid #ddd;
}

.faq-question {
  position: relative;
  padding: 20px 40px 20px 0;
  cursor: pointer;
  font-weight: bold;
  list-style: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  transition: transform 0.3s;
}

.faq-item[open] .faq-question::after {
  content: "−";
}

.faq-answer {
  padding: 0 0 20px;
  line-height: 1.8;
}

FAQページでよく使われる定番デザインです。

サービスの対応エリアを教えてください？
全国対応しております。オンラインでのお打ち合わせも可能です。
見積もりは無料ですか？
はい、お見積もり・ご相談は無料です。
納期はどのくらいですか？
制作内容によりますが、一般的なコーポレートサイトで1〜2ヶ月程度です。

アニメーション付きアコーディオン

③ アイコン回転アニメーション

HTML
<details class="accordion">
  <summary>
    サービスについて
    <span class="icon">+</span>
  </summary>
  <p>コンテンツ</p>
</details>
CSS
.accordion .icon {
  transition: transform 0.3s;
}

.accordion[open] .icon {
  display: inline-block;
  transform: rotate(45deg);
}

＋アイコンが×へ変化する人気のUIです。

サービスについて +

コンテンツ

④ カード型アコーディオン

HTML
<details class="accordion-card">
  <summary>
    サービスについて
  </summary>
  <div class="accordion-content">
    <p>
      当サービスではWebサイト制作から運用サポートまで一貫して対応しています。
    </p>
  </div>
</details>

<details class="accordion-card">
  <summary>
    料金について
  </summary>
  <div class="accordion-content">
    <p>
      ご要望に応じてお見積もりいたします。まずはお気軽にご相談ください。
    </p>
  </div>
</details>

<details class="accordion-card">
  <summary>
    納期について
  </summary>
  <div class="accordion-content">
    <p>
      一般的なコーポレートサイトの場合、1〜2ヶ月程度が目安となります。
    </p>
  </div>
</details>
CSS
.accordion-card {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  overflow: hidden;
}

.accordion-card summary {
  position: relative;
  padding: 20px 56px 20px 20px;
  cursor: pointer;
  font-weight: bold;
  list-style: none;
}

.accordion-card summary::-webkit-details-marker {
  display: none;
}

.accordion-card summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  transition: transform 0.3s;
}

.accordion-card[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.accordion-content {
  padding: 0 20px 20px;
  line-height: 1.8;
}

サービスサイトやLPでよく利用されます。

サービスについて

当サービスではWebサイト制作から運用サポートまで一貫して対応しています。

料金について

ご要望に応じてお見積もりいたします。まずはお気軽にご相談ください。

納期について

一般的なコーポレートサイトの場合、1〜2ヶ月程度が目安となります。

モダンデザインのアコーディオン

⑤ Glassmorphismアコーディオン

CSS
.accordion-glass {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
}

ガラスUIを取り入れたデザインです。

サービスについて

当サービスではWebサイト制作から運用サポートまで一貫して対応しています。

料金について

ご要望に応じてお見積もりいたします。まずはお気軽にご相談ください。

納期について

一般的なコーポレートサイトの場合、1〜2ヶ月程度が目安となります。

⑥ グラデーションボーダー

CSS
.accordion-gradient {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(45deg,#3498db,#9b59b6) border-box;
}

高級感のあるデザインを演出できます。

サービスについて

当サービスではWebサイト制作から運用サポートまで一貫して対応しています。

料金について

ご要望に応じてお見積もりいたします。まずはお気軽にご相談ください。

納期について

一般的なコーポレートサイトの場合、1〜2ヶ月程度が目安となります。

実務で使える応用パターン

⑦ アイコン付きアコーディオン

HTML

HTML
<summary>
  📄 サービス内容
</summary>

内容を直感的に伝えられます。

⑧ 画像付きアコーディオン

HTML
<div class="accordion-content">
  <img src="image.jpg" alt="">
  <p>説明文</p>
</div>

実績紹介や商品紹介ページに最適です。

⑨ 複数カラムFAQ

CSS
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

FAQが多い場合に有効です。

⑩ タイムライン型アコーディオン

CSS
.timeline {
  border-left: 2px solid #3498db;
  padding-left: 24px;
}

沿革ページや制作フローに活用できます。

スマホ対応のポイント

  • タップ領域を広くする
  • アイコンを大きくする
  • 余白を十分確保する
  • テキストサイズを16px以上にする

アクセシビリティ対応

  • details / summaryを活用する
  • キーボード操作に対応する
  • 十分なコントラスト比を確保する
  • 開閉状態を視覚的に伝える

まとめ

  • アコーディオンUIは情報整理に最適
  • FAQやサービス紹介で特に活躍する
  • details要素を使うとJavaScript不要で実装できる
  • デザインや用途に応じて使い分けることが重要

まずはシンプルなアコーディオンから実装し、サイトに合わせてアニメーションやデザインを追加してみましょう。

関連記事

PAGE TOP