質問編集履歴

3

コードブロックの挿入

2019/11/13 12:49

投稿

mon1992
mon1992

スコア7

test CHANGED
File without changes
test CHANGED
@@ -46,9 +46,11 @@
46
46
 
47
47
  現状はこのような記述を行っております。
48
48
 
49
+
50
+
51
+
52
+
49
- ```HTML Javascript CSS
53
+ ```ここに言語を入力
50
-
51
-
52
54
 
53
55
  <div class="cate">
54
56
 
@@ -190,33 +192,35 @@
190
192
 
191
193
 
192
194
 
193
- .cate{width:640px; margin-left:auto; margin-right:auto;}
195
+   .cate{width:640px; margin-left:auto; margin-right:auto;} 
194
-
196
+
195
- ul{padding:0;}
197
+   ul{padding:0;} 
196
-
198
+
197
- li{display: inline-block;}
199
+   li{display: inline-block;} 
198
-
200
+
199
- .te1,.te2,.te3,.te4{margin:0px; width:49%; float:left;}
201
+  .te1,.te2,.te3,.te4{margin:0px; width:49%; float:left;}
200
-
202
+
201
- .accordion3 {text-align: center;}
203
+  .accordion3 {text-align: center;} 
202
-
204
+
203
- .accordion3 .inner {display: none;}
205
+  .accordion3 .inner {display: none;} 
204
-
206
+
205
- .accordion3 .inner.open {display: block;}
207
+  .accordion3 .inner.open {display: block;} 
206
-
208
+
207
- .accordion3 p{cursor: pointer; margin:0;}
209
+  .accordion3 p{cursor: pointer; margin:0;} 
208
-
210
+
209
- .accordion3 p.ac1{background: #F50057; width:300px;}
211
+  .accordion3 p.ac1{background: #F50057; width:300px;} 
210
-
212
+
211
- .accordion3 .inner li.content1-1{background: #F50057; padding:0;}
213
+  .accordion3 .inner li.content1-1{background: #F50057; padding:0;} 
212
-
214
+
213
- .accordion3 .inner li.content1-2{background: #F50057; padding:0;}
215
+  .accordion3 .inner li.content1-2{background: #F50057; padding:0;} 
214
-
216
+
215
- .accordion3 .inner li.content1-3{background: #F50057; padding:0;}
217
+  .accordion3 .inner li.content1-3{background: #F50057; padding:0;} 
216
-
218
+
217
- .accordion3 li{list-style: none; margin: 0px}
219
+  .accordion3 li{list-style: none; margin: 0px}
218
-
220
+
219
- </style> ```
221
+ </style>
222
+
223
+ ```  
220
224
 
221
225
 
222
226
 

2

改行で見にくくなってしまったので、改行を省きました。

2019/11/13 12:49

投稿

mon1992
mon1992

スコア7

test CHANGED
File without changes
test CHANGED
@@ -56,105 +56,97 @@
56
56
 
57
57
  <div class="te1">
58
58
 
59
- <ul class="accordion3">
59
+ <ul class="accordion3">
60
-
60
+
61
- <li>
61
+ <li>
62
-
62
+
63
- <p class="ac1">アコーディオン</p>
63
+ <p class="ac1">アコーディオン</p>
64
-
64
+
65
- <ul class="inner">
65
+ <ul class="inner">
66
-
66
+
67
- <li class="content1-1">コンテンツ1</li>
67
+ <li class="content1-1">コンテンツ1</li>
68
-
68
+
69
- <li class="content1-2">コンテンツ2</li>
69
+ <li class="content1-2">コンテンツ2</li>
70
-
70
+
71
- <li class="content1-3">コンテンツ3</li>
71
+ <li class="content1-3">コンテンツ3</li>
72
-
72
+
73
- </ul>
73
+ </ul>
74
-
74
+
75
- </li>
75
+ </li>
76
-
77
-
78
-
76
+
79
- </ul>
77
+ </ul>
80
78
 
81
79
  </div>
82
80
 
83
81
  <div class="te2">
84
82
 
85
- <ul class="accordion3">
83
+ <ul class="accordion3">
86
-
84
+
87
- <li>
85
+ <li>
88
-
86
+
89
- <p class="ac1">アコーディオン</p>
87
+ <p class="ac1">アコーディオン</p>
90
-
88
+
91
- <ul class="inner">
89
+ <ul class="inner">
92
-
90
+
93
- <li class="content1-1">コンテンツ1</li>
91
+ <li class="content1-1">コンテンツ1</li>
94
-
92
+
95
- <li class="content1-2">コンテンツ2</li>
93
+ <li class="content1-2">コンテンツ2</li>
96
-
94
+
97
- <li class="content1-3">コンテンツ3</li>
95
+ <li class="content1-3">コンテンツ3</li>
98
-
96
+
99
- </ul>
97
+ </ul>
100
-
98
+
101
- </li>
99
+ </li>
102
-
103
-
104
-
100
+
105
- </ul>
101
+ </ul>
106
102
 
107
103
  </div>
108
104
 
109
105
  <div class="te3">
110
106
 
111
- <ul class="accordion3">
107
+ <ul class="accordion3">
112
-
108
+
113
- <li>
109
+ <li>
114
-
110
+
115
- <p class="ac1">アコーディオン</p>
111
+ <p class="ac1">アコーディオン</p>
116
-
112
+
117
- <ul class="inner">
113
+ <ul class="inner">
118
-
114
+
119
- <li class="content1-1">コンテンツ1</li>
115
+ <li class="content1-1">コンテンツ1</li>
120
-
116
+
121
- <li class="content1-2">コンテンツ2</li>
117
+ <li class="content1-2">コンテンツ2</li>
122
-
118
+
123
- <li class="content1-3">コンテンツ3</li>
119
+ <li class="content1-3">コンテンツ3</li>
124
-
120
+
125
- </ul>
121
+ </ul>
126
-
122
+
127
- </li>
123
+ </li>
128
-
129
-
130
-
124
+
131
- </ul>
125
+ </ul>
132
126
 
133
127
  </div>
134
128
 
135
129
  <div class="te4">
136
130
 
137
- <ul class="accordion3">
131
+ <ul class="accordion3">
138
-
132
+
139
- <li>
133
+ <li>
140
-
134
+
141
- <p class="ac1">アコーディオン</p>
135
+ <p class="ac1">アコーディオン</p>
142
-
136
+
143
- <ul class="inner">
137
+ <ul class="inner">
144
-
138
+
145
- <li class="content1-1">コンテンツ1</li>
139
+ <li class="content1-1">コンテンツ1</li>
146
-
140
+
147
- <li class="content1-2">コンテンツ2</li>
141
+ <li class="content1-2">コンテンツ2</li>
148
-
142
+
149
- <li class="content1-3">コンテンツ3</li>
143
+ <li class="content1-3">コンテンツ3</li>
150
-
144
+
151
- </ul>
145
+ </ul>
152
-
146
+
153
- </li>
147
+ </li>
154
-
155
-
156
-
148
+
157
- </ul>
149
+ </ul>
158
150
 
159
151
  </div>
160
152
 
@@ -180,65 +172,51 @@
180
172
 
181
173
 
182
174
 
183
- //.accordion3の中のp要素がクリックされたら
175
+ //.accordion3の中のp要素がクリックされたら
184
-
176
+
185
- $('.accordion3 p').click(function(){
177
+ $('.accordion3 p').click(function(){
186
-
187
-
188
-
178
+
189
- //クリックされた.accordion3の中のp要素に隣接するul要素が開いたり閉じたりする。
179
+ //クリックされた.accordion3の中のp要素に隣接するul要素が開いたり閉じたりする。
190
-
180
+
191
- $(this).next('ul').slideToggle();
181
+ $(this).next('ul').slideToggle();
192
-
193
-
194
-
182
+
195
- });
183
+ });
196
-
184
+
197
- });
185
+ });
198
186
 
199
187
  </script>
200
188
 
201
-
202
-
203
- <style>
189
+ <style>
204
190
 
205
191
 
206
192
 
207
-       .cate{width:640px; margin-left:auto; margin-right:auto;}
193
+ .cate{width:640px; margin-left:auto; margin-right:auto;}
208
-
194
+
209
- ul{padding:0;}
195
+ ul{padding:0;}
210
-
196
+
211
- li{display: inline-block;}
197
+ li{display: inline-block;}
212
-
198
+
213
-   .te1,.te2,.te3,.te4{margin:0px; width:49%; float:left;}
199
+ .te1,.te2,.te3,.te4{margin:0px; width:49%; float:left;}
214
-
200
+
215
- .accordion3 {text-align: center;}
201
+ .accordion3 {text-align: center;}
216
-
202
+
217
- .accordion3 .inner {display: none;}
203
+ .accordion3 .inner {display: none;}
218
-
204
+
219
- .accordion3 .inner.open {display: block;}
205
+ .accordion3 .inner.open {display: block;}
220
-
206
+
221
- .accordion3 p{cursor: pointer; margin:0;}
207
+ .accordion3 p{cursor: pointer; margin:0;}
222
-
208
+
223
- .accordion3 p.ac1{background: #F50057; width:300px;}
209
+ .accordion3 p.ac1{background: #F50057; width:300px;}
224
-
210
+
225
- .accordion3 .inner li.content1-1{background: #F50057; padding:0;}
211
+ .accordion3 .inner li.content1-1{background: #F50057; padding:0;}
226
-
212
+
227
- .accordion3 .inner li.content1-2{background: #F50057; padding:0;}
213
+ .accordion3 .inner li.content1-2{background: #F50057; padding:0;}
228
-
214
+
229
- .accordion3 .inner li.content1-3{background: #F50057; padding:0;}
215
+ .accordion3 .inner li.content1-3{background: #F50057; padding:0;}
230
-
216
+
231
- .accordion3 li{list-style: none; margin: 0px}
217
+ .accordion3 li{list-style: none; margin: 0px}
232
-
233
-
234
-
218
+
235
-   </style>
219
+ </style> ```
236
-
237
-
238
-
239
-
240
-
241
- ```
242
220
 
243
221
 
244
222
 

1

ソースコードを追加しました。

2019/11/13 08:00

投稿

mon1992
mon1992

スコア7

test CHANGED
File without changes
test CHANGED
@@ -39,3 +39,209 @@
39
39
 
40
40
 
41
41
  ご教示お願い致します。
42
+
43
+
44
+
45
+
46
+
47
+ 現状はこのような記述を行っております。
48
+
49
+ ```HTML Javascript CSS
50
+
51
+
52
+
53
+ <div class="cate">
54
+
55
+
56
+
57
+ <div class="te1">
58
+
59
+ <ul class="accordion3">
60
+
61
+ <li>
62
+
63
+ <p class="ac1">アコーディオン</p>
64
+
65
+ <ul class="inner">
66
+
67
+ <li class="content1-1">コンテンツ1</li>
68
+
69
+ <li class="content1-2">コンテンツ2</li>
70
+
71
+ <li class="content1-3">コンテンツ3</li>
72
+
73
+ </ul>
74
+
75
+ </li>
76
+
77
+
78
+
79
+ </ul>
80
+
81
+ </div>
82
+
83
+ <div class="te2">
84
+
85
+ <ul class="accordion3">
86
+
87
+ <li>
88
+
89
+ <p class="ac1">アコーディオン</p>
90
+
91
+ <ul class="inner">
92
+
93
+ <li class="content1-1">コンテンツ1</li>
94
+
95
+ <li class="content1-2">コンテンツ2</li>
96
+
97
+ <li class="content1-3">コンテンツ3</li>
98
+
99
+ </ul>
100
+
101
+ </li>
102
+
103
+
104
+
105
+ </ul>
106
+
107
+ </div>
108
+
109
+ <div class="te3">
110
+
111
+ <ul class="accordion3">
112
+
113
+ <li>
114
+
115
+ <p class="ac1">アコーディオン</p>
116
+
117
+ <ul class="inner">
118
+
119
+ <li class="content1-1">コンテンツ1</li>
120
+
121
+ <li class="content1-2">コンテンツ2</li>
122
+
123
+ <li class="content1-3">コンテンツ3</li>
124
+
125
+ </ul>
126
+
127
+ </li>
128
+
129
+
130
+
131
+ </ul>
132
+
133
+ </div>
134
+
135
+ <div class="te4">
136
+
137
+ <ul class="accordion3">
138
+
139
+ <li>
140
+
141
+ <p class="ac1">アコーディオン</p>
142
+
143
+ <ul class="inner">
144
+
145
+ <li class="content1-1">コンテンツ1</li>
146
+
147
+ <li class="content1-2">コンテンツ2</li>
148
+
149
+ <li class="content1-3">コンテンツ3</li>
150
+
151
+ </ul>
152
+
153
+ </li>
154
+
155
+
156
+
157
+ </ul>
158
+
159
+ </div>
160
+
161
+ </div>
162
+
163
+
164
+
165
+
166
+
167
+
168
+
169
+
170
+
171
+
172
+
173
+
174
+
175
+
176
+
177
+ <script>
178
+
179
+ $(function(){
180
+
181
+
182
+
183
+ //.accordion3の中のp要素がクリックされたら
184
+
185
+ $('.accordion3 p').click(function(){
186
+
187
+
188
+
189
+ //クリックされた.accordion3の中のp要素に隣接するul要素が開いたり閉じたりする。
190
+
191
+ $(this).next('ul').slideToggle();
192
+
193
+
194
+
195
+ });
196
+
197
+ });
198
+
199
+ </script>
200
+
201
+
202
+
203
+ <style>
204
+
205
+
206
+
207
+       .cate{width:640px; margin-left:auto; margin-right:auto;}
208
+
209
+ ul{padding:0;}
210
+
211
+ li{display: inline-block;}
212
+
213
+   .te1,.te2,.te3,.te4{margin:0px; width:49%; float:left;}
214
+
215
+ .accordion3 {text-align: center;}
216
+
217
+ .accordion3 .inner {display: none;}
218
+
219
+ .accordion3 .inner.open {display: block;}
220
+
221
+ .accordion3 p{cursor: pointer; margin:0;}
222
+
223
+ .accordion3 p.ac1{background: #F50057; width:300px;}
224
+
225
+ .accordion3 .inner li.content1-1{background: #F50057; padding:0;}
226
+
227
+ .accordion3 .inner li.content1-2{background: #F50057; padding:0;}
228
+
229
+ .accordion3 .inner li.content1-3{background: #F50057; padding:0;}
230
+
231
+ .accordion3 li{list-style: none; margin: 0px}
232
+
233
+
234
+
235
+   </style>
236
+
237
+
238
+
239
+
240
+
241
+ ```
242
+
243
+
244
+
245
+ ボディー内です。
246
+
247
+ metaタグには、jquery3.4.1を入れてあります。