質問編集履歴

3

cdnについて追記致しました。

2020/02/15 11:58

投稿

Akinari
Akinari

スコア4

test CHANGED
File without changes
test CHANGED
@@ -221,3 +221,11 @@
221
221
 
222
222
 
223
223
  答えていただいたのですが、機能しないため、CSSのコードも追記させていただきました。
224
+
225
+
226
+
227
+ 【追記】
228
+
229
+ HTMLに貼るコードですが、こちらで合っていますでしょうか。
230
+
231
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

2

CSSのコードを追記させていただきました。

2020/02/15 11:58

投稿

Akinari
Akinari

スコア4

test CHANGED
File without changes
test CHANGED
@@ -132,7 +132,7 @@
132
132
 
133
133
 
134
134
 
135
- #question-list {
135
+ #question-list
136
136
 
137
137
  list-style: none;
138
138
 

1

CSSのコードを追記させていただきました。

2020/02/09 01:07

投稿

Akinari
Akinari

スコア4

test CHANGED
File without changes
test CHANGED
@@ -50,7 +50,7 @@
50
50
 
51
51
  <li class="question-list-item">
52
52
 
53
- <h3 class="faq"><i class="far fa-question-circle"></i>タイトル</h3>
53
+ <h3 class="faq question-list-item-title"><i class="far fa-question-circle"></i>タイトル</h3>
54
54
 
55
55
  <span>↓</span>
56
56
 
@@ -66,7 +66,7 @@
66
66
 
67
67
  <li class="question-list-item">
68
68
 
69
- <h3 class="faq"><i class="far fa-question-circle"></i>タイトル</h3>
69
+ <h3 class="faq question-list-item-title"><i class="far fa-question-circle"></i>タイトル</h3>
70
70
 
71
71
  <span>↓</span>
72
72
 
@@ -82,7 +82,7 @@
82
82
 
83
83
  <li class="question-list-item">
84
84
 
85
- <h3 class="faq"><i class="far fa-question-circle"></i>滞在中の食事はどうなりますか?</h3>
85
+ <h3 class="faq question-list-item-title"><i class="far fa-question-circle"></i>滞在中の食事はどうなりますか?</h3>
86
86
 
87
87
  <span>↓</span>
88
88
 
@@ -100,6 +100,106 @@
100
100
 
101
101
 
102
102
 
103
+ CSS
104
+
105
+ ソースコード
106
+
107
+ .question {
108
+
109
+ width: auto;
110
+
111
+ height: 1330px;
112
+
113
+ text-align: center;
114
+
115
+ }
116
+
117
+
118
+
119
+ .question h2 {
120
+
121
+ margin-top: 60px;
122
+
123
+ }
124
+
125
+
126
+
127
+ .fa-question-circle {
128
+
129
+ color: blue;
130
+
131
+ }
132
+
133
+
134
+
135
+ #question-list {
136
+
137
+ list-style: none;
138
+
139
+ }
140
+
141
+
142
+
143
+ .question-list-item {
144
+
145
+ width: 1170px;
146
+
147
+ height: 64px;
148
+
149
+ margin: 5px auto 0 auto;
150
+
151
+ border: 1px solid #c0c0c0;
152
+
153
+ border-radius: 3px;
154
+
155
+ position: relative;
156
+
157
+ cursor: pointer;
158
+
159
+ text-align: left;
160
+
161
+ }
162
+
163
+
164
+
165
+ .question-list-item h3 {
166
+
167
+ padding-top: 15px;
168
+
169
+ padding-left: 10px;
170
+
171
+ font-size: 23px;
172
+
173
+ }
174
+
175
+
176
+
177
+ .question-list-item span {
178
+
179
+ position: absolute;
180
+
181
+ top: 0;
182
+
183
+ right: 5px;
184
+
185
+ color: #ccc;
186
+
187
+ }
188
+
189
+
190
+
191
+ .answer {
192
+
193
+ padding: 12px 0px;
194
+
195
+ margin-bottom: 15px;
196
+
197
+
198
+
199
+ }
200
+
201
+
202
+
103
203
 
104
204
 
105
205
  jQuery
@@ -113,3 +213,11 @@
113
213
  $(this).next().slideToggle();
114
214
 
115
215
  });
216
+
217
+
218
+
219
+
220
+
221
+
222
+
223
+ 答えていただいたのですが、機能しないため、CSSのコードも追記させていただきました。