アコーディオン内にdiv要素を格納し、２カラムで表示したい(初心者)

htmlとcssのみで実装できるアコーディオンをサイトに作ろうと考えております。
画像と文字をアコーディオン内に納めるまではうまくいったのですが、レイアウト*を調節しようと
divタグを入れた所、div要素のみがアコーディオンの開閉と関係なく外に出たままの状態になってしまいました。

問題:1
この原因を知りたいです。なぜ、divがアコーディオンの外に出てしまうのか？
アコーディオンの外に出ないようにする方法はありますでしょうか？

問題:2
レイアウト調節をする為にdivタグを使用しようと考えております。
画像を左、テキストを右といったような配置です。
こういうレイアウトはdiv以外を使用した場合でも可能なのでしょうか？

※現在サイトは全て、bootstrapで制作しておりcol-md-6などを使用して
簡単にカラムを分けられると理想的です。

以下、現在制作しているアコーディオンのhtmlとcssになります。

※codepen上では画像は外に飛び出してしまいますが、wordpress上では
きちんとアコーディオン内に格納されています。
この原因もご存知であればお教えいただきたいです。

お手数ですが、ご確認の上、ご回答いただけましたら幸いです。
何卒よろしくお願い致します。

HTML
1<!---------------------------------------------------------------------->
2
3<div class="container">
4<div class="row hello_box">
5<ul>
6<li>
7<input type="checkbox" checked>
8<i></i>
9<h2 class="accordion">Q:質問1(問題：テキストと画像の2カラムで
10  表示したいです。)</h2>
11<p class="accordion">
12テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 
13</p>
14<img class="pc accordion" src="/images/test_pc-01.jpg" width="300px" height="300px" alt="パソコン用の画像"/>
15 <img class="sp accordion" src="/images/track_sp.svg" alt="スマートフォン用の画像"/>
16</li>
17
18<li>
19<input type="checkbox" checked>
20<i></i>
21<h2 class="accordion">Q:質問2(テキストは上で下に画像を3点1カラムで表示したいです。)</h2>
22<p class="accordion">テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 </p><img class="pc accordion" src="/images/test_pc-01.jpg" width="300px" height="300px" alt="パソコン用の画像"/><img class="sp accordion" src="/images/track_sp.svg" alt="スマートフォン用の画像"/>
23</li>
24<li>
25<input type="checkbox" checked>
26<i></i>
27<h2 class="accordion">質問3</h2>
28<p class="accordion">テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 テキストはダミーです。テキストはダミーです。 </p>
29<img src="/images/idea-100.jpg" class="accordion" alt="" class="aligncenter"
30width="300" height="300" border="0" />
31</li>
32
33</div>
34</div>

css
1/*===============================================
2 * 　アコーディオン
3*==============================================*/
4
5.transition, p, ul li i:before, ul li i:after {
6  -webkit-transition: all 0.25s ease-in-out;
7          transition: all 0.25s ease-in-out;
8}
9
10.flipIn, h1, ul li {
11  -webkit-animation: flipdown 0.5s ease both;
12          animation: flipdown 0.5s ease both;
13}
14
15.no-select, h2 {
16  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
17  -webkit-touch-callout: none;
18  -webkit-user-select: none;
19  -moz-user-select: none;
20  -ms-user-select: none;
21  user-select: none;
22}
23
24
25h2.accordion{
26 /*文字の大きさ*/ 	
27font-size: 16px;
28/*行間の幅*/ 	
29 line-height: 34px;
30/*文字の太さ*/ 
31font-weight: 300;
32/*文字の間隔の調節*/
33  letter-spacing: 1px;
34/*ーーー*/
35  display: block;
36/*要素外の幅*/
37  margin-right:50px;
38/*変更ー元の数値は0*/
39  padding:0px 0px 0px 0px;
40/*カーソルをポインターに変更*/
41  cursor: pointer;
42}
43/*h2にmarginを追加してもなぜか反映されない*/
44
45p.accordion{
46  color: rgba(48, 69, 92, 0.8);
47  font-size: 14px;
48  line-height: 26px;
49  letter-spacing: 1px;
50  position: relative;
51  overflow: hidden;
52/*追加-下の要素が飛び出るので 元は800px*/
53  max-height: 1000px;
54  opacity: 1;
55  -webkit-transform: translate(0, 0);
56      -ms-transform: translate(0, 0);
57          transform: translate(0, 0);
58/*変更ーpadding:30px 50px;*/
59padding:0px 30px 50px 0px;
60/*要素外の幅*/
61margin-right:50px;
62z-index: 2;
63/*右側に要素を配置*/
64float:right;
65}
66
67/*変更：margin-top: 14px;*/
68img src.accordion{
69margin-top: 0px;
70padding:0 0 50px 50px;
71float:left;
72}
73/*変更：margin-top: 14px;*/
74img src.accordion_noimage{
75margin-top: 0px;
76padding:30px 50px;
77}
78
79ul {
80  list-style: none;
81  -webkit-perspective: 900;
82          perspective: 900;
83  padding: 0;
84  margin: 0;
85}
86
87ul li {
88  position: relative;
89  padding: 0;
90  margin: 0;
91	/*変更： padding-bottom: 4px;*/
92  padding-bottom: 0px;
93	/*変更：padding-top: 18px;*/
94  padding-top: 0px;
95	/*ボーダーの色→border-top: 1px dotted #dce7eb;*/
96  border-top: 1px dotted #555555;
97}
98
99ul li:nth-of-type(1) {
100  -webkit-animation-delay: 0.5s;
101          animation-delay: 0.5s;
102}
103
104ul li:nth-of-type(2) {
105  -webkit-animation-delay: 0.75s;
106          animation-delay: 0.75s;
107}
108
109ul li:nth-of-type(3) {
110  -webkit-animation-delay: 1.0s;
111          animation-delay: 1.0s;
112}
113
114ul li:last-of-type {
115  padding-bottom: 0;
116}
117
118
119
120/*<<<アコーディオンのアロー>>>*/
121ul li i {
122  position: absolute;
123  -webkit-transform: translate(-6px, 0);
124      -ms-transform: translate(-6px, 0);
125          transform: translate(-6px, 0);
126  margin-top: 30px;
127	/*右からのオブジェクトの位置を決める*/
128  right: 30px;
129}
130
131ul li i:before, ul li i:after {
132  content: "";
133  position: absolute;
134  background-color: #ff6873;
135  width: 3px;
136  height: 9px;
137}
138
139ul li i:before {
140  -webkit-transform: translate(-2px, 0) rotate(45deg);
141      -ms-transform: translate(-2px, 0) rotate(45deg);
142          transform: translate(-2px, 0) rotate(45deg);
143}
144
145ul li i:after {
146  -webkit-transform: translate(2px, 0) rotate(-45deg);
147      -ms-transform: translate(2px, 0) rotate(-45deg);
148          transform: translate(2px, 0) rotate(-45deg);
149}
150
151ul li input[type=checkbox] {
152  position: absolute;
153  cursor: pointer;
154  width: 100%;
155  height: 100%;
156  z-index: 1;
157  opacity: 0;
158}
159
160ul li input[type=checkbox]:checked ~ p {
161  margin-top: 0;
162  max-height: 0;
163  opacity: 0;
164  -webkit-transform: translate(0, 50%);
165      -ms-transform: translate(0, 50%);
166          transform: translate(0, 50%);
167}
168
169ul li input[type=checkbox]:checked ~ i:before {
170  -webkit-transform: translate(2px, 0) rotate(45deg);
171      -ms-transform: translate(2px, 0) rotate(45deg);
172          transform: translate(2px, 0) rotate(45deg);
173}
174
175ul li input[type=checkbox]:checked ~ i:after {
176  -webkit-transform: translate(-2px, 0) rotate(-45deg);
177      -ms-transform: translate(-2px, 0) rotate(-45deg);
178          transform: translate(-2px, 0) rotate(-45deg);
179}
180
181@-webkit-keyframes flipdown {
182  0% {
183    opacity: 0;
184    -webkit-transform-origin: top center;
185            transform-origin: top center;
186    -webkit-transform: rotateX(-90deg);
187            transform: rotateX(-90deg);
188  }
189  5% {
190    opacity: 1;
191  }
192  80% {
193    -webkit-transform: rotateX(8deg);
194            transform: rotateX(8deg);
195  }
196  83% {
197    -webkit-transform: rotateX(6deg);
198            transform: rotateX(6deg);
199  }
200  92% {
201    -webkit-transform: rotateX(-3deg);
202            transform: rotateX(-3deg);
203  }
204  100% {
205    -webkit-transform-origin: top center;
206            transform-origin: top center;
207    -webkit-transform: rotateX(0deg);
208            transform: rotateX(0deg);
209  }
210}
211
212@keyframes flipdown {
213  0% {
214    opacity: 0;
215    -webkit-transform-origin: top center;
216            transform-origin: top center;
217    -webkit-transform: rotateX(-90deg);
218            transform: rotateX(-90deg);
219  }
220  5% {
221    opacity: 1;
222  }
223  80% {
224    -webkit-transform: rotateX(8deg);
225            transform: rotateX(8deg);
226  }
227  83% {
228    -webkit-transform: rotateX(6deg);
229            transform: rotateX(6deg);
230  }
231  92% {
232    -webkit-transform: rotateX(-3deg);
233            transform: rotateX(-3deg);
234  }
235  100% {
236    -webkit-transform-origin: top center;
237            transform-origin: top center;
238    -webkit-transform: rotateX(0deg);
239            transform: rotateX(0deg);
240  }
241}

行動規範の内容に同意します

回答1件

ベストアンサー

問題:1
この原因を知りたいです。なぜ、divがアコーディオンの外に出てしまうのか？
アコーディオンの外に出ないようにする方法はありますでしょうか？

CSS側の記述として以下の記述しか見つけられませんでした。
<p>に対してだけしかCSSの指定をしていないので、当然<div>に対しては何も起こりません。

CSS
1ul li input[type=checkbox]:checked ~ p {
2  /* 省略 */
3}

divに対して何らか (アコーディオンの外に出ない、など) のCSSを指定したいのであれば
以下のような記述を追加してください。

CSS
1ul li input[type=checkbox]:checked ~ div {
2  
3}

問題:2
レイアウト調節をする為にdivタグを使用しようと考えております。
画像を左、テキストを右といったような配置です。
こういうレイアウトはdiv以外を使用した場合でも可能なのでしょうか？

(正しいかどうかはともかく) div以外の要素でも可能です。
が、HTML側としてはdivで問題ないと思います。divを使っていることに問題があるわけではなく、CSS側の記述に問題があると考えます。

投稿2020/03/24 03:02

編集2020/03/24 03:20

new1ro

総合スコア4528

UUTUM

2020/03/24 04:47

new1roさまとてもわかりやすく解説して頂き本当にありがとうございます！いま試した所、あっさりとdivがアコーディオンに内包されました。ずっと悩んで何度も同じことを一人で繰り返していたので鳥肌がたちました！本当にありがとうございました。また、わからないことがあった際ご協力いただけましたら幸いです！ありがとうございます！

行動規範の内容に同意します