Q&A
CodePen を確認しましたが、表示崩れは確認できませんでした。アコーディオン内に画像が3つ縦に並んでいます。
もしかすると、UUTUMさんと私との「正しい表示」の認識が違うのかもしれません。もう少し「表示崩れ」について詳しく書いていただければ、何かわかることがあるかもしれませんね。
アコーディオンの実装を考えてます。
カラム分けは、bootstrapを利用して実装しようと考えております。
前回、質問させて頂いた際、問題は解決したように思えたのですが、
bootstrapを利用した所、アコーディオンに表示くずれが起きてしまい。
うまく実装できませんでした。
追加
codepenのcssとhtmlを再度反映した所、やはりbootstrapを使用した箇所の画像の要素が
◾️codepen（問題のソース）
https://codepen.io/UUTUM/pen/JjdmYBO?editors=1100
◾️wordpress環境
http://uutumworks.tokyo/
更新情報
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
・bootstrapを追加
・サンプル画像を追加
・wordpressの本番環境のURLを追記致しました。
▼divタグのみの場合は表示くずれが起きずに、うまくアコーディオン内に実装出来る
HTML
1<div></div>
▼divにクラスを指定する。(bootstrap)
HTML
1<div class="col-lg-4"></div>
問題点1
なぜ、divにbootstrapの要素を付与した際、表示崩れが起きてしまうのでしょうか？
アコーディオンにbootstrapを利用することは難しいですか？
可能であれば利用してアコーディオンを実装したいのです。
(他ページも全てbootstrapを使用してレイアウトを組んでいるので)
問題点２
他に解決方法があれば、教えてくださいませ
（レスポンシブサイトを考えております。）
お手数ですが、内容ご確認の上、ご教示いただけましたら幸いです。
何卒よろしくお願いいたします。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
◾️過去の質問
アコーディオン内にdiv要素を格納し、２カラムで表示したい(初心者)
https://teratail.com/questions/248997
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Lhankor_Mhyさま
お世話になっております！
codepen上は画像が無いのでうまくいっているのですが、実際に実装すると
上記、説明エリアに貼り付けた画像のような状態になります。
・アコーディオン2つ目が縦に広くなる*。
(1つ目のアコーディオン内の画像が要素からはみ出て影響しているようです(上記画像参照)。)
・アコーディオン2つ目が開かなくなる。
画像はモック画像で試しましたが、そのような問題は起きませんでした。
コードを拝見するかぎり、CodePenのコードにはBootstrap環境が再現されていないように見えました。そこが問題なのでは？
Lhankor_Mhyさま
ご指摘頂きありがとうございました。
codepenにもテスト画像/bootstrapの環境を取り入れ反映致しました。
ただ、やはり本番環境だと追加画像のような表示崩れが起きます。
とすると、本番環境の問題となります。
いずれにせよ、問題が再現できなければ、有効な回答を得ることはできないでしょう。
その問題が起きているページをご提示いただくことはできないのですか？
wordpressのテスト用に使用しているurlを追記致しました。
新たにこの環境で、codepenと同様のhtmlとcssを流しこみましたが
同じように表示崩れが起きました。
◾️wordpress環境
http://uutumworks.tokyo/
お手数ですが、ご確認いただけますと幸いです。
何卒よろしくお願い致します。
回答2件
0
ベストアンサー
Codepenなどで画像を表示させるには、ダミー画像を使うといいですよ。下記で簡単に作成できます。
呈示のCodepenに上記のダミー画像とbootstrapを追加してみましたが、特にレイアウトが崩れているとは感じませんでしたが、下記のサンプルでどのへんが想定と異なるのでしょうか。
http://uutumworks.tokyo/ を見て検証ツールで弄ってみました。
検証ツールでは下記の１行を追加するとうまくいくようです。
試してみください。
css
1ul li input[type=checkbox]:checked ~ div { 2 margin-top: 0; 3 max-height: 0; 4 opacity: 0; 5 -webkit-transform: translate(0, 50%); 6 -ms-transform: translate(0, 50%); 7 transform: translate(0, 50%); 8 display: none; /* 追加 または overflow: hidden; */ 9}
とりあえずは上記の修正でうまくいくと思いますが、
Codepenのサンプルと、本番のサイトのbootstapのCSSを見てみると微妙に違うようです。
Codepenのはbootstrap 4 ですが、サイトに埋め込んであるのは Bootstrap 3 のようです。
試しに、Codepenも Bootstrap 3 に変更してみると同様の症状が出ました。
可能なら、サイトのBootstrap も 4 に変更するといいと思います。
投稿2020/04/01 04:08
編集2020/04/01 13:17
総合スコア34075
codepenの使用方法をお教え頂きありがとうございます。
勉強になりました！
また、ご丁寧にサンプル画像の追加までして頂き本当にありがとうございます。
codepen上だと、全く問題ないようです.....
これをベースに再度wordpress上に反映してみたいと思います。
wordpress上だと、説明エリアに貼り付けた画像みたいになってしまいます。
お手数ですが、引き続き何卒よろしくお願いいたします。
反映してみた所、やはり本番環境だと表示くずれが起きました。
アコーディオンにbootstrapを追加した場合、その下のアコーディオンの縦幅が広くなり
開閉ボタンを押しても反応しなくなる現象が起きています。
画像を追加致しました。
Codepenでは問題がなくて、wordpress上では症状がでるということは、提示の部分のCSSではなく、wordpressのテーマ自体のCSSが影響しているということです。
ブラウザの検証ツールで提示のCSS以外の設定がないか、あればその設定をキャンセルするか修正してみて原因を追究してみてください(検証ツールからCSSの設定を変更できます)。
検証ツール（デベロッパーモード）の使い方
https://prog-8.com/docs/html-dev
hatena19さま
ご連絡ありがとうございます。
検証ツールで色々いじってみましたが、checkboxをぽちぽちと消し続けました。
しかし、それにより解決することはなく自分では対処することができませんでした。
唯一大きく変化があったのは、ul li のbox-sizingという項目のチェックを外したときに動きがありました。表示は崩れたままですが...
◾️wordpress環境のURL
http://uutumworks.tokyo/
お時間いただけましたらご確認いただき問題点などご教示いただけますと幸いです。
ご迷惑をおかけいたしますが何卒よろしくお願いいたします。
回答に修正コードを追記しましたので、試してみてください。
hatena19さま
今回、色々と手取り足取りわかりやすくお教え頂きありがとうございました！
記述頂いたコードを追加することでアコーディオンは崩れることなく表示されるようになりました。
アコーディオンの実装に関しては、何ヶ月も悩んでいた問題だったので解決してとてもとても嬉しいです！！
bootstrap 4.4.1に設定した所、サイトの表示が大きく変わり(文字が全て小さくなる/レイアウトが大きく変わり崩れるなどの問題)その変更対応がとても大変そうなので、一旦はcssの書き換えのみで対応したいと思います。
この問題も別途今後の課題として取り組みたいと考えています。
今回の問題ですが、
・codepenとwordpress(本番環境)のバージョンが違う為、異なった結果になっていた。(私の人為的ミス/誤った情報をお伝えし混乱させてしまい申し訳ございません。)
・bootstrap3.3.7は未成熟の為、div.col-xx-xなどのbootstrapの記述がきちんとdivタグとして認識されない。（バグという認識/最新版に変更すれば問題は起きない）
ということにより起きた問題と考えてよろしいでしょうか？
0
view-source:http://uutumworks.tokyo/
ソース（ブラウザで「ページのソースを表示」）を見ると<i></i></p>という閉じタグだけが混入しているので、どこにどのように入力したのかはわかりませんが、それを修正してみてはいかがでしょう。
投稿2020/04/01 08:19
総合スコア69606
<i></i></p>という閉じタグだけが混入しているのを修正とのことですが、
具体的にどのように修正すればよいでしょうか？
お手数ですがお教えいただけますと幸いです。
以下が、htmlのコードになります。
何卒よろしくお願いいたします。
```html
<div class="container">
<div class="row">
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2 class="accordion">Q:質問1(divにクラス(bootstrap)を利用せずに実装した場合)</h2>
<p class="accordion">
テキストはダミーです。テキストはダミーです。
</p>
<div>
<img class="pc accordion" src="https://placehold.jp/300x300.png" width="300px" height="300px" alt="パソコン用の画像" />
</div>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2 class="accordion">Q:質問2Q:質問1(divにクラス(bootstrap/col-lg-4)をして実装した場合)</h2>
<p class="accordion">テキストはダミーです。テキストはダミーです。</p>
<div class="row">
<div class="col-lg-4">
<img class="pc accordion" src="https://placehold.jp/300x300.png" width="300px" height="300px" alt="パソコン用の画像" />
</div>
<div class="col-lg-4">
<img class="pc accordion" src="https://placehold.jp/300x300.png" width="300px" height="300px" alt="パソコン用の画像" />
</div>
<div class="col-lg-4">
<img class="pc accordion" src="https://placehold.jp/300x300.png" width="300px" height="300px" alt="パソコン用の画像" />
</div>
</div>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2 class="accordion">Q:質問3(質問2と同様の作りですが、質問2が干渉して表示崩れが起きます＊。)<br>
(※)codepenでは画像を挿入できないようなので、再現はできていませんが、アコーディオンのheightが高くなります。
googleのデベロッパーツールで確認するとどうやら、div要素の画像が要素をはみ出てその分の高さが質問3の要素に影響を与えているようです。</h2>
<p class="accordion">テキストはダミーです。テキストはダミーです。 </p>
<div class="row">
<div class="col-lg-4">
<img class="pc accordion" src="/images/test_pc-01.jpg" width="300px" height="300px" alt="パソコン用の画像"/>
</div>
<div class="col-lg-4">
<img class="pc accordion" src="/images/test_pc-01.jpg" width="300px" height="300px" alt="パソコン用の画像"/>
</div>
<div class="col-lg-4">
<img class="pc accordion" src="/images/test_pc-01.jpg" width="300px" height="300px" alt="パソコン用の画像"/>
</div>
</div>
</li>
</ul>
</div>
</div>
```
HTMLの書き方で変わるとかそういう話ではありません。どこにどのように入力したのかはわかりませんので、入力箇所を特定して修正してください。
kei344さま
>HTMLの書き方で変わるとかそういう話ではありません。どこにどのように入力したのかはわかりませんので、入力箇所を特定して修正してください。
これはなにをどこに入力したということでしょうか？そして、なんの入力箇所を特定すればいいのでしょうか？
今回この問題は解決しましたが、後学の為もう少し具体的にお教えいただけましたら幸いです。
お手数ですが何卒よろしくお願いいたします。
> これはなにをどこに入力したということでしょうか？
テーマに書いたのか、カスタムフィールドに入れたのか、投稿エリアかわかりませんが、どこかに当該HTML（閉じタグが混入したHTML）を入力しないと出力されないのはわかりますか？
それを入力したテキストエリアが、Gutenbergか旧ビジュアルエディタか単純なテキストエリアかテーマエディタかわかりませんが、そこに閉じタグが混入している可能性があるので、確認したほうが良いというコメントです。
ブラウザで「ページのソースを表示」で表示されるHTMLは、サーバ側でWordPressが生成したHTMLです。ということは「不要な閉じタグ」もサーバ側で付いたことになります。
keiさま
ご丁寧にご説明頂きありがとうございます。
読んでいてなんとなく理解したのですが以下の理解であってますでしょうか？
(1)<i></i></p>の閉じタグが変な所についているみたいだから
それを削除してあげれば表示が綺麗になるかもしれないよ。
(2)そしてその閉じタグはどの作業工程でつくのかわからないよ。
ということですかね？
> (1)
大体あっていますが、HTMLの文法が間違っている状態なので、是正するのは当然かとおもいます。
（今表示が崩れなくても他の崩れの原因になり得るため）
> (2)
UUTUMさんが入力箇所を提示していないので、回答者にはわからないだけです。
別のコメントに対して言うのもなんですが、「bootstrap3.3.7は未成熟」とか言わない。bootstrap3とbootstrap4で書き方が変わっているのをUUTUMさんが知らないだけです。
kei344さま
ご返信ありがとうございます！
(1)こちらに関しては、修正方法がわからない為、今後の課題として把握しておきます。
ご指摘頂きありがとうございます
(2)入力箇所を提示することができるということですか？
先ほどの内容だと入力箇所を提示するというのは、wordpressの管理権限(ID/PASS)を
提示するということになりますよね？ビジュアルエディタとかが勝手に閉じタグを生成している
可能性もある為
bootstrap3.3.7が未成熟と記載している件に関してですが、
今回の問題は3.3.7がdiv.col-xx-xxをdivタグとして認識してくれなかった所から発生した問題だと
思うんですが、それでも未成熟という表現は誤りですかね？
私レベルの初心者が同じような悩みをもった場合の参考になる為に今回の問題の反省点をまとめたいと思っているので可能であれば知りたいです。
色々と聞いてしまい申し訳ないです。
もし可能であればお答えいただけますと幸いです。
それを持って今回の問題をまとめて記述していければと思います。
> 、wordpressの管理権限(ID/PASS)を
提示するということになりますよね
なりません。
> それでも未成熟という表現は誤りですかね？
誤りです。
書き方が変わることを「成熟」とは言いません。
これにて当質問にてコメントを返すのを終了します。コメントされると通知が来るので、コメントも不要です。
あなたの回答
tips
プレビュー
