teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

8

.

2020/02/13 02:58

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -47,14 +47,14 @@
47
47
 
48
48
 
49
49
  <!--見本のコード-->
50
+ <div class="top-wrapper">
50
- <div class="container">
51
+ <div class="container">
51
- <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
52
+ <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
52
- <p>Progateはオンラインプログラミング学習サービスです。
53
- <br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
53
+ <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
54
- </p>
55
- <a href="#" class="btn signup">新規登録はこちら</a>
54
+ <a href="#" class="btn signup">新規登録はこちら</a>
56
- <p>or</p>
55
+ <p>or</p>
57
- <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
56
+ <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
58
- <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
57
+ <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
59
- </div>
58
+ </div>
59
+ </div>
60
60
  ```

7

.

2020/02/13 02:58

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -26,15 +26,27 @@
26
26
  ```
27
27
 
28
28
  ```HTML
29
+ <!-- 質問者さんのこーど-->
29
- <div class= "btn wrapper">
30
+ <div class="top-wrapper">
30
- <a href ="#" class="btn signup">新規登録はこちら</a>
31
+ <div class="container">
31
- <p>or</p>
32
+ <h1>LEARN TO CODE.</h1>
32
- <a href ="#" class= "btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
33
+ <h1>LEARN TO BE CREATIVE.</h1>
33
- <a href ="#" class= "btn twitter"><span class="fa fa-twitter"></span>Twitter登録</a>
34
+ <p>Progateはオンラインプログラミング学習サービスす。</p>
35
+ <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
34
- </div>
36
+ </p>
35
37
 
38
+ <div class= "btn wrapper">
39
+ <a href ="#" class="btn signup">新規登録はこちら</a>
40
+ <p>or</p>
41
+ <a href ="#" class= "btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
42
+ <a href ="#" class= "btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
43
+ </div>
44
+ </div>
45
+ </div>
46
+
36
47
 
37
48
 
49
+ <!--見本のコード-->
38
50
  <div class="container">
39
51
  <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
40
52
  <p>Progateはオンラインプログラミング学習サービスです。
@@ -43,5 +55,6 @@
43
55
  <a href="#" class="btn signup">新規登録はこちら</a>
44
56
  <p>or</p>
45
57
  <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
46
- <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a></div>
58
+ <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
59
+ </div>
47
60
  ```

6

.

2020/02/13 02:56

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -1,5 +1,5 @@
1
1
  見本のコードを写したと書かれていますが、中級編見てみたところ、
2
- 結構見本とCSSが異なります。
2
+ 結構見本とCSS、HTMLが異なります。
3
3
  下記違うところ。
4
4
 
5
5
  ```CSS
@@ -23,4 +23,25 @@
23
23
  background-color: #3b5998;
24
24
  margin-right: 10px;
25
25
  }
26
+ ```
27
+
28
+ ```HTML
29
+ <div class= "btn wrapper">
30
+ <a href ="#" class="btn signup">新規登録はこちら</a>
31
+ <p>or</p>
32
+ <a href ="#" class= "btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
33
+ <a href ="#" class= "btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
34
+ </div>
35
+
36
+
37
+
38
+ <div class="container">
39
+ <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
40
+ <p>Progateはオンラインプログラミング学習サービスです。
41
+ <br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
42
+ </p>
43
+ <a href="#" class="btn signup">新規登録はこちら</a>
44
+ <p>or</p>
45
+ <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
46
+ <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a></div>
26
47
  ```

5

.

2020/02/13 02:54

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  見本のコードを写したと書かれていますが、中級編見てみたところ、
2
2
  結構見本とCSSが異なります。
3
- 書き違うところ。
3
+ 下記違うところ。
4
4
 
5
5
  ```CSS
6
6
  .top-wrapper h1 {

4

2020/02/13 02:50

投稿

azuapricot
azuapricot

スコア2343

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

3

.

2020/02/13 02:49

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -12,4 +12,9 @@
12
12
  opacity:0.7;
13
13
  margin-bottom:15px;
14
14
  }
15
+
16
+ .facebook {
17
+ background-color: #3b5998;
18
+ margin-right: 10px;
19
+ }
15
20
  ```

2

.

2020/02/13 02:48

投稿

azuapricot
azuapricot

スコア2343

answer CHANGED
@@ -2,6 +2,11 @@
2
2
  結構見本とCSSが異なります。
3
3
 
4
4
  ```CSS
5
+ .signup {
6
+ background-color: #239b76;
7
+ margin-top: 15px;
8
+ margin-bottom: 15px;
9
+ }
5
10
 
6
11
  .top-wrapper p {
7
12
  opacity:0.7;

1

.

2020/02/13 02:46

投稿

azuapricot
azuapricot

スコア2343

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