【動画つき】HTML・CSSを使ったアコーディオンメニューの作り方を解説!

アコーディオンは、Webサイトでほぼ100%使われているパーツです。

そのため、Web制作を仕事にするのであれば、アコーディオンの作り方を身につけておくことは必須といえます。

本記事では、HTML・CSSを使ったアコーディオンの基本的な実装方法を解説します。

JavaScriptを使ったアニメーションの追加方法もご紹介していますので、ぜひ参考にしてください。

■動画で内容を確認したい方はこちら!
はにわまんさん
【講師プロフィール】
はにわまんさん(@haniwa008
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。

そもそも「アコーディオン」とは?

アコーディオンとは、クリックやタップでセクションが開閉するパーツのことです。

FAQのような「質問と答え」を見せたいときに便利であり、多くのサイトで使われています。

たとえば、ZOZOTOWNの「ヘルプページ」や、三井住友銀行の「よくある質問」でもアコーディオンが用いられていました。

引用:ZOZOTOWN
引用:三井住友銀行

アコーディオンを使うと情報がコンパクトにまとまり、必要な時だけ詳細を表示できるので、ユーザー体験を向上させられる効果があります。

Webサイトのアコーディオンの作り方

ここからは、アコーディオンの実装方法を解説します。

作成するのは、次の画像のような質問をクリックすると答えが下に出てくるアコーディオンパーツです。

1:HTMLでアコーディオンの基本構造を作成

まずはHTMLでアコーディオンの骨組みを作っていきます。

今回使用するのは <details> タグ<summary> タグです。

<details> タグ:ウィジェットが開いた状態になったときのみ情報が表示される折りたたみのウィジェットを作成する
<summary> タグ:折りたたみウィジェットのラベルとして使用する

この2つのタグを使うと、アニメーションが不要ならば、HTMLとCSSだけでアコーディオン機能を実現できます。

引用:mdn web docs

<details> タグと <summary> タグを使ったHTMLの書き方は次のとおりです。

<details>
<summary>どんなことでも対応可能ですか?</summary>
<p>WordPressが得意ですが、ご相談に応じて柔軟に対応いたします。</p>
</details>

複数のFAQを作りたい場合は、上記のHTMLを必要な数ぶんコピペしましょう。

例として、3つ並べると次のように表示されます。

2:CSSでアコーディオンの見栄えを整える

次に、CSSを使ってアコーディオンのデザインを調整します。

CSSをあてるために、HTMLには任意のclass名をつけておきましょう。

今回は、次のようにclassを設定しました。

<div class=”faq__boxes”>
<details class=”faq__box faq-box”>
<summary class=”faq-box__head”>
どんなことでも可能ですか?
</summary>
<div class=”faq-box__body”>
<p class=”faq-box__content”>
WordPressが得意ですが、ご相談に応じて柔軟に対応いたします。
</p>
</div>
</details>
</div>

はにわまんさん
それでは、見栄えを調整していきましょう。
調整内容 CSS
各ボックスの間に余白を設ける .faq__boxes {
display: grid;
gap: 12px;
}
・▶マークを消す
(ブラウザによって消えていない場合を防ぐために「-webkit-…」を適用)

・背景を黒、文字を白に設定する

.faq-box__head {
display: block;
background: #4a4a4a;
color: #fff;
padding: 20px;
position: relative;
}

.faq-box__head::-webkit-details-marker- {
display: none;
}

「.faq-box__head」に対して、疑似要素のboforeで横棒、afterで縦棒を作り、「+」アイコンを再現する .faq-box__head::before
.faq-box__head::after {
content: “”;
position: absolute;
top: 50%;
translate: 0 -50%;
backgraund: #fff;
}

.faq-box__head::before {
width: 16px;
height: 2px;
right: 16px
}

.faq-box__head::after {
width: 2px;
height: 16px;
right: 23px
transition: rotate 0.3s;
}

detailタグがopenになっているときに縦棒を90°回転させてアイコンを「ー」にする .faq-box[open] .faq-box__head::after {
rotate: 90deg;
}
コンテンツの高さが0のときに回答のテキストがはみ出さないようにする
(このあと解説するJavaScriptで必要)
.faq-box__body {
overflow: hidden;
}
余白を設ける .faq-box__content {
padding: 20px;
}

上記の調整をすべてCSSで設定すると、次のようになります。

3:JavaScriptでアコーディオンに動きをつける

アコーディオンの視覚的な印象を向上させるために、アニメーションを加えます。

まず、JavaScript用のクラスをHTMLに足しましょう。(※黄色太字が足した部分)

<div class=”faq__boxes”>
<details class=”faq__box faq-box js-accordion“>
<summary class=”faq-box__head”>
どんなことでも可能ですか?
</summary>
<div class=”faq-box__body js-accordion-content“>
<p class=”faq-box__content”>
WordPressが得意ですが、ご相談に応じて柔軟に対応いたします。
</p>
</div>
</details>
</div>

HTMLにクラス名を足したら、JavaScriptを書いていきましょう。

今回は、クリックしたときに上から開くようなアニメーションにしたいため、アコーディオンの「開く」「閉じる」を、次のように設定します。

  • 開く:高さ0からコンテンツの高さまで下に広がる
  • 閉じる:コンテンツの高さから高さ0に戻る

このアニメーションをJavaScriptで書くと、下記のようになります。

document.addEventListener(“DOMContentLoaded”, () =>. {
const accodions = document.querySelectorAll(“.js-accordion”);

accodions.forEach(accordion => {
const summary = accordion.querySelector(“summary”);
const content = accordion.querySelector(“.js-accordion-content”);

summary.addEventLister(“click” , event => {
event.preventDefault();

if (accordion .dataset.isAnimation === “true”) {
return;
}

if (accordion.open){
//閉じる処理
accordion .dataset.isAnimation = “true”;
const closeAnimation = content.animate(
height: [content.offsetHeight + “px” ,  0],
},
{
duration: 300,
easing: “linear”,
}
);
closeAnimation.onfinish = () => {
accordion,removeattribute(“open”);
accordion .dataset.isAnimation = “false”;
};
} else {
//開く処理
accordion .setAttribute(“open”, “true”)
accordion .dataset.isAnimation = “true”;
const openAnimation = content.animate(
height: [0, content.offsetHeight + “px”],
},
{
duration: 300,
easing: “linear”,
openAnimation.onfinish = () => {
accordion .dataset.isAnimation = “false”;
);
}
});
});
});

はにわまんさん
なお、アコーディオンを連打したときに動作が不安定になることを避けるため、「if (accordion .dataset.isAnimation === “true”) {return;}」を使って連打を防止する処理をしています。
これで連打してもアニメーション中は機能しなくなり、安定性が増します。

まとめ:アコーディオンはWeb制作初心者でも実装できる!

今回ご紹介したアコーディオンの実装方法は、Web制作の現場でよく使われる技術の一つです。

特に、ユーザーにとってわかりやすく使いやすいインターフェースを作る際に役立ちます。

アコーディオンはHTMLとCSSだけでも簡単に実装できますが、JavaScriptを加えることでより高度な機能やデザインのカスタマイズが可能です。

Web制作を仕事にしていきたいと考えている方は、ぜひマスターしてみてください!

未経験からWeb制作を学ぶならデイトラWeb制作コースがおすすめ!

東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分!Web制作を網羅的に学べます。

また、中級・上級の最終課題はメンターによる課題レビューつき!品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください!

【Webスキル診断】“一生使えるスキル”を60秒で診断しよう!

「フリーランスになりたいけど、どんなスキルを身につければいいかわからない」という悩みを解決すべく、東京フリーランスでは【Webスキル診断】をLINEで無料実施中です! Web制作・Webデザイン・アプリ開発・動画編集など「自分に合った理想の働き方は何か」を見極めていただけます。

フリーランス全般カテゴリの最新記事