質問編集履歴

1

追記を入れた。

2019/05/17 04:15

投稿

Akaho
Akaho

スコア39

test CHANGED
File without changes
test CHANGED
@@ -237,3 +237,151 @@
237
237
  }
238
238
 
239
239
  ```
240
+
241
+
242
+
243
+ 追記
244
+
245
+ flexでレイアウトをせずに、paddingとmarginの調整をすると思った通りにレイアウトできた。
246
+
247
+ ```CSS
248
+
249
+ コード
250
+
251
+ /* CSSのリセット(消さないでください) */
252
+
253
+ html, body,
254
+
255
+ ul, ol, li,
256
+
257
+ h1, h2, h3, h4, h5, h6, p, div {
258
+
259
+ margin: 0;
260
+
261
+ padding: 0;
262
+
263
+ }
264
+
265
+
266
+
267
+ body {
268
+
269
+ font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
270
+
271
+ }
272
+
273
+
274
+
275
+ li {
276
+
277
+ list-style: none;
278
+
279
+ }
280
+
281
+
282
+
283
+ a {
284
+
285
+ text-decoration: none;
286
+
287
+ }
288
+
289
+
290
+
291
+ /* ここからCSSを書いていきましょう */
292
+
293
+ .top-wrapper{
294
+
295
+ height:580px;
296
+
297
+ width:1280px;
298
+
299
+ background-image:url(https://prog-8.com/images/html/advanced/top.png);
300
+
301
+ background-size:cover;
302
+
303
+ text-align:center;
304
+
305
+
306
+
307
+ }
308
+
309
+ .container h1{
310
+
311
+ font-size:45px;
312
+
313
+ opacity:0.7;
314
+
315
+ letter-spacing:5px;
316
+
317
+ color:white;
318
+
319
+ font-weight:bold;
320
+
321
+ padding-top:170px;
322
+
323
+ }
324
+
325
+ .container p{
326
+
327
+ font-size:16px;
328
+
329
+ margin-bottom:30px;
330
+
331
+ color:white;
332
+
333
+ opacity:0.7;
334
+
335
+ }
336
+
337
+ .btn{
338
+
339
+ padding:8px 24px;
340
+
341
+ color:white;
342
+
343
+ opacity:0.8;
344
+
345
+ border-radius:4px;
346
+
347
+ }
348
+
349
+
350
+
351
+
352
+
353
+
354
+
355
+ .sign-up{
356
+
357
+ background-color:#239b76;
358
+
359
+ margin:30px 0px 15px 0;
360
+
361
+
362
+
363
+
364
+
365
+ }
366
+
367
+ .facebook{
368
+
369
+ background:#3b5998;
370
+
371
+ margin-right:10px;
372
+
373
+ margin-bottom:100px;
374
+
375
+ margin-top:15px;
376
+
377
+ }
378
+
379
+ .twitter{
380
+
381
+ background:#55acee;
382
+
383
+ }
384
+
385
+ ```
386
+
387
+ ![イメージ説明](f4423f591cc40e1d7f888cd9f1062b76.png)