問題
3CSSアコーディオン作成
FAQやメニューなどでよく見かけるアコーディオンは、情報を整理して表示できる便利なUIです。
特に「アコーディオン CSS」で検索する方の多くは、JavaScriptを使わずに実装したいと考えています。
この問題では、CSSのみでアコーディオンを実装し、軽量で扱いやすいUI設計を理解していきましょう。
HTML/CSSの問題に挑戦しよう！
問題
「CSSアコーディオン作成」
CSSのみでアコーディオンを実装してみましょう。
クリックに応じて開閉するUIを作成し、複数項目でも整理して表示できる構造を再現してください。
アコーディオンCSSの基本的な動きを理解できれば成功です。
期待する画面
解答と解説（CSSアコーディオン作成）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
CSSのみでアコーディオンを実装する場合の基本は、「チェックボックスの状態を利用する」ことです。
JavaScriptを使わずに状態管理を行うために、input[type="checkbox"]のchecked状態をトリガーとして、表示・非表示を切り替えています。
まず、inputとlabelを連動させるために、idとfor属性を同じ値に設定します。
これにより、ラベルをクリックするとチェック状態が切り替わる仕組みになります。
チェックボックス自体はUIに不要なため、display: none;で非表示にします。
次に、開閉されるコンテンツ部分には初期状態としてmax-height: 0;とoverflow: hidden;を指定し、中身が見えない状態にしておきます。
ここでheightではなくmax-heightを使うのがポイントで、アニメーションさせるために柔軟な高さ制御が可能になります。
そして、input:checkedの状態をセレクタで取得し、該当するコンテンツに対してmax-heightを大きな値に変更することで、開いた状態を作ります。
この変化にtransitionを加えることで、スムーズな開閉アニメーションが実現できます。
この方法はシンプルですが、「状態管理」「セレクタ設計」「アニメーション」の3つの要素が組み合わさった実践的な実装です。
CSSだけでここまで制御できるという点をしっかり理解しておきましょう。
補足
CSSのみでアコーディオンを実装するには、チェック状態とセレクタ設計の理解が重要です。
特に「アコーディオン CSS」でよく使われる「+（隣接セレクタ）」を活用することで、クリックに応じた表示切り替えが可能になります。
transitionの指定によって動きも変わるため、意識して調整してみましょう。
・チェックボックス関連：チェックボックスをカスタムしよう
・問題集一覧：HTML/CSS問題集トップ
・CSSの基礎から学びたい方：CSS入門講座
↓もう一歩理解を深めたい方は、この下もチェックしてみましょう。
ポイント
アコーディオンCSSの仕組み
アコーディオンCSSを実装する場合は、inputのchecked状態とセレクタの組み合わせが重要になります。
特に「+」や「~」といった隣接・兄弟セレクタを使うことで、クリックに応じた表示制御が可能になります。
また、max-heightとoverflowを使った開閉表現は実務でも頻出のパターンです。
CSSのみでインタラクティブなUIを実現できる点を押さえておきましょう。
