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

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

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

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

Q&A

解決済

1回答

627閲覧

ECサイトの全ての商品ページに、アコーディオンメニューを表示させたい

sktwmg8888

総合スコア4

CSS3

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/10/17 15:29

前提・実現したいこと

※プログラミング初心者です。

おちゃのこネットというカートシステムを使い、ECサイトの作成をしています。
全ての商品ページに、アコーディオンメニューを表示させたいのですが、一つの商品ページにしか正しいデザインが表示されません。

因みに、各商品ページごとに、同じコードを入力しています。

恐らく、CSSの表記が全ページに対応になっていないのかも?です。

※プログラミングの初心者のため、コードはウェブからコピーしてきたものを編集して利用しました。

発生している問題・エラーメッセージ

一番上の画像が正しい表示だが、一番下の画像はアコーディオンメニューの右側(+)が表示されなく、文字のアンダーラインの幅同士が広く表示されてしまう。

■正しく表示されるページのアコーディオンメニュー(画像)↓
イメージ説明

■他の商品ページのアコーディオンメニュー(画像)↓
イメージ説明

HTML/JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script> </head> <input id="tab-five" type="checkbox" name="tabs"> <label for="tab-five">アイテム説明</label> <div class="cp_actab-content"> ★★ ★★ </div> </div> <div class="cp_actab"> <input id="tab-one" type="checkbox" name="tabs"> <label for="tab-one">商品概要</label> <div class="cp_actab-content"> <p> バックオープンのクロッチレスショーツ&レースのブラ<p> 情熱的でセクシーなこの魅惑的な2PCランジェリーセットは、フロントリボン・レースのストラップ付きブラレットと、解けるリボンのバックオープン・クロッチレスショーツの2PCランジェリーセットです。<p> ・フローラルレース生地<p> <table class="shousai"> <tr> <th>カラー</th><td>レッド</td> </tr> <tr> <th>ワイヤー</th><td>なし</td> <tr> <th>パッド</th><td>なし</td> <tr> <th>ホック</th><td>なし</td> <tr> <th>ボーン</th><td>なし</td> <tr> <th>透け感</th><td>全体的にあり</td> <tr> <th>収縮性</th><td>あり</td> <tr> <th>ストラップ</th><td>取り外し/不可、長さ調節/可能</td> </tr> </table> </p> </div> </div> <div class="cp_actab"> <input id="tab-two" type="checkbox" name="tabs"> <label for="tab-two">仕様</label> <div class="cp_actab-content"> <p>生地 & 生産国が入ります</p> </div> </div> <div class="cp_actab"> <input id="tab-three" type="checkbox" name="tabs"> <label for="tab-three">送料・お届け</label> <div class="cp_actab-content"> <p> ◆送料<br> 550円<br> 10,000円以上で送料無料<p> ◆お届け<br> お取り寄せ商品の為、2週間〜3週間でお届け<p> ◆配送業者<br> 佐川急便、ヤマト運輸<br> ※一部地域(沖縄、離島など)を除く<p> ◆日時指定<br> ご注文日の14日先〜30日先までお届け日をご指定いただけます</p> </div> </div> <div class="cp_actab"> <input id="tab-four" type="checkbox" name="tabs"> <label for="tab-four">返品・交換</label> <div class="cp_actab-content"> <p>返品・サイズ交換 不可<p> こちらの商品は、ショーツがセットの衛生商品の為、返品・サイズ交換できません。<p> ※未開封・未使用の場合でも、返品・サイズ交換・返金・他の商品への交換はできません。 </p> </div> </div>

CSS

/* 商品詳細ページ・アコーディオンメニュー ----------------- */ .cp_actab { position: relative; overflow: hidden; width: 100%; margin: 0 auto; color: #000000; } .cp_actab input { position: absolute; z-index: -1; opacity: 0; } .cp_actab label { font-weight: bold; line-height: 4; position: relative; display: block; padding: 0 0 0 1em; cursor: pointer; margin: 0 0 1px 0; background: #FFFFFF; border-bottom: solid 2px #dedede; } .cp_actab .cp_actab-content { overflow: hidden; max-height: 0; -webkit-transition: max-height 0.35s; transition: max-height 0.35s; color: #000000; background: #FFFFFF; } .cp_actab .cp_actab-content p { margin: 1em; } /* :checked */ .cp_actab input:checked ~ .cp_actab-content { max-height: 99999px; } /* Icon */ .cp_actab label::after { line-height: 3; position: absolute; top: 0; right: 0; display: block; width: 3em; height: 3em; -webkit-transition: all 0.35s; transition: all 0.35s; text-align: center; padding-top: 5px; } .cp_actab input[type=checkbox] + label::after { content: '+'; } .cp_actab input[type=checkbox]:checked + label::after { transform: rotate(315deg); } /* ----------------------------------------------- */ /* 商品詳細ページ・テーブル表 ----------------- */ table.shousai th{/*thに対して*/ color: #000000;/*文字色*/ background: #d3d3d3;/*背景色*/ border: 1px solid; border-color: #a9a9a9; overflow-x : auto width: 30%; padding : 10px; } table.shousai td{/*tdに対して*/ color: #000000;/*文字色*/ background: #ffffff;/*背景色*/ border: 1px solid; border-color: #a9a9a9; overflow-x : auto width: 70%; padding : 10px; } /*余白指定は省略*/ table.shousai{ width: 100%; } /* ----------------------------------------------- */

試したこと

何度もコードを入力して行ったが、やはり一番下の画像の様に表示されてしまう。
自分では原因が分かりません。

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

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

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

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

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

Lhankor_Mhy

2021/10/18 02:48

ご提示のコードを試してみましたが、+ は表示され、間隔が広くなることもありませんでした。 ご提示いただいていない部分に原因があると思われます。
sktwmg8888

2021/10/23 05:28

ご回答いただき、ありがとうございます。 使用しているカートシステムの運営側に確認したところ、別の原因が発覚し、解決できました。
Lhankor_Mhy

2021/10/23 05:35

ご解決されて何よりです。 自己解決の処理をお願いします。
guest

回答1

0

自己解決

カートシステムの運営側に報告したところ、原因は他にあり、解決しました。
HTML・CSSは、間違っていませんでした。

投稿2021/10/23 06:53

sktwmg8888

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.31%

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

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

質問する

関連した質問