teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTMLに関する質問Progate 中級道場1.トップ部分を作ろう　答えのコード書きうつし、見た目の調整をしましたが何が違うかわかりません

編集履歴

回答編集履歴

8

.

2020/02/13 02:58

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -96,24 +96,24 @@
96
96
 
97
97
  <!--見本のコード-->
98
98
 
99
- <div class="container">
99
+ <div class="top-wrapper">
100
100
 
101
- <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
101
+ <div class="container">
102
102
 
103
- <p>Progateはオンラインプログラミング学習サービスです。
103
+ <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
104
104
 
105
- <br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
105
+ <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
106
106
 
107
- </p>
107
+ <a href="#" class="btn signup">新規登録はこちら</a>
108
108
 
109
- <a href="#" class="btn signup">新規登録はこちら</a>
109
+ <p>or</p>
110
110
 
111
- <p>or</p>
111
+ <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
112
112
 
113
- <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
113
+ <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
114
114
 
115
- <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
115
+ </div>
116
116
 
117
- </div>
117
+ </div>
118
118
 
119
119
  ```

7

.

2020/02/13 02:58

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -54,23 +54,47 @@
54
54
 
55
55
  ```HTML
56
56
 
57
- <div class= "btn wrapper">
57
+ <!-- 質問者さんのこーど-->
58
58
 
59
- <a href ="#" class="btn signup">新規登録はこちら</a>
59
+ <div class="top-wrapper">
60
60
 
61
- <p>or</p>
61
+ <div class="container">
62
62
 
63
- <a href ="#" class= "btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
63
+ <h1>LEARN TO CODE.</h1>
64
64
 
65
- <a href ="#" class= "btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
65
+ <h1>LEARN TO BE CREATIVE.</h1>
66
66
 
67
+ <p>Progateはオンラインプログラミング学習サービスです。</p>
68
+
69
+ <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
70
+
71
+ </p>
72
+
73
+
74
+
75
+ <div class= "btn wrapper">
76
+
77
+ <a href ="#" class="btn signup">新規登録はこちら</a>
78
+
79
+ <p>or</p>
80
+
81
+ <a href ="#" class= "btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
82
+
83
+ <a href ="#" class= "btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
84
+
67
- </div>
85
+ </div>
86
+
87
+ </div>
88
+
89
+ </div>
68
90
 
69
91
 
70
92
 
71
93
  ↓
72
94
 
73
95
 
96
+
97
+ <!--見本のコード-->
74
98
 
75
99
  <div class="container">
76
100
 
@@ -88,6 +112,8 @@
88
112
 
89
113
  <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
90
114
 
91
- <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a></div>
115
+ <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
116
+
117
+ </div>
92
118
 
93
119
  ```

6

.

2020/02/13 02:56

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -1,6 +1,6 @@
1
1
  見本のコードを写したと書かれていますが、中級編見てみたところ、
2
2
 
3
- 結構見本とCSSが異なります。
3
+ 結構見本とCSS、HTMLが異なります。
4
4
 
5
5
  下記違うところ。
6
6
 
@@ -49,3 +49,45 @@
49
49
  }
50
50
 
51
51
  ```
52
+
53
+
54
+
55
+ ```HTML
56
+
57
+ <div class= "btn wrapper">
58
+
59
+ <a href ="#" class="btn signup">新規登録はこちら</a>
60
+
61
+ <p>or</p>
62
+
63
+ <a href ="#" class= "btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
64
+
65
+ <a href ="#" class= "btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
66
+
67
+ </div>
68
+
69
+
70
+
71
+ ↓
72
+
73
+
74
+
75
+ <div class="container">
76
+
77
+ <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
78
+
79
+ <p>Progateはオンラインプログラミング学習サービスです。
80
+
81
+ <br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
82
+
83
+ </p>
84
+
85
+ <a href="#" class="btn signup">新規登録はこちら</a>
86
+
87
+ <p>or</p>
88
+
89
+ <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
90
+
91
+ <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a></div>
92
+
93
+ ```

5

.

2020/02/13 02:54

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  結構見本とCSSが異なります。
4
4
 
5
- 書き違うところ。
5
+ 下記違うところ。
6
6
 
7
7
 
8
8
 

4

。

2020/02/13 02:50

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -1,18 +1,30 @@
1
1
  見本のコードを写したと書かれていますが、中級編見てみたところ、
2
2
 
3
3
  結構見本とCSSが異なります。
4
+
5
+ 書き違うところ。
4
6
 
5
7
 
6
8
 
7
9
  ```CSS
8
10
 
11
+ .top-wrapper h1 {
12
+
13
+ opacity: 0.7;
14
+
15
+ font-size: 45px;
16
+
17
+ letter-spacing: 5px;
18
+
19
+ }
20
+
9
21
  .signup {
10
22
 
11
- background-color: #239b76;
23
+ background-color: #239b76;
12
24
 
13
- margin-top: 15px;
25
+ margin-top: 15px;
14
26
 
15
- margin-bottom: 15px;
27
+ margin-bottom: 15px;
16
28
 
17
29
  }
18
30
 
@@ -20,9 +32,9 @@
20
32
 
21
33
  .top-wrapper p {
22
34
 
23
- opacity:0.7;
35
+ opacity:0.7;
24
36
 
25
- margin-bottom:15px;
37
+ margin-bottom:15px;
26
38
 
27
39
  }
28
40
 
@@ -30,9 +42,9 @@
30
42
 
31
43
  .facebook {
32
44
 
33
- background-color: #3b5998;
45
+ background-color: #3b5998;
34
46
 
35
- margin-right: 10px;
47
+ margin-right: 10px;
36
48
 
37
49
  }
38
50
 

3

.

2020/02/13 02:49

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -26,4 +26,14 @@
26
26
 
27
27
  }
28
28
 
29
+
30
+
31
+ .facebook {
32
+
33
+ background-color: #3b5998;
34
+
35
+ margin-right: 10px;
36
+
37
+ }
38
+
29
39
  ```

2

.

2020/02/13 02:48

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -5,6 +5,16 @@
5
5
 
6
6
 
7
7
  ```CSS
8
+
9
+ .signup {
10
+
11
+ background-color: #239b76;
12
+
13
+ margin-top: 15px;
14
+
15
+ margin-bottom: 15px;
16
+
17
+ }
8
18
 
9
19
 
10
20
 

1

.

2020/02/13 02:46

投稿

azuapricot
azuapricot

スコア2341

test CHANGED
@@ -1,14 +1,18 @@
1
1
  見本のコードを写したと書かれていますが、中級編見てみたところ、
2
2
 
3
- 下記クラスのmargin-topが違います。ここ修正しても変わりませんか？
3
+ 結構見本とCSSが異なります。
4
4
 
5
5
 
6
6
 
7
7
  ```CSS
8
8
 
9
- .signup{
10
9
 
10
+
11
+ .top-wrapper p {
12
+
13
+ opacity:0.7;
14
+
11
- margin-top: 18px;
15
+ margin-bottom:15px;
12
16
 
13
17
  }
14
18