質問編集履歴

2

コードブロックを追加しました

2018/03/11 14:38

投稿

kidaer
kidaer

スコア31

test CHANGED
File without changes
test CHANGED
@@ -36,6 +36,10 @@
36
36
 
37
37
 
38
38
 
39
+
40
+
41
+ ```HTML
42
+
39
43
  <!DOCTYPE html>
40
44
 
41
45
  <html lang="ja">
@@ -254,12 +258,16 @@
254
258
 
255
259
  </html>
256
260
 
261
+ ```
262
+
257
263
 
258
264
 
259
265
  【stylesheet.css】
260
266
 
261
267
 
262
268
 
269
+ ```CSS
270
+
263
271
  /*------- ここから共通のCSS --------*/
264
272
 
265
273
  html, body,
@@ -604,7 +612,7 @@
604
612
 
605
613
  }
606
614
 
607
-
615
+ ```
608
616
 
609
617
 
610
618
 

1

内容を修正しました。

2018/03/11 14:38

投稿

kidaer
kidaer

スコア31

test CHANGED
File without changes
test CHANGED
@@ -1,17 +1,615 @@
1
- Progate HTML&CSSの実戦コースです
2
-
3
-
4
-
5
- ![イメージ説明](c30f8ab0677ef7f5ba6bd3e81cc3f513.png)
6
-
7
-
8
-
9
- この状態から進めません。
10
-
11
- 修正しようにも何が悪いのかよくわからず……。
12
-
13
-
14
-
15
- 何かわか方教えてください。
1
+ 質問文を修正しました。
2
+
3
+ Progateの実践コースで
4
+
5
+
6
+
7
+ このような状態から進めず困っています。
8
+
9
+ ●イメージ1
10
+
11
+ ![イメージ説明](f154dad66792994c0a651392bc9e0c23.png)
12
+
13
+
14
+
15
+ 問題は仕様書とお手本を見て自分でもプログラムを組んでみう内容です
16
+
17
+ ●仕様書
18
+
19
+ ![![イメージ説明](ab0d2477a2e1c7e3a32011b7a2ee7907.png)](34951c1dab575085517aba53733ddfc7.png)
20
+
21
+ ![イメージ説明](56205deb26458434deaa9dd2ce8ad46b.png)
22
+
23
+
24
+
25
+ コードを組み上げて判定ボタンを押します。
26
+
27
+ 何か間違っているとイメージ1の図が出て赤い枠内部分の修正指示が出ます。
28
+
29
+
30
+
31
+ ●プログラム
32
+
33
+
34
+
35
+ 【index.html】
36
+
37
+
38
+
39
+ <!DOCTYPE html>
40
+
41
+ <html lang="ja">
42
+
43
+ <head>
44
+
45
+ <!-- head内に変更を加えないでください-->
46
+
47
+ <meta charset="utf-8">
48
+
49
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
50
+
51
+ <title>0からWEBサイトを作ってみよう</title>
52
+
53
+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
54
+
55
+ <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Dosis:300,400,500,600,700">
56
+
57
+ <link rel="stylesheet" href="stylesheet.css">
58
+
59
+ </head>
60
+
61
+ <body>
62
+
63
+ <!-- ここから書き始めてください -->
64
+
65
+ <!-- ヘッダー -->
66
+
67
+ <!-- ヘッダー -->
68
+
69
+ <header>
70
+
71
+ <div class="Hleft">
72
+
73
+ <p>Progate School</p>
74
+
75
+ </div>
76
+
77
+ <div class="Hright">
78
+
79
+ <a class="Hgaku" href="#">学習言語</a>
80
+
81
+ <a href="#">特徴</a>
82
+
83
+ <a href="#">料金</a>
84
+
85
+ <a href="#">コラム</a>
86
+
87
+ <a href="#">お問い合わせ</a>
88
+
89
+ </div>
90
+
91
+ </header>
92
+
93
+ <!-- メイン -->
94
+
95
+ <!--メインー -->
96
+
97
+ <div class="main">
98
+
99
+ <div class="main2">
100
+
101
+ <p class="mainM1">プログラミングは人生を変える</p>
102
+
103
+ <p class="mainM2">プログラミングを学んで、新しい自分を見つけよう。</p>
104
+
105
+ <a href="#">もっと詳しく</a>
106
+
107
+ </div>
108
+
109
+ </div>
110
+
111
+ <!-- ボックス -->
112
+
113
+ <!-- ボックス -->
114
+
115
+
116
+
117
+ <div class="boxlist">
118
+
119
+ <p>学習する言語</p>
120
+
121
+ <!-- ボックス1 -->
122
+
123
+ <div class="boxs">
124
+
125
+ <div class="box1">
126
+
127
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/html.png">
128
+
129
+ <h3>HTML & CSS</h3>
130
+
131
+ <p>Webページの<br>
132
+
133
+ 見た目をつくる言語</p>
134
+
135
+ </div>
136
+
137
+ </div>
138
+
139
+ <!-- ボックス2 -->
140
+
141
+ <div class="boxs">
142
+
143
+ <div class="box3">
144
+
145
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/jquery.png">
146
+
147
+ <h3>jQuery</h3>
148
+
149
+ <p>効果やアニメーションを実装できる<br>
150
+
151
+ Javascriptライブラリ</p>
152
+
153
+ </div>
154
+
155
+ </div>
156
+
157
+ <!-- ボックス3 -->
158
+
159
+ <div class="boxs">
160
+
161
+ <div class="box1">
162
+
163
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/js.png">
164
+
165
+ <h3>Javascript</h3>
166
+
167
+ <p>動的なウェブサイト構築に用いる<br>
168
+
169
+ プログラミング言語</p>
170
+
171
+ </div>
172
+
173
+ </div>
174
+
175
+ <!-- ボックス4 -->
176
+
177
+ <div class="boxs">
178
+
179
+ <div class="box4 box3">
180
+
181
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/git.png">
182
+
183
+ <h3>Git</h3>
184
+
185
+ <p>ソースコードのバージョン管理、<br>
186
+
187
+ 共同開発を可能にするツール</p>
188
+
189
+ </div>
190
+
191
+ </div>
192
+
193
+ </div>
194
+
195
+ <!-- メイン2 -->
196
+
197
+ <!-- メイン2 -->
198
+
199
+ <div class="main22">
200
+
201
+ <p>特徴</p>
202
+
203
+ <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/mac_code.png">
204
+
205
+ </div>
206
+
207
+
208
+
209
+ <div class="M2block">
210
+
211
+ <!--説明1 -->
212
+
213
+ <div class="M2setumei MS1">
214
+
215
+ <p class="M2Bmidasi">① ProgateでWEB開発の基礎知識を身につけよう</p>
216
+
217
+ <p class="M2Betuei">Progateで各コースをクリアして基礎知識を身につけましょう。それぞれ2周することによって知識を定着させます。</p>
218
+
219
+ </div>
220
+
221
+ <!--説明2 -->
222
+
223
+ <div class="M2setumei MS1">
224
+
225
+ <p class="M2Bmidasi">② Progateの道場で知識を習得しよう</p>
226
+
227
+ <p class="M2Betuei">Progateのコースで基礎知識を身につけたら、実践的な演習をこなしていきましょう。また道場では更に発展的な学習もしていきます。</p>
228
+
229
+ </div>
230
+
231
+ <!--説明3 -->
232
+
233
+ <div class="M2setumei MS1">
234
+
235
+ <p class="M2Bmidasi">③ 実際にプロダクトを作ってみよう</p>
236
+
237
+ <p class="M2Betuei">Progateで実践的な力を身につけたら自分で1つのプロダクトを作ってみましょう。自分で1から作ってみると、意外に理解できていないことに気づくと思います。 バグを修正しながらプロダクトを完成させることで、エンジニアとしての力を磨きましょう。</p>
238
+
239
+ </div>
240
+
241
+ <!--説明4 -->
242
+
243
+ <div class="M2setumei MS1">
244
+
245
+ <p class="M2Bmidasi">④ エンジニアインターンを体験しよう</p>
246
+
247
+ <p class="M2Betuei">実際に培ったスキルをインターンを通じて仕事として使ってみましょう。会社のエンジニアとともに仕事をしていくことによって、さらなるスキルアップを目指せるはずです。</p>
248
+
249
+ </div>
250
+
251
+ </div>
252
+
253
+ </body>
254
+
255
+ </html>
256
+
257
+
258
+
259
+ 【stylesheet.css】
260
+
261
+
262
+
263
+ /*------- ここから共通のCSS --------*/
264
+
265
+ html, body,
266
+
267
+ ul, ol, li,
268
+
269
+ h1, h2, h3, h4, h5, h6, p,
270
+
271
+ form, input, div {
272
+
273
+ margin: 0;
274
+
275
+ padding: 0;
276
+
277
+ }
278
+
279
+
280
+
281
+ li {
282
+
283
+ list-style: none;
284
+
285
+ }
286
+
287
+
288
+
289
+ a {
290
+
291
+ text-decoration: none;
292
+
293
+ }
294
+
295
+
296
+
297
+ body {
298
+
299
+ -webkit-font-smoothing: antialiased;
300
+
301
+ }
302
+
303
+
304
+
305
+ /*------- ここまで共通のCSS --------*/
306
+
307
+ /*------- ヘッダー --------*/
308
+
309
+ /*------- ヘッダー --------*/
310
+
311
+
312
+
313
+ header {
314
+
315
+ height: 50px;
316
+
317
+ background-color: white;
318
+
319
+ z-index: 10;
320
+
321
+ position: fixed;
322
+
323
+ width: 100%;
324
+
325
+ }
326
+
327
+ .Hleft p {
328
+
329
+ color: #777;
330
+
331
+ padding: 20px 50px;
332
+
333
+ font-size: 20px;
334
+
335
+ float: left;
336
+
337
+ }
338
+
339
+ .Hright {
340
+
341
+ float: right;
342
+
343
+ padding-top: 20px;
344
+
345
+ padding-right: 70px;
346
+
347
+ }
348
+
349
+ .Hright a {
350
+
351
+ padding-left: 10px;
352
+
353
+ color: #323a45;
354
+
355
+ font-weight: bold;
356
+
357
+ font-size: 14px;
358
+
359
+ transition: all 0.5s;
360
+
361
+ }
362
+
363
+ .Hright a:hover {
364
+
365
+ color: #0dc0c0;
366
+
367
+ }
368
+
369
+
370
+
371
+ /*------- メイン --------*/
372
+
373
+ /*------- メイン --------*/
374
+
375
+
376
+
377
+ .main {
378
+
379
+ background-image: URL(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/top.jpg);
380
+
381
+ background-size: cover;
382
+
383
+ text-align: center;
384
+
385
+
386
+
387
+ }
388
+
389
+ .main2 {
390
+
391
+ background-color: rgba(0,0,0,0.6);
392
+
393
+ padding-bottom: 120px;
394
+
395
+ }
396
+
397
+ .mainM1 {
398
+
399
+ font-size: 48px;
400
+
401
+ color: white;
402
+
403
+ padding-top: 230px;
404
+
405
+ }
406
+
407
+ .mainM2 {
408
+
409
+ font-size: 18px;
410
+
411
+ padding-top: 30px;
412
+
413
+ padding-bottom: 40px;
414
+
415
+ color: rgba(255,255,255,0.8);
416
+
417
+ }
418
+
419
+ .main2 a {
420
+
421
+ display: inline-block;
422
+
423
+ padding: 10px 20px;
424
+
425
+ border: 1px solid rgba(250,250,250,0.15);
426
+
427
+ background-color: rgba(250,250,250,0.06);
428
+
429
+ color: rgba(255,255,255,0.8);
430
+
431
+ margin-bottom: 20px;
432
+
433
+ font-size: 20px;
434
+
435
+ font-weight: bold;
436
+
437
+ transition: all 0.5s;
438
+
439
+ margin-top: 10px;
440
+
441
+
442
+
443
+ }
444
+
445
+ .main2 a:hover {
446
+
447
+ border: 1px solid rgba(250,250,250,5);
448
+
449
+ }
450
+
451
+ /*------- ボックス --------*/
452
+
453
+ /*------- ボックス --------*/
454
+
455
+
456
+
457
+ .boxlist {
458
+
459
+ width: 60%;
460
+
461
+ height: 500px;
462
+
463
+ padding-top: 80px;
464
+
465
+ margin: 0 auto;
466
+
467
+ text-align: center;
468
+
469
+ padding-left: 30px;
470
+
471
+
472
+
473
+ }
474
+
475
+ .boxlist p {
476
+
477
+ font-size: 32px;
478
+
479
+ color: #555;
480
+
481
+ padding-bottom: 10px;
482
+
483
+ }
484
+
485
+ .boxs {
486
+
487
+ float: left;
488
+
489
+ width: 50%;
490
+
491
+ margin-top: 40px;
492
+
493
+
494
+
495
+ }
496
+
497
+ .boxs h3 {
498
+
499
+ font-weight: normal;
500
+
501
+ padding-top: 20px;
502
+
503
+ padding-bottom: 10px;
504
+
505
+ }
506
+
507
+ .boxs p {
508
+
509
+ font-size: 14px;
510
+
511
+ color: #888;
512
+
513
+ }
514
+
515
+ .box4 {
516
+
517
+ margin-bottom: 80px;
518
+
519
+ }
520
+
521
+ .box3 {
522
+
523
+ margin-right: 60px;
524
+
525
+ }
526
+
527
+ /*------- メイン22 --------*/
528
+
529
+ /*------- メイン22--------*/
530
+
531
+
532
+
533
+ .main22 {
534
+
535
+ height: 376px;
536
+
537
+ background-color: #f4f4f4;
538
+
539
+ margin-top: 150px;
540
+
541
+ text-align: center;
542
+
543
+ margin-bottom: 130px;
544
+
545
+ }
546
+
547
+ .main22 p {
548
+
549
+ font-weight: lighter;
550
+
551
+ padding-top: 80px;
552
+
553
+ font-size: 35px;
554
+
555
+ color: #555;
556
+
557
+
558
+
559
+ }
560
+
561
+ .M2setumei {
562
+
563
+ float:left;
564
+
565
+ padding: 0 5%;
566
+
567
+ width: 40%;
568
+
569
+ }
570
+
571
+ .M2block{
572
+
573
+ margin: 0 60px;
574
+
575
+ }
576
+
577
+ .M2Bmidasi {
578
+
579
+ font-size: 18px;
580
+
581
+ padding-bottom: 9px;
582
+
583
+ color: #555;
584
+
585
+ }
586
+
587
+ .M2Betuei {
588
+
589
+ font-size: 14px;
590
+
591
+ color: #888;
592
+
593
+ }
594
+
595
+ .MS1 {
596
+
597
+ margin-bottom: 70px;
598
+
599
+ }
600
+
601
+ .MS2 {
602
+
603
+ margin-bottom: 60px;
604
+
605
+ }
606
+
607
+
608
+
609
+
610
+
611
+
612
+
613
+ 仕様書に書いてない部分は、判定して引っかかった部分をお手本を見ながらなんとなく合わせています。
16
614
 
17
615
  よろしくお願いします。