HTMLとCSSのみでアコーディオンメニューを作成する

当記事ではアコーディオンメニューをHTMLとCSSのみで作成する方法について記します。

⓪アコーディオンメニューの完成イメージ
①HTMLでアコーディオンメニューのパーツを用意
②アコーディオンメニューのスタイルを定義する
③アコーディオンメニューの開閉状態を示すマーク
④アコーディオンメニューに開閉アニメーションをつける
ソースコード全文

⓪アコーディオンメニューの完成イメージ

下記のようなクリックでゆっくり開くアコーディオンメニューをHTMLとCSSで実装することを目指します。

①HTMLでアコーディオンメニューのパーツを用意

クリックでコンテンツが開く機能はdetails&summaryタグの力を借りましょう。

<details class="accordion">
    <summary>アコーディオンボタン</summary>
    <div class="content">
        コンテンツが入ります。<br>
        コンテンツが入ります。<br>
        コンテンツが入ります。<br>
        コンテンツが入ります。<br>
    </div>
</details>

details&summaryタグはCSSもJSもなしでクリックした時にコンテンツを開く仕組みを提供してくれます。
クリックすると、コンテンツが開くはずなので試してみて下さい。

アコーディオンボタン

コンテンツが入ります。
コンテンツが入ります。
コンテンツが入ります。
コンテンツが入ります。

②アコーディオンメニューのスタイルを定義する

アコーディオンメニューに背景色と枠線をつけてみましょう。

.accordion {
    border: 1px solid #000;
}
.accordion summary {
    padding: 15px;
    cursor: pointer;
    background: skyblue;
    position: relative;
    list-style: none;
}

アコーディオンボタン

コンテンツが入ります。
コンテンツが入ります。
コンテンツが入ります。
コンテンツが入ります。

③アコーディオンメニューの開閉状態を示すマーク

デフォルトの開閉状態を示す三角マークを非表示にするには以下の二点を行います。
・summaryにlist-style: noneを指定
・summary::-webkit-details-markerにdisplay: noneを指定（Safari用）

.accordion summary {
    padding: 15px;
    cursor: pointer;
    background: skyblue;
    position: relative;
    list-style: none;   /* 追加 */
}

/********** ↓ 追加 ↓ **********/
.accordion summary::-webkit-details-marker {
    display: none;
}
/********** ↑ 追加 ↑ *********/

開閉状態を示すマークをボタンの右端に表示してみましょう。

.accordion summary::after {
    content: '▼';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.accordion[open] summary::after {
    content: '▲';
}

アコーディオンボタン

コンテンツが入ります。
コンテンツが入ります。
コンテンツが入ります。
コンテンツが入ります。

④アコーディオンメニューに開閉アニメーションをつける

detailsタグは開くとopen属性がつくので、それを利用して@keyframesアニメーションを実行します。

.accordion .content {
    --padding-y: 15px;
    --padding-x: 15px;
    padding: 0 var(--padding-x);
}
.accordion[open] .content {
    animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
    100% { padding: var(--padding-y) var(--padding-x) }
}

heightでアニメーションを付けようとすると0→固定値にする必要があります。
しかし、コンテンツの高さは可変なのでheightを固定値にするべきではありません。
そこで代わりにpaddingの上下を0→固定値に変動させてそれっぽく見せています。

それっぽい開閉アニメーションがついてると思うので確認してみてください。
※details&summaryタグを使用すると二回目以降のアニメーションは効かない時があるみたいです。

アコーディオンボタン

コンテンツが入ります。
コンテンツが入ります。
コンテンツが入ります。
コンテンツが入ります。

アコーディオンメニューの開閉アニメーションに関してはHTMLとCSSのみでそれっぽいものを作ることはできますが、完璧にはできないようです。
アニメーションもしっかり作りたい場合はやはりJavascriptを使った方がよさそうです。
【Javascript】アコーディオンメニューを最小コードで実装する

ソースコード全文

最後にソースコードを全文載せておきます。

<style>
    .accordion {
        border: 1px solid #000;
    }
    .accordion summary {
        padding: 15px;
        cursor: pointer;
        background: skyblue;
        position: relative;
        list-style: none;
    }
    .accordion summary::-webkit-details-marker {
        display: none;
    }
    .accordion summary::after {
        content: '▼';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .accordion[open] summary::after {
        content: '▲';
    }
    .accordion .content {
        --padding-y: 15px;
        --padding-x: 15px;
        padding: 0 var(--padding-x);
    }
    .accordion[open] .content {
        animation: fadeIn 1s ease forwards;
    }
    @keyframes fadeIn {
        100% { padding: var(--padding-y) var(--padding-x) }
    }
</style>

<details class="accordion">
    <summary>アコーディオンボタン</summary>
    <div class="content">
        コンテンツが入ります。<br>
        コンテンツが入ります。<br>
        コンテンツが入ります。<br>
        コンテンツが入ります。<br>
    </div>
</details>

他にも以下のようなものがCSSのみで実現できます。