まずは次の動画をご覧ください。

↑こちらのアコーディオンですが、JavaScriptの介在は全くなく、「cssのみ」で実装されています。

今回は、この「cssのみ」で実装するアコーディオンの制作方法について
記事を書いていきたいと思います。

cssのみで実装するアコーディオン。まずはhtml

では早速、cssのみで実装するアコーディオンを制作する方法です。
まずはhtml構造から書いていきます。

<div class="accordion-container">
  <div class="accordion-parent-thumbnail">
    <img class="accordion-parent-thumbnail-item" src=“./thumbnail.png” alt="サムネイル">
  </div>
  <p>このような本文があります。詳しくは次の通り。</p>
  <input class="accordion-input" type="checkbox" id="toggleAccordion" />
  <label class="accordion-label" for="toggleAccordion">
    <span class="accordion-label-text">アコーディオンを開く</span>
  </label>
  <div class="accordion-body">
    <h2>見出し</h2>
    <p class="accordion-text">アコーディオン、実はcssだけで作れます。</p>
    <p class="accordion-text">アコーディオン、実はcssだけで作れます。</p>
    <p class="accordion-text">アコーディオン、実はcssだけで作れます。</p>
    <p class="accordion-text">アコーディオン、実はcssだけで作れます。</p>
    <p class="accordion-text">アコーディオン、実はcssだけで作れます。</p>
  </div>
 </div>

↑見てわかる通り、html側はいたってシンプルな構造です。
1行目が全体を包括する親要素。
2~4行目はカード型レイアウト内のサムネイル要素。なくても構いません。
5行目はカード型レイアウト内の本文。これもお好みで。

重要なのが6～9行目。
このinput要素とlabel要素の関係性により、アコーディオンを操作します。
具体的な方法はcssの部分にて。

10行目～18行目が、アコーディオンを開いた際に表示される中身です。

htmlの構造自体は何か特別難しいものではない、という事がわかったところで、
続いてはcssについて書いていきます。

cssのみで実装するアコーディオン。cssについて

重要なのがこちら。
どのようにcssを書けば、冒頭の動画のような
「cssのみ」で実装するアコーディオン
を制作することができるのか。

早速、cssのコードを見てみましょう。

↑まず、1行目~3行目。これは単純にcssリセットです。
サイト制作の際、cssリセットは大抵済んでいると思いますので
この部分はお好みで。

続く4〜20行目までは、カード型レイアウトのスタイリングです。
こちらも好きなようにスタイリングをアレンジできる部分です。

そして21〜85行目まで。この .accordion-input から始まる部分。
inputタグとlabelタグに関する記述から始まる、この部分が本題です。

ここで登場するセレクタで重要なのが
+ 隣接セレクタ(隣接兄弟結合子とも)
そして
~ 一般兄弟セレクタ(一般兄弟結合子とも)
↑この2つです。

具体的には、
type=”checkbox” である要素、 .accordion-input の制御と、
それと連動するラベルの挙動、

そして、それを押した時に開く
アコーディオンの中身の表示のさせ方の定義

などをおこなっています。

それでは順に見ていきましょう。

…と、いう事です。
この様に、checked属性になった際に
+ (隣接セレクタ)
そして
~ (一般兄弟セレクタ)
この2つを上手に利用する事で、冒頭の動画のような
「cssのみ」で実装するアコーディオン
を実現することができるというわけです。

「+ (隣接セレクタ)」 と「~ (一般兄弟セレクタ)」に関する解説

Web制作界隈でおなじみ、
mozillaが運営する優れたオンラインリファレンス、MDNでの

+ (隣接セレクタ)、
~ (一般兄弟セレクタ)

についての解説ページは次のリンクになります。

隣接兄弟結合子 – CSS: カスケーディングスタイルシート | MDN

一般兄弟結合子 – CSS: カスケーディングスタイルシート | MDN

↑こちらのMDNによる解説は、具体例付きでとてもわかりやすいと思います。
熟読すると特に、
+ (隣接セレクタ)や
~ (一般兄弟セレクタ)が
「どういった条件の時に使えるのか」「どういう挙動をするのか」
といった点についての理解が深まるかと思います。

この記事のまとめ

今回は、冒頭の動画のような
「cssのみ」で実装するアコーディオンの制作方法について、記事を書きました。

記事内でも書いていますが、
今回ご紹介した
+ (隣接セレクタ)や
~ (一般兄弟セレクタ)
↑これらの挙動をよく理解して、その使い方を熟達することで、
「JavaScriptにおける、 true か false の条件によるUIの変更」
の様なことが、
「cssのみでほぼ実現できてしまう」
ということをご自身でも実感できるかと思います。

私自身、この方法に気がついた後で、過去担当した案件について思い出し
JavaScript で実装していたアコーディオンに関して、
「全然cssだけでいけたじゃん！あの工数ほんともったいない！！」

と感じたケースが結構ありますので、
覚えておくと、様々な実際のWeb制作の場面で役に立つことと思います。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。