前提・実現したいこと
※プログラミング初心者です。
おちゃのこネットというカートシステムを使い、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%; } /* ----------------------------------------------- */
試したこと
何度もコードを入力して行ったが、やはり一番下の画像の様に表示されてしまう。
自分では原因が分かりません。
回答1件
あなたの回答
tips
プレビュー