質問編集履歴

3

回答CSSを追加

2019/04/13 05:25

投稿

knight1220
knight1220

スコア23

test CHANGED
File without changes
test CHANGED
@@ -634,7 +634,7 @@
634
634
 
635
635
  }
636
636
 
637
-
637
+ ```
638
638
 
639
639
  ```CSS
640
640
 

2

回答CSSを追加

2019/04/13 05:24

投稿

knight1220
knight1220

スコア23

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,3 @@
1
- ### 前提・実現したいこと
2
-
3
-
4
-
5
1
  HTML&CSSをprogateで学習中です。
6
2
 
7
3
  道場コース上級の2でtext-align:left;文字を左詰めにするのですがtext-align:left;がどこまで影響するのかがわかりません。
@@ -34,11 +30,9 @@
34
30
 
35
31
 
36
32
 
37
- ### 該当のソースコード
33
+
38
-
39
-
40
-
34
+
41
- ```ここに言語名を入力
35
+ ```HTML
42
36
 
43
37
  <!DOCTYPE html>
44
38
 
@@ -231,3 +225,493 @@
231
225
  </body>
232
226
 
233
227
  </html>
228
+
229
+ ```
230
+
231
+ ```CSS
232
+
233
+
234
+
235
+ * {
236
+
237
+ box-sizing: border-box;
238
+
239
+ }
240
+
241
+
242
+
243
+ body {
244
+
245
+ margin: 0;
246
+
247
+ font-family: "Hiragino Kaku Gothic ProN";
248
+
249
+ }
250
+
251
+
252
+
253
+ a {
254
+
255
+ text-decoration: none;
256
+
257
+ }
258
+
259
+
260
+
261
+ .container {
262
+
263
+ max-width: 1170px;
264
+
265
+ width: 100%;
266
+
267
+ padding: 0 15px;
268
+
269
+ margin: 0 auto;
270
+
271
+ }
272
+
273
+
274
+
275
+ .top-wrapper {
276
+
277
+ padding: 180px 0 100px 0;
278
+
279
+ background-image: url(https://prog-8.com/images/html/advanced/top.png);
280
+
281
+ background-size: cover;
282
+
283
+ color: white;
284
+
285
+ text-align: center;
286
+
287
+ }
288
+
289
+
290
+
291
+ .top-wrapper h1 {
292
+
293
+ opacity: 0.7;
294
+
295
+ font-size: 45px;
296
+
297
+ letter-spacing: 5px;
298
+
299
+ }
300
+
301
+
302
+
303
+ .top-wrapper p {
304
+
305
+ opacity: 0.7;
306
+
307
+ }
308
+
309
+
310
+
311
+ .btn-wrapper {
312
+
313
+ text-align: center;
314
+
315
+ margin: 20px 0;
316
+
317
+ }
318
+
319
+
320
+
321
+ .btn-wrapper p {
322
+
323
+ margin: 10px 0;
324
+
325
+ }
326
+
327
+
328
+
329
+ .signup {
330
+
331
+ background-color: #239b76;
332
+
333
+ }
334
+
335
+
336
+
337
+ .facebook {
338
+
339
+ background-color: #3b5998;
340
+
341
+ margin-right: 10px;
342
+
343
+ }
344
+
345
+
346
+
347
+ .twitter {
348
+
349
+ background-color: #55acee;
350
+
351
+ }
352
+
353
+
354
+
355
+ .btn {
356
+
357
+ padding: 8px 24px;
358
+
359
+ color: white;
360
+
361
+ display: inline-block;
362
+
363
+ opacity: 0.8;
364
+
365
+ border-radius: 4px;
366
+
367
+ text-align: center;
368
+
369
+ }
370
+
371
+
372
+
373
+ .btn:hover {
374
+
375
+ opacity: 1;
376
+
377
+ }
378
+
379
+
380
+
381
+ .fa {
382
+
383
+ margin-right: 5px;
384
+
385
+ }
386
+
387
+
388
+
389
+ header {
390
+
391
+ height: 65px;
392
+
393
+ width: 100%;
394
+
395
+ background-color: rgba(34, 49, 52, 0.9);
396
+
397
+ position :fixed;
398
+
399
+ top: 0;
400
+
401
+ z-index: 10;
402
+
403
+ }
404
+
405
+
406
+
407
+ .logo {
408
+
409
+ width: 124px;
410
+
411
+ margin-top: 20px;
412
+
413
+ }
414
+
415
+
416
+
417
+ .header-left {
418
+
419
+ float: left;
420
+
421
+ }
422
+
423
+
424
+
425
+ .header-right {
426
+
427
+ float: right;
428
+
429
+ margin-right: -25px;
430
+
431
+ }
432
+
433
+
434
+
435
+ .header-right a {
436
+
437
+ line-height: 65px;
438
+
439
+ padding: 0 25px;
440
+
441
+ color: white;
442
+
443
+ display: block;
444
+
445
+ float: left;
446
+
447
+ transition: all 0.5s;
448
+
449
+ }
450
+
451
+
452
+
453
+ .header-right a:hover {
454
+
455
+ background-color: rgba(255, 255, 255, 0.3);
456
+
457
+ }
458
+
459
+
460
+
461
+ .lesson-wrapper {
462
+
463
+ padding-bottom: 80px;
464
+
465
+ padding-left: 5%;
466
+
467
+ padding-right: 5%;
468
+
469
+ background-color: #f7f7f7;
470
+
471
+ text-align: center;
472
+
473
+ }
474
+
475
+
476
+
477
+ .heading {
478
+
479
+ padding-top: 80px;
480
+
481
+ padding-bottom: 50px;
482
+
483
+ color: #5f5d60;
484
+
485
+ }
486
+
487
+
488
+
489
+ .heading h2 {
490
+
491
+ font-weight: normal;
492
+
493
+ }
494
+
495
+
496
+
497
+ .lesson {
498
+
499
+ float: left;
500
+
501
+ width: 25%;
502
+
503
+ }
504
+
505
+
506
+
507
+ .lesson-icon {
508
+
509
+ position: relative;
510
+
511
+ }
512
+
513
+
514
+
515
+ .lesson-icon p {
516
+
517
+ position: absolute;
518
+
519
+ top: 44%;
520
+
521
+ width: 100%;
522
+
523
+ color: white;
524
+
525
+ }
526
+
527
+
528
+
529
+ .text-contents {
530
+
531
+ width: 80%;
532
+
533
+ display: inline-block;
534
+
535
+ margin-top: 15px;
536
+
537
+ font-size: 13px;
538
+
539
+ color: #b3aeb5;
540
+
541
+ }
542
+
543
+
544
+
545
+ .heading h3 {
546
+
547
+ font-weight: normal;
548
+
549
+ }
550
+
551
+
552
+
553
+ .message-wrapper {
554
+
555
+ border-bottom: 1px solid #eee;
556
+
557
+ padding-bottom: 80px;
558
+
559
+ text-align: center;
560
+
561
+ }
562
+
563
+
564
+
565
+ .message {
566
+
567
+ padding: 15px 40px;
568
+
569
+ background-color: #5dca88;
570
+
571
+ cursor: pointer;
572
+
573
+ box-shadow: 0 7px #1a7940;
574
+
575
+ }
576
+
577
+
578
+
579
+ .message:active {
580
+
581
+ position: relative;
582
+
583
+ top: 7px;
584
+
585
+ box-shadow: none;
586
+
587
+ }
588
+
589
+
590
+
591
+ footer img {
592
+
593
+ width: 125px;
594
+
595
+ }
596
+
597
+
598
+
599
+ footer p {
600
+
601
+ color: #b3aeb5;
602
+
603
+ font-size: 12px;
604
+
605
+ }
606
+
607
+
608
+
609
+ footer {
610
+
611
+ padding-top: 30px;
612
+
613
+ padding-bottom: 20px;
614
+
615
+ }
616
+
617
+
618
+
619
+ /* -------------------- CSSはここから追加していきましょう! -------------------- */
620
+
621
+ .menu-icon {
622
+
623
+ color: white;
624
+
625
+ float: right;
626
+
627
+ font-size: 25px;
628
+
629
+ padding: 21px 0;
630
+
631
+ /* デフォルトではメニューアイコンは非表示に */
632
+
633
+ display: none;
634
+
635
+ }
636
+
637
+
638
+
639
+ ```CSS
640
+
641
+ /* タブレット向けレイアウト */
642
+
643
+ @media all and (max-width: 1000px) {
644
+
645
+ .top-wrapper h1 {
646
+
647
+ font-size: 32px;
648
+
649
+ }
650
+
651
+ }
652
+
653
+
654
+
655
+ /* モバイル向けレイアウト */
656
+
657
+ @media all and (max-width: 670px) {
658
+
659
+ .header-right {
660
+
661
+ display: none;
662
+
663
+ }
664
+
665
+
666
+
667
+ .menu-icon {
668
+
669
+ display: block;
670
+
671
+ }
672
+
673
+
674
+
675
+ .top-wrapper .btn {
676
+
677
+ width: 100%;
678
+
679
+ }
680
+
681
+
682
+
683
+ .facebook {
684
+
685
+ margin-bottom: 10px;
686
+
687
+ }
688
+
689
+
690
+
691
+ .top-wrapper {
692
+
693
+ text-align: left;
694
+
695
+ }
696
+
697
+
698
+
699
+ .top-wrapper h1 {
700
+
701
+ font-size: 24px;
702
+
703
+ }
704
+
705
+
706
+
707
+ .top-wrapper p {
708
+
709
+ font-size: 14px;
710
+
711
+ }
712
+
713
+ }
714
+
715
+ ```
716
+
717
+ ```### 前提・実現したいこと

1

状況説明の追加&全体HTMLの追加

2019/04/13 05:18

投稿

knight1220
knight1220

スコア23

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  HTML&CSSをprogateで学習中です。
6
6
 
7
- 道場コース上級の2でtext-align:left;文字を左詰めにするのですがtext:align:left;がどこまで影響するのかがわかりません。
7
+ 道場コース上級の2でtext-align:left;文字を左詰めにするのですがtext-align:left;がどこまで影響するのかがわかりません。
8
8
 
9
9
  回答のCSSでは.top-wrapper{
10
10
 
@@ -16,7 +16,23 @@
16
16
 
17
17
  説明がわかりにくく申し訳ないのですがわかる方がいらっしゃいましたら教えていただけると幸いです。
18
18
 
19
-
19
+
20
+
21
+
22
+
23
+
24
+
25
+ 恐らく私の考え方が間違っているのですが、
26
+
27
+ "top-wrapper"の中に"container"がありその中に"btn-wrapper"が入っている。
28
+
29
+ この状態で"top-wrapper"にtext-align:leftを記述すると中に入っている"container"と"btn-wrapper"に影響すると認識しています。
30
+
31
+ そのため、"btn-wrapper"の外にある<h1>LEARN TO CODE.</h1>,<h1>LEARN TO BE CREATIVE.</h1>, <p>Progateはオンラインプログラミング学習サービスです。</p>,<p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>のそれぞれにtext-algin:leftを記述するしか方法がないと思っていました。
32
+
33
+ 実際に回答を見ると"top-wrapper"に記述しても中にある"btn-wrapper"の<p>or</p>は左詰めにならなかったため、どこまで左詰めが影響するのかがわからないな、と思い質問させていただきました。
34
+
35
+
20
36
 
21
37
  ### 該当のソースコード
22
38
 
@@ -24,7 +40,61 @@
24
40
 
25
41
  ```ここに言語名を入力
26
42
 
43
+ <!DOCTYPE html>
44
+
45
+ <html>
46
+
47
+ <head>
48
+
49
+ <meta charset="utf-8">
50
+
51
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
52
+
53
+ <title>Progate</title>
54
+
55
+ <link rel="stylesheet" href="stylesheet.css">
56
+
57
+ <link rel="stylesheet" href="responsive.css">
58
+
59
+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
60
+
61
+ </head>
62
+
63
+ <body>
64
+
65
+ <header>
66
+
67
+ <div class="container">
68
+
69
+ <div class="header-left">
70
+
71
+ <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
72
+
73
+ </div>
74
+
75
+
76
+
77
+ <!-- モバイル用のヘッダーのメニューアイコン -->
78
+
79
+ <span class="fa fa-bars menu-icon"></span>
80
+
81
+
82
+
83
+ <div class="header-right">
84
+
85
+ <a href="#">レッスン</a>
86
+
87
+ <a href="#">新規登録</a>
88
+
89
+ <a href="#" class="login">ログイン</a>
90
+
91
+ </div>
92
+
93
+ </div>
94
+
95
+ </header>
96
+
27
- <div class="top-wrapper">
97
+ <div class="top-wrapper">
28
98
 
29
99
  <div class="container">
30
100
 
@@ -52,4 +122,112 @@
52
122
 
53
123
  </div>
54
124
 
125
+ <div class="lesson-wrapper">
126
+
127
+ <div class="container">
128
+
129
+ <div class="heading">
130
+
131
+ <h2>Learn Where to Get Started!</h2>
132
+
133
+ </div>
134
+
135
+ <div class="lessons">
136
+
137
+ <div class="lesson">
138
+
139
+ <div class="lesson-icon">
140
+
141
+ <img src="https://prog-8.com/images/html/advanced/html.png">
142
+
143
+ <p>HTML & CSS</p>
144
+
145
+ </div>
146
+
147
+ <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
148
+
149
+ </div>
150
+
151
+ <div class="lesson">
152
+
153
+ <div class="lesson-icon">
154
+
155
+ <img src="https://prog-8.com/images/html/advanced/jQuery.png">
156
+
157
+ <p>jQuery</p>
158
+
159
+ </div>
160
+
161
+ <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p>
162
+
163
+ </div>
164
+
165
+ <div class="lesson">
166
+
167
+ <div class="lesson-icon">
168
+
169
+ <img src="https://prog-8.com/images/html/advanced/ruby.png">
170
+
171
+ <p>Ruby</p>
172
+
173
+ </div>
174
+
175
+ <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
176
+
177
+ </div>
178
+
179
+ <div class="lesson">
180
+
181
+ <div class="lesson-icon">
182
+
183
+ <img src="https://prog-8.com/images/html/advanced/php.png">
184
+
185
+ <p>PHP</p>
186
+
187
+ </div>
188
+
189
+ <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
190
+
191
+ </div>
192
+
193
+ </div>
194
+
195
+
196
+
197
+ </div>
198
+
199
+ </div>
200
+
201
+ <div class="message-wrapper">
202
+
203
+ <div class="container">
204
+
205
+ <div class="heading">
206
+
207
+ <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
208
+
209
+ <h3>Let's learn to code, learn to be creative!</h3>
210
+
211
+ </div>
212
+
213
+ <span class="btn message">さっそく開発する</span>
214
+
215
+ </div>
216
+
217
+ </div>
218
+
55
- ```
219
+ <footer>
220
+
221
+ <div class="container">
222
+
223
+ <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
224
+
225
+ <p>Learn to code, learn to be creative.</p>
226
+
227
+ </div>
228
+
229
+ </footer>
230
+
231
+ </body>
232
+
233
+ </html>