CSSだけで作るアコーディオンメニュー

2025.12.23

内容に広告・プロモーションを含みます

URLをコピーしました！

アコーディオンメニュー

今更、説明も不要かと思いますが一応確認しておきましょう。下にある通り、クリックで開閉ができるメニューのことです。

クリックで開く1hello.world!クリックで開く2hello.world!クリックで開く3hello.world!クリックで開く4hello.world!

基本的なやり方

どうやって実装するかを簡単に説明します。

labelをクリックする

アコーディオンメニューのクリック部分になります。

labelクリックでチェックボックスにチェックを付けたり外したりする

チェックボックスはアコーディオンメニューの表示・非表示を切り替えるフラグとして使います。あくまでフラグとして使うので、Web上には表示しません。

CSSの隣接セレクタでチェックボックスにチェックがついているかいないかで、コンテンツの表示・非表示のスタイルを変更する

CSSの擬似クラス:checkedと、隣接セレクタを使います。擬似クラス:checkedと隣接セレクタは下記リンクより詳細を確認してみてください。

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

ベースのHTML・CSS

次にソースコードを見ていきます。

HTML

<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check1">クリックで開く1</label>
<div class="acd-content">
    <p>hello.world!</p>
</div>
<input id="acd-check2" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check2">クリックで開く2</label>
<div class="acd-content">
    <p>hello.world2!</p>
</div>
以下同じ

2行目

labelはforにinputのID名を入れることでラベルをクリックしてもチェックボックスにチェックを付け外しできます。これを利用して、非表示のチェックボックスにチェックを付け外しします。

サンプルです。下の「ここをクリック！」の文字をクリックして、チェックを付け外ししてみてください。

ここをクリック！

CSS

.acd-check{
    display: none;
}
.acd-label{
    background: #333;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
}
.acd-content{
    border: 1px solid #333;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
    height: 40px;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}

2行目

チェックボックスは前述のとおり、表示・非表示を切り替えるフラグとして使うだけですので、CSSでdisplay: none;にします。

11行目〜

表示・非表示を切り替えるボックス要素acd-contentは、チェックが入っていない状態（非表示）の時は、
height: 0;
opacity: 0;
visibility: hidden;
としています。

またアニメーションさせるため
transition: .5s;
も設定しています。

19行目〜

.acd-check:checked + .acd-label + .acd-contentと指定することで、チェックボックスにチェックが入った状態のacd-contentという指定ができます。

そして、
height: 40px;
opacity: 1;
visibility: visible;とすることで非表示から表示へアニメーションさせています。

注意点は、height: auto;ではアニメーションがおかしくなってしまうので、明確な数値を指定する必要があります。

では、改めて確認してみましょう。わかりやすくするため、こちらはあえてチェックボックスを非表示にしていません。

See the Pen accordion menu2 by Kiyonobu Kasuga (@kiyonobu-kasuga) on CodePen.

チェックボックスを非表示にしました。

See the Pen accordion menu by Kiyonobu Kasuga (@kiyonobu-kasuga) on CodePen.

応用編　アイコンで表示・非表示状態をわかりやすく

基本的な動きは実装できました。ただこれだけではあれなんで、アコーディオンメニューの開閉状態をアイコンでわかりやすくしてみたいと思います。

クリックで開く1hello.world!クリックで開く2hello.world!クリックで開く3hello.world!クリックで開く4hello.world!

HTML

HTMLは変更なしです。

CSS

.acd-check{
    display: none;
}
.acd-label{
    background: #0068b7;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
    position: relative;
}
.acd-label:after{
    background: #00479d;
    box-sizing: border-box;
    content: '\f067';
    display: block;
    font-family: "Font Awesome 5 Free";
    height: 52px;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 0px;
}
.acd-content{
    border: 1px solid #333;
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
}
.acd-check:checked + .acd-label:after{
    content: '\f068';
}
.acd-check:checked + .acd-label + .acd-content{
    height: 50px;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}

10行目

アイコンをposition: absolute;で配置するので、ラベルはposition: relative;にしておきます。

12行目〜

ラベルに:after擬似要素でアイコンを設定します。アイコンはFont Awesomeを使用しました。

33行目〜

チェックが入った時のアイコンを変更しています。

WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ

「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。

しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。

一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。

かすが

私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！

スクールで学ぶ5つのメリット

カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
現役のプロから実践的なフィードバックを受けられる
わからないことをすぐに質問・解決できる環境がある
制作課題を通じて、ポートフォリオが作成できる
学習仲間や講師とのつながりが、モチベーション維持につながる

スクール選びでチェックすべき5つのポイント

カリキュラムが現場で必要とされる技術に対応しているか
現役デザイナー・エンジニアが講師として在籍しているか
ポートフォリオ制作のサポートが充実しているか
卒業後の就職・転職支援が用意されているか
オンライン・通学など、自分の生活スタイルに合った受講形式か

遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。

WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。

【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！