アコーディオンをCSSだけで作る実践的な方法とコピペで使えるコード集

折原 慧ウェブデザインデイ 編集ライター

「ちょっとしたFAQやメニューを折りたたみたいけれど、わざわざJavaScriptを書くのは面倒」と感じたことはありませんか。実は、アコーディオンはCSSとHTMLだけでも十分に実装できます。しかも、コードの構造さえ理解すれば、コピペで自分のサイトにそのまま使えるものばかりです。

個人的な経験では、小規模な静的サイトやWordPressのFAQセクションであれば、JavaScriptを使わないCSSアコーディオンのほうが軽量で管理も楽です。スクリプトのバグに悩まされることもありません。

この記事では、チェックボックス方式・ラジオボタン方式・details/summary方式という3つの実装パターンを、実際に動くコードとともに丁寧に解説していきます。

CSSアコーディオンの3つの実装パターン

CSSだけでアコーディオンを作る方法は、大きく分けて3種類あります。それぞれ得意な場面が異なります。

まずは全体像を把握しておきましょう。

それぞれ順番に、コピペできるコードを見ていきましょう。

チェックボックス方式で複数開閉できるアコーディオンを作る

最もよく使われるのがこの方式です。input[type="checkbox"]とlabel、そしてコンテンツを組み合わせ、:checked擬似クラスで開閉を切り替えます。

複数の項目を同時に開いておけるため、FAQのように「気になる質問だけをいくつか開いて読みたい」場面にぴったりです。

基本のHTML構造

チェックボックス、ラベル、コンテンツをセットにして並べます。

<div class="accordion">
  <input type="checkbox" id="acd-check1" class="acd-check">
  <label class="acd-label" for="acd-check1">質問その1</label>
  <div class="acd-content">
    <p>ここに回答テキストが入ります。</p>
  </div>
</div>

開閉を実現するCSS

ポイントは、チェックボックス本体を非表示にし、ラベルをクリックボタンとして使うことです。

.acd-check {
  display: none;
}
.acd-label {
  display: block;
  padding: 16px;
  background: #4f46e5;
  color: #fff;
  cursor: pointer;
  position: relative;
}
/* ＋アイコン */
.acd-label::after {
  content: "＋";
  position: absolute;
  right: 16px;
}
.acd-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
/* チェックされたら開く */
.acd-check:checked + .acd-label + .acd-content {
  max-height: 400px;
}
.acd-check:checked + .acd-label::after {
  content: "−";
}

max-heightを使ってアニメーションさせるのがコツです。高さをautoにするとtransitionが効かないため、余裕を持った固定値を指定します。

ラジオボタン方式で1つだけ開くアコーディオンを作る

「常にどれか1つだけ開いていてほしい」という場合は、ラジオボタンを使います。同じname属性を持たせることで、他を開くと前のものが自動で閉じます。

ナビゲーションメニューやステップ形式のコンテンツなど、画面をスッキリ保ちたいときに向いています。

<div class="accordion">
  <input type="radio" name="acd" id="acd1" class="acd-check">
  <label class="acd-label" for="acd1">メニュー1</label>
  <div class="acd-content"><p>内容1</p></div>

  <input type="radio" name="acd" id="acd2" class="acd-check">
  <label class="acd-label" for="acd2">メニュー2</label>
  <div class="acd-content"><p>内容2</p></div>
</div>

CSSはチェックボックス方式とほぼ同じで、inputのtypeだけが変わります。ただし、一度開くと閉じられなくなる点には注意しましょう。閉じる動作も必要なら、チェックボックス方式のほうが適しています。

details/summaryで最短のアコーディオンを作る

実は、CSSすらほとんど書かずにアコーディオンを作る方法があります。HTML5のdetails要素とsummary要素です。

<details>
  <summary>クリックで開く見出し</summary>
  <p>ここに折りたたまれる内容が入ります。</p>
</details>

たったこれだけで開閉が動きます。CSSもJavaScriptも不要です。コード量を最小限に抑えたいなら、この方式が圧倒的に楽です。

details/summaryを装飾する

デフォルトの三角マーカーを消して、自分好みのデザインに整えることもできます。

summary {
  list-style: none; /* デフォルト矢印を消す */
  padding: 16px;
  background: #4f46e5;
  color: #fff;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
details[open] summary {
  background: #6366f1;
}

ブラウザの対応状況も良好で、主要な最新ブラウザではほぼ問題なく動作します。手軽さと標準準拠という点で、個人的には最初に検討したい方式です。CSSアニメーションを組み合わせた表現についてはCSSアニメーションの完全ガイドもあわせて確認すると理解が深まります。

3つの方式のメリットとデメリット

どれを選ぶべきか迷ったときのために、それぞれの特徴を整理しました。

簡単さを重視するならdetails/summary、デザインや挙動の自由度を重視するならチェックボックス方式、という選び方が実践的です。

アニメーションとアイコンで見た目を仕上げる

開閉するだけでは少し味気ないので、ちょっとした演出を加えましょう。

先ほどのコードでも触れましたが、::after擬似要素で＋／−を切り替えると、開閉状態がひと目でわかります。矢印を回転させる方法も人気です。

.acd-label::after {
  content: "▼";
  transition: transform 0.3s;
}
.acd-check:checked + .acd-label::after {
  transform: rotate(180deg);
}

transitionを指定しておくと、回転がなめらかに動きます。似たようなUIパターンとして、モーダルウィンドウの実装方法やハンバーガーメニューの作り方も、CSSの擬似要素を活用する点で共通しています。

より本格的なアコーディオンメニューの応用例については、アコーディオンメニューの詳しい解説で幅広いパターンを紹介しています。

よくある質問

CSSだけのアコーディオンは本当にJavaScriptなしで動きますか

はい、動きます。チェックボックスやラジオボタンの:checked状態、あるいはdetails要素の開閉機能を利用するため、JavaScriptは一切不要です。ただし、開閉時の複雑な高さ自動計算などが必要な場合は、JavaScriptのほうが柔軟なこともあります。

max-heightを使わずにスムーズに開閉できませんか

高さautoへのtransitionは多くのブラウザで効かないため、現状ではmax-heightを使うのが一般的です。最近はgrid-template-rowsを使う新しい手法もありますが、確実に動かしたいならmax-height方式が安心です。

FAQとメニューではどちらの方式が向いていますか

FAQは複数の質問を同時に開きたいことが多いのでチェックボックス方式、メニューは1つだけ表示したいことが多いのでラジオ方式が向いています。とにかく手軽に作りたい場合は、どちらの用途でもdetails/summaryが使えます。

details要素はSEO的に問題ありませんか

問題ありません。details内のコンテンツは検索エンジンに認識されます。閉じた状態でもテキストはHTML上に存在するため、隠しテキストとみなされる心配はほとんどありません。

スマホでも問題なく動作しますか

3つの方式すべてがモバイルブラウザで問題なく動作します。むしろ限られた画面を有効活用できるため、スマホファーストのサイトでこそアコーディオンは効果を発揮します。タップ領域を十分に確保することだけ意識しましょう。

まとめ

CSSだけで作るアコーディオンは、覚えてしまえば驚くほど簡単で、しかも軽量です。まずは手軽なdetails/summaryから試し、細かい制御が必要になったらチェックボックス方式へ発展させる、という流れがおすすめです。

今回紹介したコードはすべてコピペしてすぐ使えます。まずは1つ、実際に自分のサイトへ組み込んで動きを確かめてみてください。手を動かすことで、セレクタの仕組みが一気に理解できるはずです。

小さなパーツですが、こうしたUIの積み重ねがサイト全体の使いやすさを支えています。無理のない範囲から、少しずつ取り入れていきましょう。