何もいじってないのに、表示崩れを起こすのはどうして？

締切済

質問者：jamfruits
質問日時：2020/04/21 19:40
回答数：2件

会社サイト内の商品紹介ページの編集を任されています。
私がいる部署は全員web周り素人ですが、中でも私が以前プログラミングの学校に行っていたというのが理由で、素人の私に任されました。

本日修正依頼があったので、ソースコードを直していたのですが、該当箇所以外のところをいじっていないにも関わらず、表示崩れを起こすのはなぜでしょうか？

ページには、5つほどタブ(商品一覧、商品詳細、金額一覧表、PR動画、その他使用例を描いたイラストなど)があり、修正依頼があったのは次の2つです。
①2つ目のタブ内の商品紹介文の修正
②3つ目のタブ内に、アコーディオン表示をしている個所があり、それを丸々削除する

このうち、①だけなら問題ありませんが、②をやると、3つ目のタブ以降の内容も消えてしまうんです。
ソースコードをくまなく見て、絶対に該当箇所以外触ってないのに、何度やり直しても②をやると他のタブに表示される内容が消えます。

②をやる際、該当と思われる範囲には、下記のように無数の<div>と</div>があります。
<div class=accordion~~>
<div --><div AA>
<div BB></div BB>
<div CC>

<div DD>

</div>
</div>
</div>

<div>と</div>はペアであることから、1つずつ数えて、余ったdivのみ削除すればいいのではなど考え、初めは一つずつ数えてましたが、表示が見づらく、結局正確にわかってません。

なぜ、修正箇所以降のページに影響が出てしまうんでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： yumeiroyamaneko
回答日時：2020/04/22 09:15

実際のページのソースを参考にしてみたことはありますか？

そういう矛盾がないように工夫されていたりもするんですけど。

*****（注：SHARPのページの一部）*************************
<body class="articleContents" id="top1">

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KV79VG" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-KV79VG');</script>


　<div class="page">
　 
　　<header class="l-header">
　　 <div class="header u-clear">
　　　<div class="header_title">
　　　 <h1 class="header_title_logo">
　　　　 <div class="pc">
　　　　　<a href="https://jp.sharp/"><img src="../common/images/logo_pc.png" width="278" height="62" alt="SHARP"></a>
　　　　 </div>
　　　　　<div class="sp">
　　　　　 <a href="https://jp.sharp/"><img src="../common/images/logo_sp.png" width="164" height="23" alt="SHARP"></a>
　　　　　</div>
　　　 </h1>
　　　</div>
　　 <div class="header_utility Common-Margin">
　　　<span class="word_block">株式会社SHARP</span> <span class="word_block">COCORO LIFE</span>
　　 </div>
　　</div>
　 </header>
*****（注：投稿時の表示のずれを防ぐために一部半角空白を全角空白に入れ替えています）*****

僕の元カノもプログラムをやっていましたが，最初にExcel方眼を作って，それからプログラムを書いて，最後にテキストをコピペしていたのかCSV出力後「,」を置換で抜いていたのかわかりませんが，タグ同士がちゃんとそろっていることを確認する工夫をしていました（僕はそっちの世界の住人ではないので詳しいことはわかりません。ほんのちょっと話をしただけです）。

参考になりそうなWEBページを見つけて，Google chrome であれば右クリックで「ページのソースを表示(V)　Ctrl+U」（右クリなしでCtrl+Uでも可）でソースを見て，そういうものを参考にしてみるといいのかもしれません。

- 0
- 件

通報する

No.1

回答者： t_fumiaki
回答日時：2020/04/21 19:54

<div>と</div>の入れ子が合って無いのでしょ？

<div --><div AA>の部分の記載が怪しいんだけど、チャント正確に書いてます？
適～きと～、に書いて質問されても困る。

- 0
- 件

通報する

この回答へのお礼

すみません、「例」と入れ忘れたのですが、適当に書いてます。
要は、該当部分と思われる個所に、たくさん<div>から始まる記述があるので、対になりそうな</div>の数を数えてましたということが言いたかったんです。
原因は、やっぱり<div>で余計なものまで削除しているからでしょうか。
コメントアウトで解決できないかと「」で囲んでみたりもしましたが、意味がなかったです。

いくら学んでも、ちっとも身につきません。小学生ですら、短時間でアプリ作れる子とかいるのに…

通報する

お礼日時：2020/04/21 20:21

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！