質問編集履歴

3

追記

2021/10/31 04:58

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -348,7 +348,7 @@
348
348
 
349
349
 
350
350
 
351
- スマホ
351
+ PC/スマホ 両方ともコンテンツが被さってしまいますね。
352
352
 
353
353
 
354
354
 

2

追記

2021/10/31 04:58

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -246,6 +246,60 @@
246
246
 
247
247
  ```ここに言語を入力
248
248
 
249
+ ul.areaList {
250
+
251
+ width: 100%;
252
+
253
+ position: relative;
254
+
255
+ font-size: 100%;
256
+
257
+ list-style: none;
258
+
259
+ /* margin: 0 0 0px 0; */
260
+
261
+ visibility: hidden;
262
+
263
+ transition: 0.5s;
264
+
265
+ height: auto;
266
+
267
+ opacity: 0;
268
+
269
+ }
270
+
271
+
272
+
273
+ ul, ol {
274
+
275
+ margin: 1
276
+
277
+ em
278
+
279
+ 0 1.5
280
+
281
+ em
282
+
283
+ 1.5
284
+
285
+ em
286
+
287
+ ;
288
+
289
+ padding-left: 0;
290
+
291
+ }
292
+
293
+ *, ::after, ::before {
294
+
295
+ background-repeat: no-repeat;
296
+
297
+ box-sizing: inherit;
298
+
299
+ }
300
+
301
+
302
+
249
303
  @media (min-width: 768px)
250
304
 
251
305
  .areaTitle {

1

追記

2021/10/31 04:45

投稿

niconic73027793
niconic73027793

スコア215

test CHANGED
File without changes
test CHANGED
@@ -39,3 +39,263 @@
39
39
  style:height:auto にしたら広がりましたが、アコーディオンのマイナスボタンを押しても
40
40
 
41
41
  高さが戻りませんでした。
42
+
43
+
44
+
45
+ htmlが下記で
46
+
47
+ ```ここに言語を入力
48
+
49
+ <div class="contents_box">
50
+
51
+ <h3 class="contentBoxTitle">対応可能エリア</h3>
52
+
53
+ <div class="area_inner">
54
+
55
+
56
+
57
+ <input id="acd-check1" class="acd-check" type="checkbox">
58
+
59
+ <label class="acd-label areaTitle" for="acd-check1">北海道・東北地方</label>
60
+
61
+ <ul class="areaList">
62
+
63
+ <li><a href="#">北海道</a></li>
64
+
65
+ <li><a href="#">宮城県</a></li>
66
+
67
+ <li><a href="#">山形県</a></li>
68
+
69
+ <li><a href="#">福島県</a></li>
70
+
71
+ </ul>
72
+
73
+
74
+
75
+
76
+
77
+ <input id="acd-check2" class="acd-check" type="checkbox">
78
+
79
+ <label class="acd-label areaTitle" for="acd-check2">北陸・信越地方</label>
80
+
81
+ <ul class="areaList">
82
+
83
+ <li><a href="#">新潟県</a></li>
84
+
85
+ <li><a href="#">富山県</a></li>
86
+
87
+ <li><a href="#">石川県</a></li>
88
+
89
+ <li><a href="#">福井県</a></li>
90
+
91
+ <li><a href="#">長野県</a></li>
92
+
93
+ </ul>
94
+
95
+
96
+
97
+ <input id="acd-check3" class="acd-check" type="checkbox">
98
+
99
+ <label class="acd-label areaTitle" for="acd-check3">関東地方</label>
100
+
101
+ <ul class="areaList">
102
+
103
+ <li><a href="#">茨城県</a></li>
104
+
105
+ <li><a href="#">栃木県</a></li>
106
+
107
+ <li><a href="#">群馬県</a></li>
108
+
109
+ <li><a href="#">山梨県</a></li>
110
+
111
+ <li><a href="#">埼玉県</a></li>
112
+
113
+ <li><a href="#">千葉県</a></li>
114
+
115
+ <li><a href="#">東京都</a></li>
116
+
117
+ <li><a href="#">神奈川県</a></li>
118
+
119
+ <li><a href="#">茨城県</a></li>
120
+
121
+ <li><a href="#">栃木県</a></li>
122
+
123
+ <li><a href="#">群馬県</a></li>
124
+
125
+ <li><a href="#">山梨県</a></li>
126
+
127
+ <li><a href="#">埼玉県</a></li>
128
+
129
+ <li><a href="#">千葉県</a></li>
130
+
131
+ <li><a href="#">東京都</a></li>
132
+
133
+ <li><a href="#">神奈川県</a></li>
134
+
135
+ <li><a href="#">茨城県</a></li>
136
+
137
+ <li><a href="#">栃木県</a></li>
138
+
139
+ <li><a href="#">群馬県</a></li>
140
+
141
+ <li><a href="#">山梨県</a></li>
142
+
143
+ <li><a href="#">埼玉県</a></li>
144
+
145
+ <li><a href="#">千葉県</a></li>
146
+
147
+ <li><a href="#">東京都</a></li>
148
+
149
+ <li><a href="#">神奈川県</a></li>
150
+
151
+ </ul>
152
+
153
+
154
+
155
+ <input id="acd-check4" class="acd-check" type="checkbox">
156
+
157
+ <label class="acd-label areaTitle" for="acd-check4">東海地方</label>
158
+
159
+ <ul class="areaList">
160
+
161
+ <li><a href="#">岐阜県</a></li>
162
+
163
+ <li><a href="#">静岡県</a></li>
164
+
165
+ <li><a href="#">愛知県</a></li>
166
+
167
+ <li><a href="#">三重県</a></li>
168
+
169
+ </ul>
170
+
171
+
172
+
173
+ <input id="acd-check5" class="acd-check" type="checkbox">
174
+
175
+ <label class="acd-label areaTitle" for="acd-check5">関西地方</label>
176
+
177
+ <ul class="areaList">
178
+
179
+ <li><a href="#">滋賀県</a></li>
180
+
181
+ <li><a href="#">京都府</a></li>
182
+
183
+ <li><a href="#">大阪府</a></li>
184
+
185
+ <li><a href="#">兵庫県</a></li>
186
+
187
+ <li><a href="#">奈良県</a></li>
188
+
189
+ <li><a href="#">和歌山県</a></li>
190
+
191
+ </ul>
192
+
193
+
194
+
195
+ <input id="acd-check6" class="acd-check" type="checkbox">
196
+
197
+ <label class="acd-label areaTitle" for="acd-check6">中国・四国地方</label>
198
+
199
+ <ul class="areaList">
200
+
201
+ <li><a href="#">岡山県</a></li>
202
+
203
+ <li><a href="#">広島県</a></li>
204
+
205
+ <li><a href="#">山口県</a></li>
206
+
207
+ <li><a href="#">愛媛県</a></li>
208
+
209
+ <li><a href="#">香川県</a></li>
210
+
211
+ </ul>
212
+
213
+
214
+
215
+ <input id="acd-check7" class="acd-check" type="checkbox">
216
+
217
+ <label class="acd-label areaTitle" for="acd-check7">九州・沖縄地方</label>
218
+
219
+ <ul class="areaList">
220
+
221
+ <li><a href="#">福岡県</a></li>
222
+
223
+ <li><a href="#">佐賀県</a></li>
224
+
225
+ <li><a href="#">長崎県</a></li>
226
+
227
+ <li><a href="#">熊本県</a></li>
228
+
229
+ <li><a href="#">大分県</a></li>
230
+
231
+ <li><a href="#">鹿児島県</a></li>
232
+
233
+ </ul>
234
+
235
+
236
+
237
+ </div>
238
+
239
+ </div>
240
+
241
+ ```
242
+
243
+ css が下記です
244
+
245
+
246
+
247
+ ```ここに言語を入力
248
+
249
+ @media (min-width: 768px)
250
+
251
+ .areaTitle {
252
+
253
+ margin-bottom: 20px;
254
+
255
+ font-size: 120%;
256
+
257
+ }
258
+
259
+
260
+
261
+ .acd-label {
262
+
263
+ display: block;
264
+
265
+ }
266
+
267
+ .areaTitle {
268
+
269
+ position: relative;
270
+
271
+ margin-bottom: 20
272
+
273
+ px
274
+
275
+ ;
276
+
277
+ font-size: 100%;
278
+
279
+ border-bottom: 2
280
+
281
+ px
282
+
283
+ solid #172d81;
284
+
285
+ padding-bottom: 5
286
+
287
+ px
288
+
289
+ ;
290
+
291
+ cursor: pointer;
292
+
293
+ ```
294
+
295
+
296
+
297
+ スマホ
298
+
299
+
300
+
301
+ ```