Webデザイン

【PR】を含みます。

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

HTMLのみでアコーディオンを実装する方法

HTMLのみでアコーディオンメニューを実装する方法を紹介します。

HTML5で導入されたdetailsタグとsummaryタグを使用してアコーディオンメニューを実装します。

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

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

もくじ【単体用】アコーディオン（折りたたみメニュー）【単体用】HTML・CSS【単体用】アコーディオン（折りたたみメニュー）を複数利用する場合【2段用】アコーディオン（折りたたみメニュー）【2段用】H ...

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

あわせて読む
jQuery アコーディオンメニューを作成する方法
【jQuery】アコーディオン(開閉ボタン)を実装する方法

もくじjQueryを使用したアコーディオンサンプルjQueryを使用したアコーディオンコピペ用コード使用方法　Q&A動かないのですが、どうすれば良いですか？アコーディオンの追加方法は？レスポンシブに対 ...

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

あわせて読む
コピペで使える！アコーディオンメニュー
【JavaScript】jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

もくじJavaScriptを使用したアコーディオンサンプルJavaScriptを使用したアコーディオンコピペ用コード使用方法　Q&Aアコーディオンの追加方法は？一つ目のアコーディオンを開いた状態にする ...

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

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

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

HTML
Copy
  1. <details>
  2.   <summary>Q. 質問1</summary>
  3.   <p>A. 回答1</p>
  4. </details>
  5. <details>
  6.   <summary>Q. 質問2</summary>
  7.   <p>A. 回答2</p>
  8. </details>

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

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

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

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

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

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

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

HTML
Copy
  1. <details>
  2.   <summary>Q. 質問1</summary>
  3.   <div class="details_content">A. 回答1</div>
  4. </details>
  5. <details>
  6.   <summary>Q. 質問2</summary>
  7.   <div class="details_content">A. 回答2</div>
  8. </details>
CSS
Copy
  1. details {
  2.   margin-bottom: 20px;
  3.   border: solid 1px #f09896;
  4. }
  5.  
  6. summary {
  7.   list-style: none; /* ?を非表示 */
  8.   cursor: pointer;
  9.   position: relative;
  10.   padding: 10px 35px 10px 20px;
  11. }
  12.  
  13. summary::-webkit-details-marker {
  14.   display: none;
  15. }
  16.  
  17. summary::before {
  18.   content: "";
  19.   width: 14px;
  20.   height: 0;
  21.   border-top: solid 2px #f09896;
  22.   position: absolute;
  23.   top: 50%;
  24.   right: 20px;
  25.   transform: translateY(-50%);
  26. }
  27.  
  28. summary::after {
  29.   content: "";
  30.   width: 0;
  31.   height: 14px;
  32.   border-right: solid 2px #f09896;
  33.   position: absolute;
  34.   top: 50%;
  35.   right: 26px;
  36.   transform: translateY(-50%);
  37. }
  38.  
  39. details[open] summary::after {
  40.   opacity: 0;
  41. }
  42.  
  43. .details_content {
  44.   padding: 0 20px 10px;
  45. }

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

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

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

もくじ【単体用】アコーディオン（折りたたみメニュー）【単体用】HTML・CSS【単体用】アコーディオン（折りたたみメニュー）を複数利用する場合【2段用】アコーディオン（折りたたみメニュー）【2段用】H ...

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

あわせて読む
jQuery アコーディオンメニューを作成する方法
【jQuery】アコーディオン(開閉ボタン)を実装する方法

もくじjQueryを使用したアコーディオンサンプルjQueryを使用したアコーディオンコピペ用コード使用方法　Q&A動かないのですが、どうすれば良いですか？アコーディオンの追加方法は？レスポンシブに対 ...

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

あわせて読む
コピペで使える！アコーディオンメニュー
【JavaScript】jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

もくじJavaScriptを使用したアコーディオンサンプルJavaScriptを使用したアコーディオンコピペ用コード使用方法　Q&Aアコーディオンの追加方法は？一つ目のアコーディオンを開いた状態にする ...

-Webデザイン
-