/最終更新日:2019/06/04TechniqueCSSレスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。いうことで、今回はjQueryなしでCSSだけで作るアコーディオンメニューをやっていきたいと思います。説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。hello.world!基本的なやり方どうやって実装するかを簡単に説明します。labelをクリックするアコーディオンメニューのクリック部分になります。labelクリックでチェックボックスにチェックを付けたり外したりするチェックボックスはアコーディオンメニューの表示・非表示を切り替えるフラグとして使います。フラグとして使うので、Web上には表示しません。CSSの隣接セレクタでチェックボックスにチェックがついているかいないかで、コンテンツの表示・非表示のスタイルを変更するCSSの擬似クラス:checkedと、隣接セレクタを使います。擬似クラス:checkedと隣接セレクタは下記リンクより詳細を確認してみてください。MDNベースのHTML・CSS次にソースコードを見ていきます。class="acd-content"><p>hello.world2!</p></div>以下同じ2行目labelはforにinputのID名を入れることでラベルをクリックしてもチェックボックスにチェックを付け外しできます。これを利用して、非表示のチェックボックスにチェックを付け外しします。下の「ここをクリック!」の文字をクリックして、チェックを付け外ししてみてください。hidden;としています。.5s;も設定しています。.acd-contentと指定することで、チェックボックスにチェックが入った状態のacd-contentという指定ができます。visible;とすることで非表示から表示へアニメーションさせています。auto;ではアニメーションがおかしくなってしまうので、明確な数値を指定する必要があります。わかりやすくするため、こちらはあえてチェックボックスを非表示にしていません。CodePen.チェックボックスを非表示にしました。アイコンで表示・非表示状態をわかりやすく基本的な動きは実装できました。これだけではあれなんで、アコーディオンメニューの開閉状態をアイコンでわかりやすくしてみたいと思います。hello.world!HTMLHTMLは変更なしです。relative;にしておきます。12行目〜ラベルに:after擬似要素でアイコンを設定します。Awesomeを使用しました。Awesome33行目〜チェックが入った時のアイコンを変更しています。まとめというわけで、CSSだけで作るアコーディオンメニューをやってみました。今回のポイントはCSSの擬似クラスや隣接セレクタを使っている点です。意外と知らなかったり、忘れている擬似クラスやセレクタがあったりするので、これを機に調べてみると新しい発見があるかもです。今回の記事に関連して「【jQuery・CSS】jQueryとCSSで作るアコーディオンメニュー」という記事も書いていますので、興味がある方はぜひチェックしてみてくださいね。MORE【HTML・CSS・jQuery】フルスクリーンナビゲーションを作る。Day.GALLERYINSPIRATIONCONTACTTGIC。