質問編集履歴
2
コードを修正しました
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:
|
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
コードを修正しました
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
|
-
|
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
|
-
|
126
|
+
</div><!--contact-size-->
|
103
|
-
<p>2020.01.18</p>
|
104
|
-
<p>プレスリリースのお知らせ DIGGIN’ RECORDS</p>
|
105
|
-
|
127
|
+
</section>
|
106
|
-
<div class="topic">
|
107
|
-
<p>2020.01.01</p>
|
108
|
-
<p>新年開けましておめでとうございます</p>
|
109
|
-
</div>
|
110
128
|
|
129
|
+
<footer>
|
111
|
-
<
|
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
|
-
|
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
|
-
|
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:
|
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
|
-
.
|
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:
|
423
|
+
height: 400px;
|
405
|
-
width:
|
424
|
+
width: 70%;
|
406
425
|
margin: 0 auto;
|
407
|
-
|
426
|
+
margin-top: 140px;
|
408
427
|
}
|
409
428
|
|
410
|
-
.
|
429
|
+
.topics {
|
411
|
-
|
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
|
```
|