質問編集履歴

1

html scssを全て記入した

2020/05/19 11:17

投稿

shu142
shu142

スコア3

test CHANGED
File without changes
test CHANGED
@@ -3,3 +3,153 @@
3
3
  このサイトのログインボタンの仕組みがよくわかりません。
4
4
 
5
5
  教えてください。
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+ ```html
14
+
15
+ <!DOCTYPE html>
16
+
17
+ <html lang="ja">
18
+
19
+ <head>
20
+
21
+ <meta charset="UTF-8">
22
+
23
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
24
+
25
+ <title>airbob</title>
26
+
27
+ <link rel='stylesheet' href='https://unpkg.com/ress/dist/ress.min.css'>
28
+
29
+ <link rel='stylesheet' href='./style.css'>
30
+
31
+ <script src="https://kit.fontawesome.com/e178190d07.js" crossorigin="anonymous"></script>
32
+
33
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
34
+
35
+ </head>
36
+
37
+ <body>
38
+
39
+ </div>
40
+
41
+ <header>
42
+
43
+ <ul>
44
+
45
+ <li><i class="fab fa-airbnb fa-2x"></i></li>
46
+
47
+ <li>概要</li>
48
+
49
+ <li>準備</li>
50
+
51
+ <li>安全</li>
52
+
53
+ <li>マネープラン</li>
54
+
55
+ <button typy="button" ><li class="login" >はじめる</li></button>
56
+
57
+ </ul>
58
+
59
+ </header>
60
+
61
+ </body>
62
+
63
+ </html>
64
+
65
+ ```
66
+
67
+
68
+
69
+ ```scss
70
+
71
+ @charset "utf-8";
72
+
73
+
74
+
75
+ header{
76
+
77
+ height: 82px;
78
+
79
+ ul{
80
+
81
+ display: flex;
82
+
83
+ align-items: center;
84
+
85
+ width: 100%;
86
+
87
+
88
+
89
+ li{
90
+
91
+ list-style: none;
92
+
93
+ padding: 0px 15px 0 15px;
94
+
95
+ font-size: 14px;
96
+
97
+ color: #484848;
98
+
99
+ font-family: inherit;
100
+
101
+ }
102
+
103
+
104
+
105
+ }
106
+
107
+
108
+
109
+ }
110
+
111
+
112
+
113
+
114
+
115
+ .fa-airbnb{
116
+
117
+ color: #008489;
118
+
119
+ padding-left: 30px;
120
+
121
+
122
+
123
+ }
124
+
125
+
126
+
127
+ li.login{
128
+
129
+ background-color: #FF385C;
130
+
131
+ color: white;
132
+
133
+ padding: 5px 15px;
134
+
135
+ border-radius: 4px;
136
+
137
+ margin-top: 26px;
138
+
139
+ margin-bottom: 26px;
140
+
141
+ display: flex;
142
+
143
+ text-decoration: none;
144
+
145
+ margin-left: auto;
146
+
147
+ margin-right: 30px;
148
+
149
+ }
150
+
151
+
152
+
153
+
154
+
155
+ ```