質問編集履歴
1
追記を入れた。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -117,4 +117,78 @@
|
|
|
117
117
|
.twitter{
|
|
118
118
|
background:#55acee;
|
|
119
119
|
}
|
|
120
|
-
```
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
追記
|
|
123
|
+
flexでレイアウトをせずに、paddingとmarginの調整をすると思った通りにレイアウトできた。
|
|
124
|
+
```CSS
|
|
125
|
+
コード
|
|
126
|
+
/* CSSのリセット（消さないでください） */
|
|
127
|
+
html, body,
|
|
128
|
+
ul, ol, li,
|
|
129
|
+
h1, h2, h3, h4, h5, h6, p, div {
|
|
130
|
+
margin: 0;
|
|
131
|
+
padding: 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
body {
|
|
135
|
+
font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
li {
|
|
139
|
+
list-style: none;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
a {
|
|
143
|
+
text-decoration: none;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* ここからCSSを書いていきましょう */
|
|
147
|
+
.top-wrapper{
|
|
148
|
+
height:580px;
|
|
149
|
+
width:1280px;
|
|
150
|
+
background-image:url(https://prog-8.com/images/html/advanced/top.png);
|
|
151
|
+
background-size:cover;
|
|
152
|
+
text-align:center;
|
|
153
|
+
|
|
154
|
+
}
|
|
155
|
+
.container h1{
|
|
156
|
+
font-size:45px;
|
|
157
|
+
opacity:0.7;
|
|
158
|
+
letter-spacing:5px;
|
|
159
|
+
color:white;
|
|
160
|
+
font-weight:bold;
|
|
161
|
+
padding-top:170px;
|
|
162
|
+
}
|
|
163
|
+
.container p{
|
|
164
|
+
font-size:16px;
|
|
165
|
+
margin-bottom:30px;
|
|
166
|
+
color:white;
|
|
167
|
+
opacity:0.7;
|
|
168
|
+
}
|
|
169
|
+
.btn{
|
|
170
|
+
padding:8px 24px;
|
|
171
|
+
color:white;
|
|
172
|
+
opacity:0.8;
|
|
173
|
+
border-radius:4px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
.sign-up{
|
|
179
|
+
background-color:#239b76;
|
|
180
|
+
margin:30px 0px 15px 0;
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
}
|
|
184
|
+
.facebook{
|
|
185
|
+
background:#3b5998;
|
|
186
|
+
margin-right:10px;
|
|
187
|
+
margin-bottom:100px;
|
|
188
|
+
margin-top:15px;
|
|
189
|
+
}
|
|
190
|
+
.twitter{
|
|
191
|
+
background:#55acee;
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|