【ECサイトの全ての商品ページに、アコーディオンメニューを表示させたい】
※プログラミング超初心者です※
おちゃのこネットというカートシステムを使い、ECサイトの作成をしています。
全ての商品ページに、アコーディオンメニューを表示させたいのですが、一つの商品ページだけにしか元のCSSデザインが正しく表示されていません。
●具体的に何が起きているか?
添付の画像の1番上の形式が正しいデザインだが、他のページにアコーディオンメニューのコードを入力すると、下の画像の様に表示されてしまう。
アコーディオンメニューの右側(+)が表示されなく、文字のアンダーラインの幅同士が広くなってしまう。
【コード情報(HTML・JavaScript・CSS)】
https://docs.google.com/document/d/e/2PACX-1vQ2H …
因みに、各商品ページごとに、同じコードを入力しています。
恐らく、CSSの表記が全ページに対応になっていないのかも?です。
※プログラミングの初心者のため、コードはネットからコピーしてきたものを編集して利用しました。
No.1ベストアンサー
- 回答日時:
こんばんは
ご提示のアコーディオン(=と呼ぶのかどうか疑問ですが)の仕組みは、CSSだけで実現できるようになっています。
ご質問の部分だけに関して言えば、javascriptは関係ありません。(無しで機能します)
>恐らく、CSSの表記が全ページに対応になっていないのかも?
他のページがどうなっているのか不明ですけれど、基本的に同じHTML構成(タグとクラスの構成)になっていれば、同じCSSで実現が可能なはずです。
ですので、ありそうな原因として考えられるのは、
・別のCSSで仕組みを妨げるような指定をしている。
・HTMLの構成(クラス名も含む)が、違う構成になっている。
あたりが怪しそうです。(他にもあるとは思いますが、一番ありそうな原因)
>因みに、各商品ページごとに、同じコードを入力しています
もしも、まったく同じCSSを適用しているのなら、HTMLを見直してみるのが宜しいかと。
一項目分の基本的な構成は以下のようになっています。
(必要な数だけ、これを繰り返せばよいはずです)
<div class="cp_actab">
_ <input id="tab-number" type="checkbox">
_ <label for="tab-number">メニューのタイトル</label>
_ <div class="cp_actab-content">
タイトルクリック時に表示される内容をDIV内に記す
_ </div>
</div>
※ ここの投稿欄ではインデントが無視されるため、「 _ 」で記していますのでご注意ください。
※ 各項目のid及びクラス名の「tab-number」部分は、対応させておく(=同じ名称)ことが必要です。
※ また、idはHTML内で個別である必要がありますので、項目ごとにnumber部分を変えるなどして、別名にしておくことが必要です。
上記の構成やルールがおかしくなっていることはありませんか?
(想像するところ↑が正しくないのが原因ではないかと‥)
なお、ご質問には関係ありませんけれど、現在作成中であるのなら、HTML5を採用することをお勧めしておきます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) パイソンでのプログラミングについて 3 2022/08/11 20:31
- PHP php 入力画面から確認表示画面へ情報の受け渡しについて。 1 2023/06/07 18:00
- PHP PHP MySql ページング 2 2022/09/20 06:38
- その他(買い物・ショッピング) JANコードの登録について 1 2022/07/23 14:19
- C言語・C++・C# プログラミングの問題です。至急教えてください。 /***から***/の部分をプログラミングにしてほし 1 2022/10/13 11:48
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
- Excel(エクセル) 【エクセルマクロ】既に開いているIEの、サイズや表示位置を変更するには 4 2022/12/01 22:57
- Excel(エクセル) excelで検索した商品の画像(ネットワーク上の)を表示させたい。 3 2023/06/28 00:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
goo は、放置?
-
htmlの文字が縦書きになる
-
WEBページを強制的に横画面で見...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
HTML電卓で1文字消す方法
-
HTMLですCSSです 画像のように...
-
テーブルタグのセルの幅の一部...
-
WEBサイト 画像の直接リンクに...
-
CSSについて教えてください。 ...
-
青い枠のみのHTML
-
HTMLです 店主のこだわりという...
-
HTMLです 四角みたいにして中に...
-
初心者html・CSS ウィンドウを...
-
12月のカレンダーを表すHTMLを...
-
pythonに自分で作ったHTMLを、...
-
HTMLです次の意味を持つ要素ま...
-
アコーディオンメニューが思う...
-
スマホ(android)のタッチパネ...
-
HTMLの CSSのファイルというの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
”固定”の反意語
-
ExcelVBA ウィンドウ枠の固定で...
-
エクセル横スクロール
-
指数表記の逆は?
-
WordPressの固定ページを複製す...
-
ページ内検索バーを固定したい。
-
土壁に穴を空けて てすりをつけ...
-
jimdoホームページ作成 全部の...
-
WordPressの編集方法 - Lightni...
-
フッターを固定して、常にどの...
-
FireFoxのアドオン scrpbookに...
-
office excelで ウィンドウ枠の...
-
フォートナイトゲーミングpcでf...
-
【ランダムバナー】各バナーご...
-
フレームを使わず、上を固定?
-
右クリックでポップアップメニ...
-
【Excel VBA】行×列1,列2,列3,...
-
Acrobat X で見開きページを分...
-
fc2ショッピングカート・プラグ...
-
WordPress 続きを読むのカスタ...
おすすめ情報