teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問<a> が動作しない。

編集履歴

質問編集履歴

2

こちらがcssです

2021/01/29 22:49

投稿

DaisukeNomura
DaisukeNomura

スコア1

title CHANGED
File without changes
body CHANGED
@@ -19,6 +19,7 @@
19
19
  </div>
20
20
  ```
21
21
  ```CSS
22
+
22
23
  .wrapper .hero {
23
24
  background-image: url(../image/hero_top_image.svg);
24
25
  padding-top: 40%;
@@ -29,19 +30,19 @@
29
30
  }
30
31
 
31
32
  .wrapper .hero .hero_inner {
32
- background-color: #C9171E;
33
+ background-color: #c9171e;
33
34
  position: absolute;
34
- top: 10em;
35
+ top: 10.47297vw;
35
36
  width: 100%;
36
37
  z-index: -5;
37
38
  padding-top: 20%;
38
39
  }
39
40
 
41
+
40
- .wrapper .hero .btn {
42
+ .wrapper .hero .hero_inner .btn {
43
+ width: 22.90541vw;
41
- width: 100%;
44
+ min-width: 170px;
42
45
  background-color: #000;
43
- width: 350px;
44
- margin: 3em 0 3em 12em;
45
46
  display: -webkit-box;
46
47
  display: -ms-flexbox;
47
48
  display: flex;
@@ -51,23 +52,23 @@
51
52
  -webkit-box-align: center;
52
53
  -ms-flex-align: center;
53
54
  align-items: center;
54
- font-size: 1.3rem;
55
+ font-size: 1.35135vw;
55
56
  color: #fff;
56
57
  position: absolute;
57
- top: 60%;
58
+ top: 63%;
58
- left: 0;
59
+ left: 16.14865vw;
59
60
  }
60
61
 
61
- .wrapper .hero .btn:hover {
62
+ .wrapper .hero .hero_inner .btn:hover {
62
- opacity: .5;
63
+ opacity: 0.5;
63
64
  }
64
65
 
65
- .wrapper .hero .btn .btn_recruit_inner {
66
+ .wrapper .hero .hero_inner .btn .btn_recruit_inner {
66
67
  text-align: center;
67
- padding: 20px;
68
+ padding: 1.35135vw;
68
69
  }
69
70
 
70
- .wrapper .hero .btn .btn_recruit_inner .btn_recruit_tel {
71
+ .wrapper .hero .hero_inner .btn .btn_recruit_inner .btn_recruit_tel {
71
72
  display: -webkit-box;
72
73
  display: -ms-flexbox;
73
74
  display: flex;
@@ -79,4 +80,20 @@
79
80
  justify-content: center;
80
81
  }
81
82
 
83
+ @media only screen and (max-width: 768px) {
84
+ .wrapper .hero .hero_inner .btn .btn_recruit_inner .btn_recruit_tel {
85
+ display: none;
86
+ }
87
+ }
88
+
89
+ .wrapper .hero .hero_inner .btn .btn_recruit_inner .btn_recruit_tel img {
90
+ margin-right: 20px;
91
+ }
92
+
93
+ @media only screen and (max-width: 768px) {
94
+ .wrapper .hero .arrow {
95
+ display: none;
96
+ }
97
+ }
98
+
82
99
  ```

1

SCSSからCSSに書き換えておきました。

2021/01/29 22:49

投稿

DaisukeNomura
DaisukeNomura

スコア1

title CHANGED
File without changes
body CHANGED
@@ -18,61 +18,65 @@
18
18
  </div>
19
19
  </div>
20
20
  ```
21
- ```ここに言語を入力
21
+ ```CSS
22
- @function pcvw($size, $width: 2000) {
22
+ .wrapper .hero {
23
- $no_unit_size: $size / ($size * 0 + 1);
24
- @return (100 / $width) * $no_unit_size * 1vw;
23
+ background-image: url(../image/hero_top_image.svg);
24
+ padding-top: 40%;
25
+ background-size: contain;
26
+ background-repeat: no-repeat;
27
+ background-position: top 20% right -10%;
28
+ position: relative;
25
29
  }
26
- .hero {
27
- position: relative;
28
30
 
29
- .hero_inner {
31
+ .wrapper .hero .hero_inner {
30
- background-color: #c9171e;
32
+ background-color: #C9171E;
31
- position: absolute;
33
+ position: absolute;
32
- top: pcvw(155);
34
+ top: 10em;
33
- width: 100%;
35
+ width: 100%;
34
- z-index: -5;
36
+ z-index: -5;
35
- padding-top: 20%;
37
+ padding-top: 20%;
38
+ }
36
39
 
37
- .btn {
40
+ .wrapper .hero .btn {
38
- width: 100%;
41
+ width: 100%;
39
- background-color: #000;
42
+ background-color: #000;
40
- width: pcvw(350);
41
- min-width: 200px;
43
+ width: 350px;
42
- padding: pcvw(20) auto;
43
- margin: pcvw(50) 0 3em pcvw(246);
44
+ margin: 3em 0 3em 12em;
45
+ display: -webkit-box;
46
+ display: -ms-flexbox;
44
- display: flex;
47
+ display: flex;
48
+ -webkit-box-pack: center;
49
+ -ms-flex-pack: center;
45
- justify-content: center;
50
+ justify-content: center;
51
+ -webkit-box-align: center;
52
+ -ms-flex-align: center;
46
- align-items: center;
53
+ align-items: center;
47
- font-size: pcvw(20);
54
+ font-size: 1.3rem;
48
- color: #fff;
55
+ color: #fff;
49
- position: absolute;
56
+ position: absolute;
50
- top: 63%;
57
+ top: 60%;
51
- left: 0;
58
+ left: 0;
52
- &:hover {
53
- opacity: 0.5;
54
- }
59
+ }
55
- .btn_recruit_inner {
56
- text-align: center;
57
- padding: pcvw(20);
58
60
 
61
+ .wrapper .hero .btn:hover {
62
+ opacity: .5;
63
+ }
64
+
59
- .btn_recruit_tel {
65
+ .wrapper .hero .btn .btn_recruit_inner {
66
+ text-align: center;
67
+ padding: 20px;
68
+ }
69
+
70
+ .wrapper .hero .btn .btn_recruit_inner .btn_recruit_tel {
71
+ display: -webkit-box;
72
+ display: -ms-flexbox;
60
- display: flex;
73
+ display: flex;
74
+ -webkit-box-align: center;
75
+ -ms-flex-align: center;
61
76
  align-items: center;
77
+ -webkit-box-pack: center;
78
+ -ms-flex-pack: center;
62
79
  justify-content: center;
63
- @include mq-tablet() {
64
- display: none;
65
- }
80
+ }
66
- img {
81
+
67
- margin-right: 20px;
68
- }
69
- }
70
- }
71
- }
72
- .arrow {
73
- @include mq-tablet() {
74
- display: none;
75
- }
76
- }
77
- }
78
82
  ```