Webデザイン

【PR】を含みます。

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

アコーディオンメニュー

アコーディオンメニュー（折りたたみメニュー）をJavaScriptを使用せずに、HTMLとCSSのみで実装する方法を紹介します。

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

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

もくじ【サンプル】HTMLのみでアコーディオンメニューを実装【実装コード】HTMLのみでアコーディオンメニューを実装detailsタグとsummaryタグにCSS当ててデザインを調整【サンプル】CSS ...

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

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

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

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

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

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

【単体用】アコーディオン（折りたたみメニュー）

sample
A.テキスト

【単体用】HTML・CSS

HTML
Copy
  1. <div class="menu-box">
  2.   <input id="check-box" type="checkbox">
  3.   <label class="menu-label-title" for="check-box">
  4.     <span class="menu-title">Q.クリック</span>
  5.     <span></span>
  6.     <span></span>
  7.   </label><!-- .menu-label-title -->
  8.   <div class="menu-text">A.テキスト</div>
  9. </div><!-- .menu-box -->
CSS
Copy
  1. .menu-box {
  2.   border: solid 1px #c0c0c0;
  3. }
  5. .menu-box .menu-label-title {
  6.   display: block;
  7.   padding: 20px 25px;
  8.   cursor: pointer;
  9.   position: relative;
  10. }
  12. .menu-box .menu-title {
  13.   display: block;
  14.   padding-right: 50px;
  15. }
  17. .menu-box .menu-label-title span:nth-child(2),
  18. .menu-box .menu-label-title span:nth-child(3) {
  19.   display: block;
  20.   width: 16px;
  21.   border-bottom: solid 1px #c0c0c0;
  22.   position: absolute;
  23.   top: 50%;
  24.   right: 25px;
  25.   transform: translateY(-50%);
  26.   -webkit-transform: translateY(-50%);
  27.   -ms-transform: translateY(-50%);
  28. }
  30. .menu-box .menu-label-title span:nth-child(2) {
  31.   transform: rotate(45deg);
  32.   right: 36px;
  33. }
  35. .menu-box .menu-label-title span:nth-child(3) {
  36.   transform: rotate(-45deg);
  37. }
  39. .menu-box .menu-text {
  40.   display: none;
  41.   padding: 20px 0;
  42.   margin: 0 25px;
  43.   border-top: dotted 1px #c0c0c0;
  44. }
  46. /* 折り畳みメニューを追加する場合 */
  47. .menu-box #check-box {
  48.   display: none;
  49. }
  51. .menu-box #check-box:checked ~ .menu-text {
  52.   display: block;
  53. }
  55. .menu-box #check-box:checked ~ .menu-label-title span:nth-child(2) {
  56.   transform: rotate(-45deg);
  57. }
  59. .menu-box #check-box:checked ~ .menu-label-title span:nth-child(3) {
  60.   transform: rotate(45deg);
  61. }
  62. /* ここまで */

【単体用】アコーディオン（折りたたみメニュー）を複数利用する場合

sample
A.テキスト
A.テキスト
HTML
Copy
  1. <div class="menu-box">
  2.   <input id="check-box" type="checkbox">
  3.   <label class="menu-label-title" for="check-box">
  4.     <span class="menu-title">Q.クリック</span>
  5.     <span></span>
  6.     <span></span>
  7.   </label><!-- .menu-label-title -->
  8.   <div class="menu-text">A.テキスト</div>
  9. </div><!-- .menu-box -->

上記のコードを必要な数任意の場所に貼り付け。

貼り付けた2つ目以降のid="check-box"とfor="check-box"のcheck-boxを固有値に変更する。

sampleの例だと下記のようになります。

HTML
Copy
  1. <div class="menu-box">
  2.   <input id="check-box" type="checkbox">
  3.   <label class="menu-label-title" for="check-box">
  4.     <span class="menu-title">Q.クリック</span>
  5.     <span></span>
  6.     <span></span>
  7.   </label><!-- .menu-label-title -->
  8.   <div class="menu-text">A.テキスト</div>
  9. </div><!-- .menu-box -->
  10. <div class="menu-box">
  11.   <input id="check-box2" type="checkbox">
  12.   <label class="menu-label-title" for="check-box2">
  13.     <span class="menu-title">Q.クリック</span>
  14.     <span></span>
  15.     <span></span>
  16.   </label><!-- .menu-label-title -->
  17.   <div class="menu-text">A.テキスト</div>
  18. </div><!-- .menu-box -->

最後に、CSSの46行目「/* 折り畳みメニューを追加する場合 */」から
62行目「/* ここまで */」のセレクタを変更。

今回のサンプルの例だと下記のようになります。(1～45行目は省略)

CSS
Copy
  1. /* 折り畳みメニューを追加する場合 */
  2. .menu-box #check-box,
  3. .menu-box #check-box2 {
  4.   display: none;
  5. }
  7. .menu-box #check-box:checked ~ .menu-text,
  8. .menu-box #check-box2:checked ~ .menu-text {
  9.   display: block;
  10. }
  12. .menu-box #check-box:checked ~ .menu-label-title span:nth-child(2),
  13. .menu-box #check-box2:checked ~ .menu-label-title span:nth-child(2) {
  14.   transform: rotate(-45deg);
  15. }
  17. .menu-box #check-box:checked ~ .menu-label-title span:nth-child(3),
  18. .menu-box #check-box2:checked ~ .menu-label-title span:nth-child(3) {
  19.   transform: rotate(45deg);
  20. }
  21. /* ここまで */

【2段用】アコーディオン（折りたたみメニュー）

sample
A.テキスト
A.テキスト

【2段用】HTML・CSS

HTML
Copy
  1. <div class="double-menu-box">
  2.   <div class="menus-box">
  3.     <input id="double-check-box" type="checkbox">
  4.     <label class="menu-label-title" for="double-check-box">
  5.       <span class="menu-title">Q.クリック</span>
  6.       <span></span>
  7.       <span></span>
  8.     </label><!-- .menu-label-title -->
  9.     <div class="menu-text">A.テキスト</div>
  10.   </div><!-- .menus-box -->
  11.   <div class="menus-box">
  12.     <input id="double-check-box2" type="checkbox">
  13.     <label class="menu-label-title" for="double-check-box2">
  14.       <span class="menu-title">Q.クリック</span>
  15.       <span></span>
  16.       <span></span>
  17.     </label><!-- .menu-label-title -->
  18.     <div class="menu-text">A.テキスト</div>
  19.   </div><!-- .menus-box -->
  20. </div><!-- .double-menu-box -->
CSS
Copy
  1. .double-menu-box {
  2.   border: solid 1px #c0c0c0;
  3. }
  5. .double-menu-box .menus-box {
  6.   border-top: dashed 1px #c0c0c0;
  7. }
  9. .double-menu-box .menus-box:first-child {
  10.   border-top: none;
  11. }
  13. .double-menu-box .menu-label-title {
  14.   display: block;
  15.   padding: 20px 25px;
  16.   cursor: pointer;
  17.   position: relative;
  18. }
  20. .double-menu-box .menu-title {
  21.   display: block;
  22.   padding-right: 50px;
  23. }
  25. .double-menu-box .menu-label-title span:nth-child(2),
  26. .double-menu-box .menu-label-title span:nth-child(3) {
  27.   display: block;
  28.   width: 16px;
  29.   border-bottom: solid 1px #c0c0c0;
  30.   position: absolute;
  31.   top: 50%;
  32.   right: 25px;
  33.   transform: translateY(-50%);
  34.   -webkit-transform: translateY(-50%);
  35.   -ms-transform: translateY(-50%);
  36. }
  38. .double-menu-box .menu-label-title span:nth-child(2) {
  39.   transform: rotate(45deg);
  40.   right: 36px;
  41. }
  43. .double-menu-box .menu-label-title span:nth-child(3) {
  44.   transform: rotate(-45deg);
  45. }
  47. .double-menu-box .menu-text {
  48.   display: none;
  49.   padding: 20px 0;
  50.   margin: 0 25px;
  51.   border-top: dotted 1px #c0c0c0;
  52. }
  54. .double-menu-box .menus-box #double-check-box,
  55. .double-menu-box .menus-box #double-check-box2 {
  56.   display: none;
  57. }
  59. .double-menu-box .menus-box #double-check-box:checked ~ .menu-text,
  60. .double-menu-box .menus-box #double-check-box2:checked ~ .menu-text {
  61.   display: block;
  62. }
  64. .double-menu-box .menus-box #double-check-box:checked ~ .menu-label-title span:nth-child(2),
  65. .double-menu-box .menus-box #double-check-box2:checked ~ .menu-label-title span:nth-child(2) {
  66.   transform: rotate(-45deg);
  67. }
  69. .double-menu-box .menus-box #double-check-box:checked ~ .menu-label-title span:nth-child(3),
  70. .double-menu-box .menus-box #double-check-box2:checked ~ .menu-label-title span:nth-child(3) {
  71.   transform: rotate(45deg);
  72. }

【3段以上用】アコーディオン（折りたたみメニュー）

sample
A.テキスト
A.テキスト
A.テキスト

【3段以上用】HTML・CSS

HTML
Copy
  1. <div class="triple-menu-box">
  2.   <div class="menus-box">
  3.     <input id="triple-check-box" type="checkbox">
  4.     <label class="menu-label-title" for="triple-check-box">
  5.       <span class="menu-title">Q.クリック</span>
  6.       <span></span>
  7.       <span></span>
  8.     </label><!-- .menu-label-title -->
  9.     <div class="menu-text">A.テキスト</div>
  10.   </div><!-- .menus-box -->
  11.   <div class="menus-box">
  12.     <input id="triple-check-box2" type="checkbox">
  13.     <label class="menu-label-title" for="triple-check-box2">
  14.       <span class="menu-title">Q.クリック</span>
  15.       <span></span>
  16.       <span></span>
  17.     </label><!-- .menu-label-title -->
  18.     <div class="menu-text">A.テキスト</div>
  19.   </div><!-- .menus-box -->
  20.   <div class="menus-box">
  21.     <input id="triple-check-box3" type="checkbox">
  22.     <label class="menu-label-title" for="triple-check-box3">
  23.       <span class="menu-title">Q.クリック</span>
  24.       <span></span>
  25.       <span></span>
  26.     </label><!-- .menu-label-title -->
  27.     <div class="menu-text">A.テキスト</div>
  28.   </div><!-- .menus-box -->
  29.   <!-- 折り畳みメニューを追加する場合はこの下に追加 -->
  30. </div><!-- .triple-menu-box -->
CSS
Copy
  1. .triple-menu-box {
  2.   border: solid 1px #c0c0c0;
  3. }
  5. .triple-menu-box .menus-box {
  6.   border-top: dashed 1px #c0c0c0;
  7. }
  9. .triple-menu-box .menus-box:first-child {
  10.   border-top: none;
  11. }
  13. .triple-menu-box .menu-label-title {
  14.   display: block;
  15.   padding: 20px 25px;
  16.   cursor: pointer;
  17.   position: relative;
  18. }
  20. .triple-menu-box .menu-title {
  21.   display: block;
  22.   padding-right: 50px;
  23. }
  25. .triple-menu-box .menu-label-title span:nth-child(2),
  26. .triple-menu-box .menu-label-title span:nth-child(3) {
  27.   display: block;
  28.   width: 16px;
  29.   border-bottom: solid 1px #c0c0c0;
  30.   position: absolute;
  31.   top: 50%;
  32.   right: 25px;
  33.   transform: translateY(-50%);
  34.   -webkit-transform: translateY(-50%);
  35.   -ms-transform: translateY(-50%);
  36. }
  38. .triple-menu-box .menu-label-title span:nth-child(2) {
  39.   transform: rotate(45deg);
  40.   right: 36px;
  41. }
  43. .triple-menu-box .menu-label-title span:nth-child(3) {
  44.   transform: rotate(-45deg);
  45. }
  47. .triple-menu-box .menu-text {
  48.   display: none;
  49.   padding: 20px 0;
  50.   margin: 0 25px;
  51.   border-top: dotted 1px #c0c0c0;
  52. }
  54. /* 折り畳みメニューを追加する場合 */
  55. .triple-menu-box .menus-box #triple-check-box,
  56. .triple-menu-box .menus-box #triple-check-box2,
  57. .triple-menu-box .menus-box #triple-check-box3 {
  58.   display: none;
  59. }
  61. .triple-menu-box .menus-box #triple-check-box:checked ~ .menu-text,
  62. .triple-menu-box .menus-box #triple-check-box2:checked ~ .menu-text,
  63. .triple-menu-box .menus-box #triple-check-box3:checked ~ .menu-text {
  64.   display: block;
  65. }
  67. .triple-menu-box .menus-box #triple-check-box:checked ~ .menu-label-title span:nth-child(2),
  68. .triple-menu-box .menus-box #triple-check-box2:checked ~ .menu-label-title span:nth-child(2),
  69. .triple-menu-box .menus-box #triple-check-box3:checked ~ .menu-label-title span:nth-child(2) {
  70.   transform: rotate(-45deg);
  71. }
  73. .triple-menu-box .menus-box #triple-check-box:checked ~ .menu-label-title span:nth-child(3),
  74. .triple-menu-box .menus-box #triple-check-box2:checked ~ .menu-label-title span:nth-child(3),
  75. .triple-menu-box .menus-box #triple-check-box3:checked ~ .menu-label-title span:nth-child(3) {
  76.   transform: rotate(45deg);
  77. }
  78. /* ここまで */

【3段以上用】アコーディオン（折りたたみメニュー）を4段以上利用する場合

sample
A.テキスト
A.テキスト
A.テキスト
A.テキスト
HTML
Copy
  1. <div class="menus-box">
  2.   <input id="triple-check-box" type="checkbox">
  3.   <label class="menu-label-title" for="triple-check-box">
  4.     <span class="menu-title">Q.クリック</span>
  5.     <span></span>
  6.     <span></span>
  7.   </label><!-- .menu-label-title -->
  8.   <div class="menu-text">A.テキスト</div>
  9. </div><!-- .menus-box -->

上記のコードを必要な数29行目の「 折り畳みメニューを追加する場合はこの下に追加 」の直下に貼り付け。
貼り付けた部分のid="triple-check-box"とfor="triple-check-box"のtriple-check-boxを固有値に変更する。

sampleの例だと下記のようになります。

HTML
Copy
  1. <div class="triple-menu-box">
  2.   <div class="menus-box">
  3.     <input id="triple-check-box" type="checkbox">
  4.     <label class="menu-label-title" for="triple-check-box">
  5.       <span class="menu-title">Q.クリック</span>
  6.       <span></span>
  7.       <span></span>
  8.     </label><!-- .menu-label-title -->
  9.     <div class="menu-text">A.テキスト</div>
  10.   </div><!-- .menus-box -->
  11.   <div class="menus-box">
  12.     <input id="triple-check-box2" type="checkbox">
  13.     <label class="menu-label-title" for="triple-check-box2">
  14.       <span class="menu-title">Q.クリック</span>
  15.       <span></span>
  16.       <span></span>
  17.     </label><!-- .menu-label-title -->
  18.     <div class="menu-text">A.テキスト</div>
  19.   </div><!-- .menus-box -->
  20.   <div class="menus-box">
  21.     <input id="triple-check-box3" type="checkbox">
  22.     <label class="menu-label-title" for="triple-check-box3">
  23.       <span class="menu-title">Q.クリック</span>
  24.       <span></span>
  25.       <span></span>
  26.     </label><!-- .menu-label-title -->
  27.     <div class="menu-text">A.テキスト</div>
  28.   </div><!-- .menus-box -->
  29.   <!-- 折り畳みメニューを追加する場合はこの下に追加 -->
  30.   <div class="menus-box">
  31.     <input id="triple-check-box4" type="checkbox">
  32.     <label class="menu-label-title" for="triple-check-box4">
  33.       <span class="menu-title">Q.クリック</span>
  34.       <span></span>
  35.       <span></span>
  36.     </label><!-- .menu-label-title -->
  37.     <div class="menu-text">A.テキスト</div>
  38.   </div><!-- .menus-box -->
  39. </div><!-- .triple-menu-box -->

最後に、CSSの54行目「/* 折り畳みメニューを追加する場合 */」から
78行目「/* ここまで */」のセレクタを変更。

今回のサンプルの例だと下記のようになります。(1～53行目は省略)

CSS
Copy
  1. /* 折り畳みメニューを追加する場合 */
  2. .triple-menu-box .menus-box #triple-check-box,
  3. .triple-menu-box .menus-box #triple-check-box2,
  4. .triple-menu-box .menus-box #triple-check-box3,
  5. .triple-menu-box .menus-box #triple-check-box4 {
  6.   display: none;
  7. }
  9. .triple-menu-box .menus-box #triple-check-box:checked ~ .menu-text,
  10. .triple-menu-box .menus-box #triple-check-box2:checked ~ .menu-text,
  11. .triple-menu-box .menus-box #triple-check-box3:checked ~ .menu-text,
  12. .triple-menu-box .menus-box #triple-check-box4:checked ~ .menu-text {
  13.   display: block;
  14. }
  16. .triple-menu-box .menus-box #triple-check-box:checked ~ .menu-label-title span:nth-child(2),
  17. .triple-menu-box .menus-box #triple-check-box2:checked ~ .menu-label-title span:nth-child(2),
  18. .triple-menu-box .menus-box #triple-check-box3:checked ~ .menu-label-title span:nth-child(2),
  19. .triple-menu-box .menus-box #triple-check-box4:checked ~ .menu-label-title span:nth-child(2) {
  20.   transform: rotate(-45deg);
  21. }
  23. .triple-menu-box .menus-box #triple-check-box:checked ~ .menu-label-title span:nth-child(3),
  24. .triple-menu-box .menus-box #triple-check-box2:checked ~ .menu-label-title span:nth-child(3),
  25. .triple-menu-box .menus-box #triple-check-box3:checked ~ .menu-label-title span:nth-child(3),
  26. .triple-menu-box .menus-box #triple-check-box4:checked ~ .menu-label-title span:nth-child(3) {
  27.   transform: rotate(45deg);
  28. }
  29. /* ここまで */

ボタンを「＋」と「－」に変更する方法

sample
A.テキスト
HTML
Copy
  1. <div class="menu-box">
  2.   <input id="check-box" type="checkbox">
  3.   <label class="menu-label-title" for="check-box">
  4.     <span class="menu-title">Q.クリック</span>
  5.     <span></span>
  6.     <span></span>
  7.   </label><!-- .menu-label-title -->
  8.   <div class="menu-text">A.テキスト</div>
  9. </div><!-- .menu-box -->
CSS
Copy
  1. .menu-box {
  2.   border: solid 1px #c0c0c0;
  3. }
  5. .menu-box .menu-label-title {
  6.   display: block;
  7.   padding: 20px 25px;
  8.   cursor: pointer;
  9.   position: relative;
  10. }
  12. .menu-box .menu-title {
  13.   display: block;
  14.   padding-right: 50px;
  15. }
  17. .menu-box .menu-label-title span:nth-child(2),
  18. .menu-box .menu-label-title span:nth-child(3) {
  19.   display: block;
  20.   width: 16px;
  21.   border-bottom: solid 1px #c0c0c0;
  22.   position: absolute;
  23.   top: 50%;
  24.   right: 25px;
  25.   transform: translateY(-50%);
  26.   -webkit-transform: translateY(-50%);
  27.   -ms-transform: translateY(-50%);
  28. }
  30. .menu-box .menu-label-title span:nth-child(2) {
  31.   transform: rotate(45deg);
  32.   right: 36px;
  33. }
  35. .menu-box .menu-label-title span:nth-child(3) {
  36.   transform: rotate(-45deg);
  37. }
  39. .menu-box .menu-text {
  40.   display: none;
  41.   padding: 20px 0;
  42.   margin: 0 25px;
  43.   border-top: dotted 1px #c0c0c0;
  44. }
  46. /* 折り畳みメニューを追加する場合 */
  47. .menu-box #check-box {
  48.   display: none;
  49. }
  51. .menu-box #check-box:checked ~ .menu-text {
  52.   display: block;
  53. }
  55. .menu-box #check-box:checked ~ .menu-label-title span:nth-child(2) {
  56.   transform: rotate(-45deg);
  57. }
  59. .menu-box #check-box:checked ~ .menu-label-title span:nth-child(3) {
  60.   transform: rotate(45deg);
  61. }
  62. /* ここまで */

上記のCSSの
30～33行目
35～37行目
55～57行目
59～61行目の4箇所を下記のように変更。

CSS
Copy
  1. .menu-box .menu-label-title span:nth-child(2) {
  2.   transform: rotate(90deg) !important;
  3.   right: 25px !important;
  4. }
  6. .menu-box .menu-label-title span:nth-child(3) {
  7.   transform: rotate(0deg) !important;
  8. }
  10. .menu-box #check-box:checked ~ .menu-label-title span:nth-child(2) {
  11.   display: none;
  12. }
  14. .menu-box #check-box:checked ~ .menu-label-title span:nth-child(3) {
  15.   transform: rotate(0deg);
  16. }

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

アイコン画像

もみじ

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

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

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

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

もくじ【サンプル】HTMLのみでアコーディオンメニューを実装【実装コード】HTMLのみでアコーディオンメニューを実装detailsタグとsummaryタグにCSS当ててデザインを調整【サンプル】CSS ...

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

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

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

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

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

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

-Webデザイン
-,