【PR】を含みます。

フロントエンド

【CSS不要】HTMLのみでアコーディオン(開閉ボタン)を実装する方法

CSS不要 HTMLのみでアコーディオン(開閉ボタン)を実装する方法

Webサイトでよく見かける「アコーディオンメニュー」を、JavaScriptやCSSを使わずにHTMLだけで実装できることをご存知ですか？

本記事では、HTML5で導入されたdetailsタグとsummaryタグを活用し、誰でも簡単に作れるアコーディオン（開閉ボタン）の作り方を分かりやすく解説します。

コピペで使えるサンプルコードも掲載しているので、ぜひご活用ください。

アコーディオンをHTMLとCSSのみで実装する方法は以下の記事で紹介しています。

あわせて読む
HTML・CSS アコーディオンメニューをHTMLとCSSのみで実装する方法

【HTML・CSS】アコーディオンメニューをHTMLとCSSのみで実装する方法

Webサイトでよく見かけるアコーディオンメニュー（折りたたみメニュー）。 実は、JavaScriptを使わなくてもHTMLとCSSだけで実装できることをご存知ですか？ この記事では、JavaScrip ...

アコーディオンをjQueryで実装する方法は以下の記事で紹介しています。

あわせて読む
jQuery アコーディオン(開閉ボタン)を実装する方法

【jQuery】アコーディオン(開閉ボタン)を実装する方法

jQueryでアコーディオン(開閉ボタン)を実装する方法を紹介します。 フロントエンドのコーディングでよく使用するため、コピペで使用できるようまとめています。 この記事では、基本的なアコーディオンの実 ...

アコーディオンをJavaScriptで実装する方法は以下の記事で紹介しています。

あわせて読む
JavaScript jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

【JavaScript】jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

jQueryを使わずにJavaScriptでアコーディオンメニューを実装する方法を解説します。 HTML・CSS・JavaScriptのコードをコピペするだけで使える、アニメーション付きのアコーディオ ...

【サンプル】HTMLのみでアコーディオンメニューを実装

Q. 質問1
A. 回答1
Q. 質問2
A. 回答2

【実装コード】HTMLのみでアコーディオンメニューを実装

Copyをクリックするとコピーできます。

HTML
Copy
<details>
  <summary>Q. 質問1</summary>
  <p>A. 回答1</p>
</details>
<details>
  <summary>Q. 質問2</summary>
  <p>A. 回答2</p>
</details>

detailsタグとsummaryタグにCSS当ててデザインを調整

HTMLのみだとデザインが単調なため、detailsタグとsummaryタグにCSSを当てます。

アコーディオンが開いているときdetailsタグにopen属性が自動で付与されます。

この特性を利用して閉まっているときは「+」、開いているときは「‐」になるようにCSSで調整します。

デフォルトで表示される「▶」部分は、CSSで非表示にしています。

【サンプル】CSSで調整したアコーディオンメニュー

Q. 質問1
A. 回答1
Q. 質問2
A. 回答2

【実装コード】CSSで調整したアコーディオンメニュー

Copyをクリックするとコピーできます。

HTML
Copy
<details>
  <summary>Q. 質問1</summary>
  <div class="details_content">A. 回答1</div>
</details>
<details>
  <summary>Q. 質問2</summary>
  <div class="details_content">A. 回答2</div>
</details>
CSS
Copy
details {
  margin-bottom: 20px;
  border: solid 1px #f09896;
}
summary {
  position: relative;
  padding: 10px 35px 10px 20px;
  list-style: none; /* ▶を非表示 */
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
summary::before {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 14px;
  height: 0;
  border-top: solid 2px #f09896;
  transform: translateY(-50%);
  content: "";
}
summary::after {
  position: absolute;
  top: 50%;
  right: 26px;
  width: 0;
  height: 14px;
  border-right: solid 2px #f09896;
  transform: translateY(-50%);
  content: "";
}
details[open] summary::after {
  opacity: 0;
}
.details_content {
  padding: 0 20px 10px;
}

まとめ

今回は、HTMLだけでアコーディオン（開閉ボタン）を実装する方法をご紹介しました。

detailsタグとsummaryタグを使えば、JavaScriptや複雑なCSSを使わずに、誰でも簡単にアコーディオンメニューを作成できます。

デザインを調整したい場合は、CSSを追加することで見た目も自由にカスタマイズ可能です。

ぜひご自身のWebサイトやブログで活用してみてください。

アコーディオンをHTMLとCSSのみで実装する方法は以下の記事で紹介しています。

あわせて読む
HTML・CSS アコーディオンメニューをHTMLとCSSのみで実装する方法

【HTML・CSS】アコーディオンメニューをHTMLとCSSのみで実装する方法

Webサイトでよく見かけるアコーディオンメニュー（折りたたみメニュー）。 実は、JavaScriptを使わなくてもHTMLとCSSだけで実装できることをご存知ですか？ この記事では、JavaScrip ...

アコーディオンをjQueryで実装する方法は以下の記事で紹介しています。

あわせて読む
jQuery アコーディオン(開閉ボタン)を実装する方法

【jQuery】アコーディオン(開閉ボタン)を実装する方法

jQueryでアコーディオン(開閉ボタン)を実装する方法を紹介します。 フロントエンドのコーディングでよく使用するため、コピペで使用できるようまとめています。 この記事では、基本的なアコーディオンの実 ...

アコーディオンをJavaScriptで実装する方法は以下の記事で紹介しています。

あわせて読む
JavaScript jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

【JavaScript】jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

jQueryを使わずにJavaScriptでアコーディオンメニューを実装する方法を解説します。 HTML・CSS・JavaScriptのコードをコピペするだけで使える、アニメーション付きのアコーディオ ...

-フロントエンド
-