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

質問編集履歴

2

コードを修正しました

2021/03/28 13:36

投稿

azaz_wb
azaz_wb

スコア10

title CHANGED
File without changes
body CHANGED
@@ -383,16 +383,21 @@
383
383
  }
384
384
 
385
385
  /*コンテンツ*/
386
+ .contents-wrapper {
387
+ position: relative;
388
+ }
389
+
386
390
  .contents-wrapper::after {
387
391
  content: "";
388
392
  display: block;
389
393
  position: absolute;
390
- top: 1600px;
391
394
  right: 0;
392
395
  background-color: rgba(219, 219, 219, 0.76);
393
396
  width: 100%;
394
- height: 95%;
397
+ height: 200%;
395
398
  z-index: -1;
399
+ top: -200px;
400
+ left: 0;
396
401
  }
397
402
 
398
403
  .photos {
@@ -420,12 +425,22 @@
420
425
 
421
426
  /*LATEST TOPICS*/
422
427
  .latest-topics {
428
+ background-color: #fff;
429
+ z-index: 10;
430
+ }
431
+
432
+ .latest-size {
423
433
  height: 400px;
424
434
  width: 70%;
425
435
  margin: 0 auto;
426
436
  margin-top: 140px;
427
437
  }
428
438
 
439
+ .latest-size h2 {
440
+ display: inline-block;
441
+ margin-top: 30px;
442
+ }
443
+
429
444
  .topics {
430
445
  margin-left: 500px;
431
446
  }

1

コードを修正しました

2021/03/28 13:36

投稿

azaz_wb
azaz_wb

スコア10

title CHANGED
File without changes
body CHANGED
@@ -8,8 +8,6 @@
8
8
  拙い文章ですみません。
9
9
 
10
10
  ```HTML
11
- <body>
12
- <!-- ヘッダー -->
13
11
  <header>
14
12
  <h1 class="site-title">
15
13
  <a href="./nmt.html">
@@ -95,33 +93,50 @@
95
93
 
96
94
  <section class="latest-topics">
97
95
  <h2>LATEST TOPICS</h2>
96
+ <div class="topics">
98
- <div class="topic">
97
+ <div class="topic">
99
- <p>2020.02.01</p>
98
+ <p class="date">2020.02.01</p>
100
- <p>イベントレポート「VRクリエイター座談会 〜5Gの次に来るもの〜」</p>
99
+ <p class="news">イベントレポート「VRクリエイター座談会 〜5Gの次に来るもの〜」</p>
100
+ </div>
101
+ <div class="topic">
102
+ <p class="date">2020.01.18</p>
103
+ <p class="news">プレスリリースのお知らせ DIGGIN’ RECORDS</p>
104
+ </div>
105
+ <div class="topic">
106
+ <p class="date">2020.01.01</p>
107
+ <p class="news">新年開けましておめでとうございます</p>
108
+ </div>
109
+ </div><!--topics-->
110
+ <div class="btn topic-btn">
111
+ <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
112
+ </div><!--btn-->
113
+ </section><!--latest-topics-->
114
+
115
+ <section class="contact-wrapper">
116
+ <div class="contact-size">
117
+ <h2>CONTACT</h2>
118
+ <div class="recruit">
119
+ <p>制作の依頼、取材の依頼、IRや採用についての連絡・お問い合わせはコンタクトページから承っております。<br>
120
+ まずはお気軽にご連絡ください。担当者から改めて返信いたします。</p>
121
+ <img src="img/recruit-img.png">
122
+ </div><!--recruit-->
123
+ <div class="contact-btn">
124
+ <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
101
125
  </div>
102
- <div class="topic">
126
+ </div><!--contact-size-->
103
- <p>2020.01.18</p>
104
- <p>プレスリリースのお知らせ DIGGIN’ RECORDS</p>
105
- </div>
127
+ </section>
106
- <div class="topic">
107
- <p>2020.01.01</p>
108
- <p>新年開けましておめでとうございます</p>
109
- </div>
110
128
 
129
+ <footer>
111
- </section><!--latest-topics>
130
+ <p>©2018 DIGSMILE INC.</p>
131
+ </footer>
112
132
 
113
- <!-jQueryの読み込み-->
114
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
115
- <script src="nmt.js"></script>
116
133
 
117
- </body>
118
134
  ```
119
135
 
120
136
  ```CSS
121
137
  html {
122
138
  height: 100%;
123
139
  }
124
-
125
140
  body {
126
141
  height: 100%;
127
142
  width: 100%;
@@ -325,7 +340,7 @@
325
340
  position: relative;
326
341
  width: 70%;
327
342
  margin: 0 auto;
328
- padding-bottom: 0;
343
+ bottom: 0;
329
344
  }
330
345
 
331
346
  .about-img {
@@ -334,7 +349,7 @@
334
349
  padding: 110px 0 110px 50px;
335
350
  background-position: center;
336
351
  margin-top: 200px;
337
-
352
+ bottom: 0;
338
353
  }
339
354
 
340
355
  .about {
@@ -347,11 +362,6 @@
347
362
  line-height: 30px;
348
363
  }
349
364
 
350
- .about h2 {
351
- font-family: 'arial black';
352
- margin-bottom: 0;
353
- }
354
-
355
365
  .about p {
356
366
  margin-top: 30px;
357
367
  font-size: 15px;
@@ -361,6 +371,7 @@
361
371
  margin-bottom: 50px;
362
372
  }
363
373
 
374
+ /*リンクボタン*/
364
375
  .link-btn {
365
376
  color: #fff;
366
377
  background-color: #222;
@@ -371,14 +382,17 @@
371
382
  margin: 30px 0 30px 0;
372
383
  }
373
384
 
385
+ /*コンテンツ*/
374
- .contents-wrapper {
386
+ .contents-wrapper::after {
387
+ content: "";
388
+ display: block;
389
+ position: absolute;
390
+ top: 1600px;
391
+ right: 0;
375
392
  background-color: rgba(219, 219, 219, 0.76);
376
393
  width: 100%;
377
- position: absolute;
378
- margin-top: -120px;
394
+ height: 95%;
379
395
  z-index: -1;
380
- height: 80%;
381
- padding-bottom: 0;
382
396
  }
383
397
 
384
398
  .photos {
@@ -386,28 +400,99 @@
386
400
  justify-content: space-between;
387
401
  margin: 0 auto;
388
402
  width: 70%;
389
- margin-top: 150px;
403
+ margin-top: 120px;
390
404
  }
391
405
 
392
406
  .contents-wrapper img {
393
407
  width: 100%;
394
408
  }
395
409
 
410
+ .contents-wrapper h2,.contact-wrapper h2,.latest-topics h2,.about h2,
396
- .contents-wrapper h2 {
411
+ .works h2,.culture h2{
397
412
  font-family: 'arial black';
413
+ letter-spacing: 2px;
414
+ left: 0;
415
+
398
416
  }
399
417
  .contents-btn {
400
418
  margin: 50px 0 50px 0;
401
419
  }
402
420
 
421
+ /*LATEST TOPICS*/
403
422
  .latest-topics {
404
- height: auto;
423
+ height: 400px;
405
- width: 80%;
424
+ width: 70%;
406
425
  margin: 0 auto;
407
- background-color: rgba(34, 34, 34, 0.493);
426
+ margin-top: 140px;
408
427
  }
409
428
 
410
- .latest-topics h2 {
429
+ .topics {
411
- font-family: 'arial black';
430
+ margin-left: 500px;
412
431
  }
432
+
433
+ .topic-btn {
434
+ display: flex;
435
+ justify-content: flex-end;
436
+ }
437
+
438
+ .date {
439
+ font-size: 10px;
440
+ color:rgb(161, 161, 161)
441
+ }
442
+
443
+ .news {
444
+ display: block;
445
+ border-bottom: solid 1px rgba(136, 134, 134, 0.76);
446
+ }
447
+
448
+ /*コンタクト*/
449
+ .contact-wrapper {
450
+ width: 100%;
451
+ background-color: rgba(219, 219, 219, 0.76);
452
+ height: 650px;
453
+ margin: 0;
454
+ overflow: hidden;
455
+ }
456
+ .contact-size {
457
+ width: 70%;
458
+ margin: 0 auto;
459
+ height: 50%;
460
+ }
461
+
462
+ .recruit {
463
+ display: flex;
464
+ justify-content: space-between;
465
+ }
466
+
467
+ .contact-size h2 {
468
+ display: inline-block;
469
+ margin-top: 150px;
470
+ height: 100px;
471
+ }
472
+
473
+ .recruit p {
474
+ display: block;
475
+ width: 40%;
476
+ }
477
+
478
+ .recruit img {
479
+ margin-top: -100px;
480
+ padding-bottom: 90px;
481
+ }
482
+
483
+ .contact-btn {
484
+ margin-top: -140px;
485
+ }
486
+
487
+ /*フッター*/
488
+ footer {
489
+ height: 60px;
490
+ background-color: rgba(92, 91, 91, 0.925);
491
+ margin-top: 0;
492
+ }
493
+ footer p {
494
+ line-height: 60px;
495
+ color: #fff;
496
+ text-align: center;
497
+ }
413
498
  ```