HTMLのみでアコーディオンを作る！CSSを使った装飾も紹介

こんにちは。

バナナは熟していない派のぷのこです。まだ固くて酸味があるくらいが美味しいんですよね。

さて、今回はHTMLで作るアコーディオンのお話。

こんな思いをお持ちではないでしょうか。

そこで今回は、HTMLのみでアコーディオンを作る方法を解説しました。

CSSでデザインを変える方法も紹介しているので、ぜひ参考にしてみてくださいね。

HTMLのみでアコーディオンを作る方法

HTMLのみでアコーディオンを作るには、detailsタグとsummaryタグを使います。

まずは基本的な使い方を見ていきましょう。

detailsタグとsummaryタグの使い方

アコーディオン全体をdetailsタグで囲み、タイトルをsummaryタグで囲みます。summaryタグの下に、アコーディオンの中に入れたい中身を記述します。

summaryタグの部分をクリックすると、アコーディオンが開いて中身が表示されますね。開いた状態でクリックすると、アコーディオンが閉じて中身が非表示になります。

最初からアコーディオンを開いておく方法

summaryタグをクリックせずに最初からアコーディオンを開いておくには、detailsタグにopen属性を指定します。

summaryタグをクリックしなくても、アコーディオンの中身が表示されていますね。

CSSでデザインを変える方法

ここまで、HTMLのdetailsタグとsummaryタグでアコーディオンを作る方法を見ていきました。簡単にできて便利ですが、ちょっと見た目がシンプル過ぎる気もしますよね。

そこでここからは、CSSでデザインを変える方法をいくつかご紹介していきます。

ホバー時のカーソルを変える

デフォルトのままだと、カーソルがsummaryタグの上に乗っても見た目が変わらないので、クリックできることがわかりにくいです。リンクの上にカーソルが乗った時のように、ポインター（指マーク）に変えてみましょう。

カーソルがポインターに変わり、わかりやすくなりました。

開いている時のスタイルを変える

アコーディオンが開いている時のデザインを変えるには、details[open]をセレクタに指定します。今回は、開いている時の背景色を緑に変えます。

アコーディオンが開いた時に、背景色が緑になっていますね。

矢印のデザインを変える

矢印のデザインを変えるには、デフォルトの矢印を削除してから好きなアイコンや画像などを追加します。

今回はFont Awesomeを使って、アコーディオンの開閉に合わせてプラス・マイナスアイコンが変わるように設定します。

閉じている時と開いている時それぞれ、擬似要素を使ってプラス・マイナスアイコンを設定しています。

アウトラインを非表示にする

summaryタグをクリックした時に表示される青い線は、summary{ outline: none; }で非表示にすることもできます。しかし、使いやすさを損ねてしまうことがあるので推奨はされていません。

まとめ

いかがでしたか？

今回は、HTMLのみでアコーディオンを作る方法や、CSSでの装飾について解説しました。

アコーディオンを簡単に作りたい時にはぜひ活用してみてくださいね。