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

質問編集履歴

1

コード追加

2019/02/08 08:42

投稿

iof
iof

スコア13

title CHANGED
File without changes
body CHANGED
@@ -9,11 +9,88 @@
9
9
  この二つは何が違うのでしょうか?
10
10
 
11
11
  ### 該当のソースコード
12
+ お答えしようとしてくださった方々、申し訳ございません。
13
+ 昨日から勉強を始めた身で 右も左もわからず、藁にも縋る思いで投稿させていただいておりました。
14
+ 補足でcssを載せます。
15
+
12
16
  aタグの場合
17
+ ```
18
+ <div class="btn-wrapper">
19
+ <a href="#" class="btn signup">新規登録はこちら</a>
20
+ <p>or sign up with</p>
21
+ <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
13
- <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
22
+ <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
23
+ </div>
24
+
25
+ ```
14
26
  spanの場合
27
+ ```
28
+ <div class="message-wrapper">
29
+ <div class="container">
30
+ <div class="heading">
31
+ <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
32
+ <h3>Let's learn to code, learn to be creative!</h3>
33
+ </div>
15
- <span class="btn message"></span>
34
+ <span class="btn message">さっそく開発する</span>
35
+ </div>
36
+ </div>
37
+
38
+ ```
16
39
  ### 試したこと
17
40
 
18
41
 
19
- ### 補足情報(FW/ツールのバージョンなど)
42
+ ### 補足情報(FW/ツールのバージョンなど)
43
+
44
+ 下記がaのcssです
45
+ ```.btn-wrapper {
46
+ margin: 20px 0;
47
+ }
48
+
49
+ .btn-wrapper p {
50
+ margin: 10px 0;
51
+ }
52
+
53
+ .signup {
54
+ background-color: #239b76;
55
+ }
56
+
57
+ .facebook {
58
+ background-color: #3b5998;
59
+ margin-right: 10px;
60
+ }
61
+
62
+ .twitter {
63
+ background-color: #55acee;
64
+ }
65
+
66
+ .btn {
67
+ padding: 8px 24px;
68
+ color: white;
69
+ display: inline-block;
70
+ opacity: 0.8;
71
+ border-radius: 4px;
72
+ }
73
+
74
+ ```
75
+ 下記がspanのcssです
76
+ ```
77
+ .message-wrapper {
78
+ border-bottom: 1px solid #eee;
79
+ padding-bottom: 80px;
80
+ text-align: center;
81
+ }
82
+
83
+ .message {
84
+ padding: 15px 40px;
85
+ background-color: #5dca88;
86
+ cursor: pointer;
87
+ box-shadow: 0 7px #1a7940;
88
+ }
89
+
90
+ .message:active {
91
+ position: relative;
92
+ top: 7px;
93
+ box-shadow: none;
94
+ }
95
+
96
+ ```