質問編集履歴

4

回答から得た解決内容を追記した。

2019/06/01 12:06

投稿

Akaho
Akaho

スコア39

test CHANGED
File without changes
test CHANGED
@@ -112,49 +112,221 @@
112
112
 
113
113
  <body>
114
114
 
115
+ <
116
+
117
+ <div class="signup-modal-wrapper" id="signup-modal">
118
+
119
+ <div class="modal">
120
+
121
+ <div class="close-modal">
122
+
123
+ <i class="fa fa-2x fa-times"></i>
124
+
115
- <header>
125
+ </div>
126
+
127
+ <div id="signup-form">
128
+
129
+ <h2>Emailで新規登録</h2>
130
+
131
+ <form action="#">
132
+
133
+ <input class="form-control" type="text" placeholder="メールアドレス">
134
+
135
+ <input class="form-control" type="password" placeholder="パスワード">
136
+
137
+ <div id="submit-btn">新規登録</div>
138
+
139
+ </form>
140
+
141
+ </div>
142
+
143
+ </div>
144
+
145
+ </div>
146
+
147
+ <div class="login-modal-wrapper" id="login-modal">
148
+
149
+ <div class="modal">
150
+
151
+ <div class="close-modal">
152
+
153
+ <i class="fa fa-2x fa-times"></i>
154
+
155
+ </div>
156
+
157
+ <div id="login-form">
158
+
159
+ <h2>Emailログイン</h2>
160
+
161
+ <form action="#">
162
+
163
+ <input class="form-control" type="text" placeholder="メールアドレス">
164
+
165
+ <input class="form-control" type="password" placeholder="パスワード">
166
+
167
+ <div id="submit-btn">ログイン</div>
168
+
169
+ </form>
170
+
171
+ </div>
172
+
173
+ </div>
174
+
175
+ </div>
176
+
177
+ <div class="top-wrapper">
116
178
 
117
179
  <div class="container">
118
180
 
181
+ <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
182
+
183
+ <p>progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
184
+
185
+ <div class="btn signup signup-show">新規登録はこちら</div>
186
+
187
+ <p>or</p>
188
+
189
+ <div class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</div>
190
+
191
+ <div class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</div>
192
+
193
+ </div>
194
+
195
+ </div>
196
+
197
+ <div class="lesson-wrapper">
198
+
199
+ <div class="container">
200
+
119
- <div class="header-left">
201
+ <div class="heading">
120
-
202
+
121
- <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
203
+ <h2>Learn Where to Get Started!</h2>
122
204
 
123
205
  </div>
124
206
 
207
+ <div class="lessons">
208
+
209
+ <div class="lesson lesson-hover">
210
+
125
- <div class="header-right">
211
+ <div class="lesson-icon">
212
+
126
-
213
+ <img src="https://prog-8.com/images/html/advanced/html.png">
214
+
215
+ <p>HTML & CSS</p>
216
+
217
+ </div>
218
+
219
+ <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
220
+
221
+ </div>
222
+
127
- <div class="login" id="login-show">ログイン</div>
223
+ <div class="lesson lesson-hover">
224
+
225
+ <div class="lesson-icon">
226
+
227
+ <img src="https://prog-8.com/images/html/advanced/jQuery.png">
228
+
229
+ <p>jQuery</p>
230
+
231
+ </div>
232
+
233
+ <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p>
234
+
235
+ </div>
236
+
237
+ <div class="lesson lesson-hover">
238
+
239
+ <div class="lesson-icon">
240
+
241
+ <img src="https://prog-8.com/images/html/advanced/ruby.png">
242
+
243
+ <p>Ruby</p>
244
+
245
+ </div>
246
+
247
+ <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
248
+
249
+ </div>
250
+
251
+ <div class="lesson lesson-hover">
252
+
253
+ <div class="lesson-icon">
254
+
255
+ <img src="https://prog-8.com/images/html/advanced/php.png">
256
+
257
+ <p>PHP</p>
258
+
259
+ </div>
260
+
261
+ <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
262
+
263
+ </div>
264
+
265
+
128
266
 
129
267
  </div>
130
268
 
131
269
  </div>
132
270
 
133
- </header>
271
+ </div>
134
-
272
+
135
- <div class="signup-modal-wrapper" id="signup-modal">
273
+ <div class="faq-wrapper">
274
+
136
-
275
+ <div class="container">
276
+
137
- <div class="modal">
277
+ <div class="heading">
138
-
278
+
139
- <div class="close-modal">
279
+ <h2>FAQ</h2>
140
-
141
- <i class="fa fa-2x fa-times"></i>
142
280
 
143
281
  </div>
144
282
 
283
+ <div class="faq">
284
+
145
- <div id="signup-form">
285
+ <ul id="faq-list">
286
+
146
-
287
+ <li class="faq-list-item">
288
+
289
+ <h3 class="question">Progateの公式キャラクターはなんですか?</h3>
290
+
147
- <h2>Emailで新規登録</h2>
291
+ <span>+</span>
148
-
292
+
149
- <form action="#">
293
+ <div class="answer">
150
-
151
- <input class="form-control" type="text" placeholder="メールアドレス">
294
+
152
-
153
- <input class="form-control" type="password" placeholder="パスワード">
154
-
155
- <div id="submit-btn">新規登録</div>
295
+ <p>にんじゃわんこといいます。忍者の格好をしたわんこです。ネコではありません。</p>
156
-
296
+
157
- </form>
297
+ </div>
298
+
299
+ </li>
300
+
301
+ <li class="faq-list-item">
302
+
303
+ <h3 class="question">にんじゃわんこはオスですか?それともメスですか?</h3>
304
+
305
+ <span>+</span>
306
+
307
+ <div class="answer">
308
+
309
+ <p>にんじゃわんこはオスです。</p>
310
+
311
+ </div>
312
+
313
+ </li>
314
+
315
+ <li class="faq-list-item">
316
+
317
+ <h3 class="question">にんじゃわんこは何歳ですか?</h3>
318
+
319
+ <span>+</span>
320
+
321
+ <div class="answer">
322
+
323
+ <p>にんじゃわんこは14歳です。</p>
324
+
325
+ </div>
326
+
327
+ </li>
328
+
329
+ </ul>
158
330
 
159
331
  </div>
160
332
 
@@ -162,224 +334,34 @@
162
334
 
163
335
  </div>
164
336
 
165
- <div class="login-modal-wrapper" id="login-modal">
337
+ <div class="message-wrapper">
338
+
166
-
339
+ <div class="container">
340
+
167
- <div class="modal">
341
+ <div class="heading">
168
-
169
- <div class="close-modal">
342
+
170
-
171
- <i class="fa fa-2x fa-times"></i>
343
+ <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
344
+
345
+ <h3 id="tagline">Let's learn to code, learn to be creative!</h3>
172
346
 
173
347
  </div>
174
348
 
175
- <div id="login-form">
176
-
177
- <h2>Emailログイン</h2>
178
-
179
- <form action="#">
180
-
181
- <input class="form-control" type="text" placeholder="メールアドレス">
182
-
183
- <input class="form-control" type="password" placeholder="パスワード">
184
-
185
- <div id="submit-btn">ログイン</div>
349
+ <div class="btn message signup-show">さっそく開発する</div>
186
-
187
- </form>
188
-
189
- </div>
190
350
 
191
351
  </div>
192
352
 
193
353
  </div>
194
354
 
195
- <div class="top-wrapper">
355
+ <footer>
196
356
 
197
357
  <div class="container">
198
358
 
359
+ <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
360
+
199
- <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
361
+ <p>Learn to Code,Learn to be Creative.</p>
200
-
201
- <p>progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
202
-
203
- <div class="btn signup signup-show">新規登録はこちら</div>
204
-
205
- <p>or</p>
206
-
207
- <div class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</div>
208
-
209
- <div class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</div>
210
362
 
211
363
  </div>
212
364
 
213
- </div>
214
-
215
- <div class="lesson-wrapper">
216
-
217
- <div class="container">
218
-
219
- <div class="heading">
220
-
221
- <h2>Learn Where to Get Started!</h2>
222
-
223
- </div>
224
-
225
- <div class="lessons">
226
-
227
- <div class="lesson lesson-hover">
228
-
229
- <div class="lesson-icon">
230
-
231
- <img src="https://prog-8.com/images/html/advanced/html.png">
232
-
233
- <p>HTML & CSS</p>
234
-
235
- </div>
236
-
237
- <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
238
-
239
- </div>
240
-
241
- <div class="lesson lesson-hover">
242
-
243
- <div class="lesson-icon">
244
-
245
- <img src="https://prog-8.com/images/html/advanced/jQuery.png">
246
-
247
- <p>jQuery</p>
248
-
249
- </div>
250
-
251
- <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p>
252
-
253
- </div>
254
-
255
- <div class="lesson lesson-hover">
256
-
257
- <div class="lesson-icon">
258
-
259
- <img src="https://prog-8.com/images/html/advanced/ruby.png">
260
-
261
- <p>Ruby</p>
262
-
263
- </div>
264
-
265
- <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
266
-
267
- </div>
268
-
269
- <div class="lesson lesson-hover">
270
-
271
- <div class="lesson-icon">
272
-
273
- <img src="https://prog-8.com/images/html/advanced/php.png">
274
-
275
- <p>PHP</p>
276
-
277
- </div>
278
-
279
- <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
280
-
281
- </div>
282
-
283
-
284
-
285
- </div>
286
-
287
- </div>
288
-
289
- </div>
290
-
291
- <div class="faq-wrapper">
292
-
293
- <div class="container">
294
-
295
- <div class="heading">
296
-
297
- <h2>FAQ</h2>
298
-
299
- </div>
300
-
301
- <div class="faq">
302
-
303
- <ul id="faq-list">
304
-
305
- <li class="faq-list-item">
306
-
307
- <h3 class="question">Progateの公式キャラクターはなんですか?</h3>
308
-
309
- <span>+</span>
310
-
311
- <div class="answer">
312
-
313
- <p>にんじゃわんこといいます。忍者の格好をしたわんこです。ネコではありません。</p>
314
-
315
- </div>
316
-
317
- </li>
318
-
319
- <li class="faq-list-item">
320
-
321
- <h3 class="question">にんじゃわんこはオスですか?それともメスですか?</h3>
322
-
323
- <span>+</span>
324
-
325
- <div class="answer">
326
-
327
- <p>にんじゃわんこはオスです。</p>
328
-
329
- </div>
330
-
331
- </li>
332
-
333
- <li class="faq-list-item">
334
-
335
- <h3 class="question">にんじゃわんこは何歳ですか?</h3>
336
-
337
- <span>+</span>
338
-
339
- <div class="answer">
340
-
341
- <p>にんじゃわんこは14歳です。</p>
342
-
343
- </div>
344
-
345
- </li>
346
-
347
- </ul>
348
-
349
- </div>
350
-
351
- </div>
352
-
353
- </div>
354
-
355
- <div class="message-wrapper">
356
-
357
- <div class="container">
358
-
359
- <div class="heading">
360
-
361
- <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
362
-
363
- <h3 id="tagline">Let's learn to code, learn to be creative!</h3>
364
-
365
- </div>
366
-
367
- <div class="btn message signup-show">さっそく開発する</div>
368
-
369
- </div>
370
-
371
- </div>
372
-
373
- <footer>
374
-
375
- <div class="container">
376
-
377
- <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
378
-
379
- <p>Learn to Code,Learn to be Creative.</p>
380
-
381
- </div>
382
-
383
365
  </footer>
384
366
 
385
367
  <script src="script.js"></script>
@@ -857,3 +839,29 @@
857
839
  ![イメージ説明](770376ed88ad0126c7505738164bb42f.png)
858
840
 
859
841
  この処理全体でなぜできるのかを教えて下さい。
842
+
843
+ **回答から得た解決内容**
844
+
845
+ ```
846
+
847
+ $('.faq-list-item').click(function(){
848
+
849
+ var $answer=$(this).find('.answer');
850
+
851
+ if($answer.hasClass('open')){
852
+
853
+ $answer.removeClass('open');
854
+
855
+ }else{
856
+
857
+ $answer.addClass('open');
858
+
859
+ }
860
+
861
+ });
862
+
863
+ ```とコードを書き直しクリアできました。
864
+
865
+ 今回、シングルクォーテーションで囲ってはいけないところを理解出来ました。
866
+
867
+ このコードでまだ理解出来ていないところがあるので別質問にします。

3

回答を得て、まだ理解出来ずにいる点を追記した。

2019/06/01 12:06

投稿

Akaho
Akaho

スコア39

test CHANGED
File without changes
test CHANGED
@@ -108,23 +108,7 @@
108
108
 
109
109
  コード
110
110
 
111
- <!DOCTYPE html>
111
+
112
-
113
- <html>
114
-
115
- <head>
116
-
117
- <meta charset="utf-8">
118
-
119
- <title>Progate</title>
120
-
121
- <link rel="stylesheet" type="text/css" href="stylesheet.css">
122
-
123
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
124
-
125
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
126
-
127
- </head>
128
112
 
129
113
  <body>
130
114
 
@@ -860,10 +844,16 @@
860
844
 
861
845
 
862
846
 
863
-
864
-
865
-
866
-
867
-
868
-
869
847
  ```
848
+
849
+ **回答を得て、まだ理解出来ずにいる点**
850
+
851
+ 今回のjavascriptコードでアコーディオン機能の準備ができるメカニズムが分からないです。
852
+
853
+ $answerにはopenクラスがないから、hasClassでtrue,falseをそもそも判定できない(trueがない)と考えることしか理解出来ないです。
854
+
855
+ 次の課題でアコーディオン機能を搭載できるみたいですが、その処理が下画像。
856
+
857
+ ![イメージ説明](770376ed88ad0126c7505738164bb42f.png)
858
+
859
+ この処理全体でなぜできるのかを教えて下さい。

2

概要欄に詳細画像追加

2019/06/01 05:12

投稿

Akaho
Akaho

スコア39

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  今やっている課題はclickイベントの中にif文とhasClassメソッドを用いて、アコーディオン機能を作る事を目指したものです。
4
4
 
5
- addClassやremoveClassも使って。
5
+ addClassやremoveClassも使って。下の画像のFAQにあたるところです。
6
+
7
+ ![![イメージ説明](7f29ea13c40a05b14e6bbfb4b3045cee.png)](bf4c56d5fbac5319ec011cc07d9ab4e6.png)
6
8
 
7
9
 
8
10
 
@@ -748,41 +750,109 @@
748
750
 
749
751
 
750
752
 
753
+
754
+
751
- .lesson-icon {
755
+ .text-contents {
752
-
756
+
753
- position: relative;
757
+ margin: 3% auto;
754
-
758
+
755
- width: 70%;
759
+ width: 80%;
760
+
761
+ font-size: 12px;
762
+
763
+ color: #b3aeb5;
764
+
765
+ display: none;
766
+
767
+ }
768
+
769
+
770
+
771
+ .text-active {
772
+
773
+ display: block;
774
+
775
+ }
776
+
777
+
778
+
779
+ /*faq wrapper*/
780
+
781
+ .faq-wrapper {
782
+
783
+ background-color: #e6ecf0;
784
+
785
+ text-align: center;
786
+
787
+ padding-bottom: 80px;
788
+
789
+ color: #5f5d60;
790
+
791
+ }
792
+
793
+
794
+
795
+ #faq-list {
796
+
797
+ width: 500px;
756
798
 
757
799
  margin: 0 auto;
758
800
 
801
+ padding: 0;
802
+
803
+ list-style: none;
804
+
759
- }
805
+ }
760
-
761
-
762
-
806
+
807
+
808
+
763
- .lesson-icon p {
809
+ .faq-list-item {
810
+
764
-
811
+ margin:10px;
812
+
813
+ border-bottom:1px solid #ccc;
814
+
765
- position: absolute;
815
+ position:relative;
766
-
767
- top: 75px;
816
+
768
-
769
- width: 100%;
770
-
771
- color: white;
817
+ cursor:pointer;
818
+
772
-
819
+ text-align: left;
820
+
773
- }
821
+ }
774
-
775
-
776
-
822
+
823
+
824
+
777
- .text-contents {
825
+ .faq-list-item h3 {
826
+
778
-
827
+ font-size: 14px;
828
+
829
+ }
830
+
831
+
832
+
833
+ .faq-list-item span {
834
+
779
- margin: 3% auto;
835
+ position:absolute;
836
+
780
-
837
+ top:0;
838
+
781
- width: 80%;
839
+ right:5px;
840
+
841
+ color:#ccc;
842
+
843
+ font-size:13px;
844
+
845
+ }
846
+
847
+
848
+
849
+ .answer {
782
850
 
783
851
  font-size: 12px;
784
852
 
785
- color: #b3aeb5;
853
+ padding: 5px 0px;
854
+
855
+ margin-bottom: 15px;
786
856
 
787
857
  display: none;
788
858
 
@@ -790,98 +860,6 @@
790
860
 
791
861
 
792
862
 
793
- .text-active {
794
-
795
- display: block;
796
-
797
- }
798
-
799
-
800
-
801
- /*faq wrapper*/
802
-
803
- .faq-wrapper {
804
-
805
- background-color: #e6ecf0;
806
-
807
- text-align: center;
808
-
809
- padding-bottom: 80px;
810
-
811
- color: #5f5d60;
812
-
813
- }
814
-
815
-
816
-
817
- #faq-list {
818
-
819
- width: 500px;
820
-
821
- margin: 0 auto;
822
-
823
- padding: 0;
824
-
825
- list-style: none;
826
-
827
- }
828
-
829
-
830
-
831
- .faq-list-item {
832
-
833
- margin:10px;
834
-
835
- border-bottom:1px solid #ccc;
836
-
837
- position:relative;
838
-
839
- cursor:pointer;
840
-
841
- text-align: left;
842
-
843
- }
844
-
845
-
846
-
847
- .faq-list-item h3 {
848
-
849
- font-size: 14px;
850
-
851
- }
852
-
853
-
854
-
855
- .faq-list-item span {
856
-
857
- position:absolute;
858
-
859
- top:0;
860
-
861
- right:5px;
862
-
863
- color:#ccc;
864
-
865
- font-size:13px;
866
-
867
- }
868
-
869
-
870
-
871
- .answer {
872
-
873
- font-size: 12px;
874
-
875
- padding: 5px 0px;
876
-
877
- margin-bottom: 15px;
878
-
879
- display: none;
880
-
881
- }
882
-
883
-
884
-
885
863
 
886
864
 
887
865
 

1

自分で調べたリンク先を追加

2019/05/31 04:40

投稿

Akaho
Akaho

スコア39

test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,12 @@
16
16
 
17
17
 
18
18
 
19
+ 調べた事、試したこと
20
+
21
+ [リンク内容](https://syncer.jp/accordion-content)
22
+
23
+ 今回の課題には使えなかった。
24
+
19
25
  ```javascript
20
26
 
21
27
  コード