質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.38%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

12085閲覧

多階層のアコーディオンメニューを作成したい。

sktwmg8888

総合スコア4

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/10/23 05:23

前提・実現したいこと

下記の画像の通り、アコーディオンメニューの2階層を実現させたいです。
リンクの前に付いている、動く「∨」マークを表示させたいです。

これを実行させるにはどうしたらよろしいでしょうか?
HTML・CSSが分かりません。

イメージ説明

HTML

<div class="cp_side"> <label for="cp_side_bar1">メニュー1</label> <input type="checkbox" name="checkbox" id="cp_side_bar1" class="accordion" /> <ul id="link1"> <li><a href="">リンク1</a></li> <li><a href="">リンク1-1</a></li> <li><a href="">リンク1-2</a></li> <li><a href="">リンク2</a></li> <li><a href="">リンク3</a></li> </ul> <label for="cp_side_bar2">メニュー2</label> <input type="checkbox" name="checkbox" id="cp_side_bar2" class="accordion" /> <ul id="link2"> <li><a href="">リンク1</a></li> <li><a href="">リンク2</a></li> <li><a href="">リンク3</a></li> </ul> <label for="cp_side_bar3">メニュー3</label> <input type="checkbox" name="checkbox" id="cp_side_bar3" class="accordion" /> <ul id="link3"> <li><a href="">リンク1</a></li> <li><a href="">リンク2</a></li> <li><a href="">リンク3</a></li> </ul> </div>

CSS

/* サイドメニュー--------------------------------------- */ .cp_side { max-width: 360px; margin: 0 auto; padding: 0; } .cp_side a { display: block; padding: 10px; text-decoration: none; color: #000000; line-height: 1; padding-left: 20px; } .cp_side label { display: block; position: relative; margin: 0 0 2px 0; padding: 12px; line-height: 1; color: #ffffff; background: #1b2538; cursor: pointer; } .cp_side label::before { position: absolute; content: '▼'; color: #ffffff; right: 0.5em; top: 25%; } .cp_side input { display: none; } .cp_side ul { margin: 0; padding: 0; background: #f4f4f4; list-style: none; } .cp_side li { overflow-y: hidden; max-height: 0; transition: all 0.5s; } /*リストが増えたらULごとに追加してください*/ #cp_side_bar1:checked ~ #link1 li, #cp_side_bar2:checked ~ #link2 li, #cp_side_bar3:checked ~ #link3 li{ max-height: 46px; opacity: 1; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

教えていただいたリンクのコード通りに行ったところ、アコーディオンメニューは表示されました。

現在、起きている問題

CSSで装飾したところ、
下記画像の左は、アコーディオンメニューの ▼ が全て開けるのですが、
“ブラ&ショーツセット▼” “レッグウェア▼” の二つは、バックカラーをグレーにしたいのでCSSを編集したところ、
下記画像の右は、アコーディオンメニューの“ブラ&ショーツセット▼” “レッグウェア▼” のみ開けなくなりました。

どの様にコードを編集すれば、全てのアコーディオンメニューが開けるようになるでしょうか?

イメージ説明

左の画像HTML(全ての▼が開く)

<!--アコーディオンメニュー部分 start--> <nav class="accordion"> <!--2階層アコーディオン start--> <label for="menu2">カテゴリから探す▼</label> <input type="checkbox" id="menu2" class="toggle" /> <ul> <label for="menu2_1">ブラ&ショーツセット ▼</label> <input type="checkbox" id="menu2_1" class="toggle" /> <ul> <li><a href="#">全商品(ブラ&ショーツセット)</a></li> <li><a href="#">ブラ&ショーツ</a></li> <li><a href="#">ブラ&ショーツ&ガーターベルト</a></li> </ul> <li><a href="#">ベビードール・スリップ</a></li> <li><a href="#">テディ</a></li> <li><a href="#">ボディストッキング</a></li> <li><a href="#">ガウン・ローブ</a></li> <li><a href="#">セクシーコスチューム</a></li> <li><a href="#">SMランジェリー</a></li> <li><a href="#">ルームウェア</a></li> <label for="menu2_2">レッグウェア ▼</label> <input type="checkbox" id="menu2_2" class="toggle" /> <ul> <li><a href="#">全商品(レッグウェア)</a></li> <li><a href="#">ガーターストッキング</a></li> <li><a href="#">ストッキング・タイツ・レギンス</a></li> <li><a href="#">ショートストッキング</a></li> </ul> </ul> <!--2階層アコーディオン end--> <!--1階層アコーディオン start--> <label for="menu1">カラーから探す ▼</label> <input type="checkbox" id="menu1" class="toggle" /> <ul> <li><a href="#">menu1.1</a></li> <li><a href="#">menu1.1</a></li> </ul> <!--1階層アコーディオン end--> <!--1階層アコーディオン start--> <label for="menu3">サイズから探す ▼</label> <input type="checkbox" id="menu3" class="toggle" /> <ul> <li><a href="#">menu1.1</a></li> <li><a href="#">menu1.1</a></li> </ul> <!--1階層アコーディオン end--> </nav> <!--アコーディオンメニュー部分 end--> </body>

左の画像CSS(全ての▼が開く)

margin: 0; padding: 0; background: #f4f4f4; list-style: none; } .accordion a { display: block; padding: 10px; text-decoration: none; color: #000000; line-height: 1; padding-left: 20px; } .accordion label{ display: block; position: relative; margin: 0 0 2px 0; padding: 12px; line-height: 1; color: #ffffff; background: #1b2538; cursor: pointer; } .toggle{ display: none; } .toggle + ul{ max-height: 0; overflow: hidden; transition: all .5s ease; } .toggle:checked + ul{ max-height: 500px; transition: all 2s ease-in; }

右の画像HTML(“ブラ&ショーツセット▼” “レッグウェア▼” のみ開けない)

<label for="menu2_1">ブラ&ショーツセット ▼</label>

↓下記に変更
<span for="menu2_1">ブラ&ショーツセット ▼</span>

<label for="menu2_2">レッグウェア ▼</label>

↓下記に変更
<span for="menu2_2">レッグウェア ▼</span>

span に変更しないと、“ブラ&ショーツセット▼” “レッグウェア▼” の部分のバックカラーが黒くなってしまう為、変更した。

<body> <!--アコーディオンメニュー部分 start--> <nav class="accordion"> <!--2階層アコーディオン start--> <label for="menu2">カテゴリから探す▼</label> <input type="checkbox" id="menu2" class="toggle" /> <ul> <span for="menu2_1">ブラ&ショーツセット ▼</span> <input type="checkbox" id="menu2_1" class="toggle" /> <ul> <li><a href="#">全商品(ブラ&ショーツセット)</a></li> <li><a href="#">ブラ&ショーツ</a></li> <li><a href="#">ブラ&ショーツ&ガーターベルト</a></li> </ul> <li><a href="#">ベビードール・スリップ</a></li> <li><a href="#">テディ</a></li> <li><a href="#">ボディストッキング</a></li> <li><a href="#">ガウン・ローブ</a></li> <li><a href="#">セクシーコスチューム</a></li> <li><a href="#">SMランジェリー</a></li> <li><a href="#">ルームウェア</a></li> <span for="menu2_2">レッグウェア ▼</span> <input type="checkbox" id="menu2_2" class="toggle" /> <ul> <li><a href="#">全商品(レッグウェア)</a></li> <li><a href="#">ガーターストッキング</a></li> <li><a href="#">ストッキング・タイツ・レギンス</a></li> <li><a href="#">ショートストッキング</a></li> </ul> </ul> <!--2階層アコーディオン end--> <!--1階層アコーディオン start--> <label for="menu1">カラーから探す ▼</label> <input type="checkbox" id="menu1" class="toggle" /> <ul> <li><a href="#">menu1.1</a></li> <li><a href="#">menu1.1</a></li> </ul> <!--1階層アコーディオン end--> <!--1階層アコーディオン start--> <label for="menu3">サイズから探す ▼</label> <input type="checkbox" id="menu3" class="toggle" /> <ul> <li><a href="#">menu1.1</a></li> <li><a href="#">menu1.1</a></li> </ul> <!--1階層アコーディオン end--> </nav> <!--アコーディオンメニュー部分 end--> </body>

右の画像CSS(“ブラ&ショーツセット▼” “レッグウェア▼” のみ開けない)

CSSは、上記の左の画像のCSSと同じ

投稿2021/10/23 12:04

sktwmg8888

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

「アコーディオンメニューの2階層」でググるといろいろ見つかると思います。
CSSだけで対応するなら、4番目にあったこれとかはどうですか。

【Simple】CSSのみ アコーディオン | Kinchan's Blog

投稿2021/10/23 05:45

Lhankor_Mhy

総合スコア36852

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sktwmg8888

2021/10/23 12:09

ご回答、ありがとうございます。 教えていただいたリンクの通りに行ってみたところ、実行したいようにアコーディオンメニューは表示できましたが、CSSで装飾したら思うように表示されませんでした。 自己解決に詳細を書いたので、原因をご教示いただけないでしょうか? 何度も聞いてしまい、申し訳ございません。 お手数おかけ致しますが、宜しくお願い致します。
Lhankor_Mhy

2021/10/25 06:44

label を span に変更しているのが原因ではないかと思います。 デザインの変更はCSSで対応する方がいいでしょう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.38%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問