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

編集履歴

質問編集履歴

2

こちらがcssです

2021/01/29 22:49

投稿

DaisukeNomura
DaisukeNomura

スコア1

test CHANGED
File without changes
test CHANGED
@@ -40,6 +40,8 @@
40
40
 
41
41
  ```CSS
42
42
 
43
+
44
+
43
45
  .wrapper .hero {
44
46
 
45
47
  background-image: url(../image/hero_top_image.svg);
@@ -60,11 +62,11 @@
60
62
 
61
63
  .wrapper .hero .hero_inner {
62
64
 
63
- background-color: #C9171E;
65
+ background-color: #c9171e;
64
66
 
65
67
  position: absolute;
66
68
 
67
- top: 10em;
69
+ top: 10.47297vw;
68
70
 
69
71
  width: 100%;
70
72
 
@@ -76,15 +78,15 @@
76
78
 
77
79
 
78
80
 
79
- .wrapper .hero .btn {
80
81
 
82
+
83
+ .wrapper .hero .hero_inner .btn {
84
+
85
+ width: 22.90541vw;
86
+
81
- width: 100%;
87
+ min-width: 170px;
82
88
 
83
89
  background-color: #000;
84
-
85
- width: 350px;
86
-
87
- margin: 3em 0 3em 12em;
88
90
 
89
91
  display: -webkit-box;
90
92
 
@@ -104,39 +106,39 @@
104
106
 
105
107
  align-items: center;
106
108
 
107
- font-size: 1.3rem;
109
+ font-size: 1.35135vw;
108
110
 
109
111
  color: #fff;
110
112
 
111
113
  position: absolute;
112
114
 
113
- top: 60%;
115
+ top: 63%;
114
116
 
115
- left: 0;
117
+ left: 16.14865vw;
116
118
 
117
119
  }
118
120
 
119
121
 
120
122
 
121
- .wrapper .hero .btn:hover {
123
+ .wrapper .hero .hero_inner .btn:hover {
122
124
 
123
- opacity: .5;
125
+ opacity: 0.5;
124
126
 
125
127
  }
126
128
 
127
129
 
128
130
 
129
- .wrapper .hero .btn .btn_recruit_inner {
131
+ .wrapper .hero .hero_inner .btn .btn_recruit_inner {
130
132
 
131
133
  text-align: center;
132
134
 
133
- padding: 20px;
135
+ padding: 1.35135vw;
134
136
 
135
137
  }
136
138
 
137
139
 
138
140
 
139
- .wrapper .hero .btn .btn_recruit_inner .btn_recruit_tel {
141
+ .wrapper .hero .hero_inner .btn .btn_recruit_inner .btn_recruit_tel {
140
142
 
141
143
  display: -webkit-box;
142
144
 
@@ -160,4 +162,36 @@
160
162
 
161
163
 
162
164
 
165
+ @media only screen and (max-width: 768px) {
166
+
167
+ .wrapper .hero .hero_inner .btn .btn_recruit_inner .btn_recruit_tel {
168
+
169
+ display: none;
170
+
171
+ }
172
+
173
+ }
174
+
175
+
176
+
177
+ .wrapper .hero .hero_inner .btn .btn_recruit_inner .btn_recruit_tel img {
178
+
179
+ margin-right: 20px;
180
+
181
+ }
182
+
183
+
184
+
185
+ @media only screen and (max-width: 768px) {
186
+
187
+ .wrapper .hero .arrow {
188
+
189
+ display: none;
190
+
191
+ }
192
+
193
+ }
194
+
195
+
196
+
163
197
  ```

1

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

2021/01/29 22:49

投稿

DaisukeNomura
DaisukeNomura

スコア1

test CHANGED
File without changes
test CHANGED
@@ -38,118 +38,126 @@
38
38
 
39
39
  ```
40
40
 
41
- ```ここに言語を入力
41
+ ```CSS
42
42
 
43
- @function pcvw($size, $width: 2000) {
43
+ .wrapper .hero {
44
44
 
45
- $no_unit_size: $size / ($size * 0 + 1);
45
+ background-image: url(../image/hero_top_image.svg);
46
46
 
47
+ padding-top: 40%;
48
+
49
+ background-size: contain;
50
+
51
+ background-repeat: no-repeat;
52
+
47
- @return (100 / $width) * $no_unit_size * 1vw;
53
+ background-position: top 20% right -10%;
54
+
55
+ position: relative;
48
56
 
49
57
  }
50
58
 
51
- .hero {
52
59
 
60
+
61
+ .wrapper .hero .hero_inner {
62
+
63
+ background-color: #C9171E;
64
+
53
- position: relative;
65
+ position: absolute;
66
+
67
+ top: 10em;
68
+
69
+ width: 100%;
70
+
71
+ z-index: -5;
72
+
73
+ padding-top: 20%;
74
+
75
+ }
54
76
 
55
77
 
56
78
 
57
- .hero_inner {
79
+ .wrapper .hero .btn {
58
80
 
59
- background-color: #c9171e;
81
+ width: 100%;
60
82
 
61
- position: absolute;
83
+ background-color: #000;
62
84
 
63
- top: pcvw(155);
85
+ width: 350px;
64
86
 
65
- width: 100%;
87
+ margin: 3em 0 3em 12em;
66
88
 
67
- z-index: -5;
89
+ display: -webkit-box;
68
90
 
91
+ display: -ms-flexbox;
92
+
93
+ display: flex;
94
+
95
+ -webkit-box-pack: center;
96
+
97
+ -ms-flex-pack: center;
98
+
99
+ justify-content: center;
100
+
101
+ -webkit-box-align: center;
102
+
103
+ -ms-flex-align: center;
104
+
105
+ align-items: center;
106
+
107
+ font-size: 1.3rem;
108
+
109
+ color: #fff;
110
+
111
+ position: absolute;
112
+
69
- padding-top: 20%;
113
+ top: 60%;
114
+
115
+ left: 0;
116
+
117
+ }
70
118
 
71
119
 
72
120
 
73
- .btn {
121
+ .wrapper .hero .btn:hover {
74
122
 
75
- width: 100%;
123
+ opacity: .5;
76
124
 
77
- background-color: #000;
78
-
79
- width: pcvw(350);
80
-
81
- min-width: 200px;
82
-
83
- padding: pcvw(20) auto;
84
-
85
- margin: pcvw(50) 0 3em pcvw(246);
86
-
87
- display: flex;
88
-
89
- justify-content: center;
90
-
91
- align-items: center;
92
-
93
- font-size: pcvw(20);
94
-
95
- color: #fff;
96
-
97
- position: absolute;
98
-
99
- top: 63%;
100
-
101
- left: 0;
102
-
103
- &:hover {
104
-
105
- opacity: 0.5;
106
-
107
- }
125
+ }
108
-
109
- .btn_recruit_inner {
110
-
111
- text-align: center;
112
-
113
- padding: pcvw(20);
114
126
 
115
127
 
116
128
 
117
- .btn_recruit_tel {
129
+ .wrapper .hero .btn .btn_recruit_inner {
118
130
 
131
+ text-align: center;
132
+
133
+ padding: 20px;
134
+
135
+ }
136
+
137
+
138
+
139
+ .wrapper .hero .btn .btn_recruit_inner .btn_recruit_tel {
140
+
141
+ display: -webkit-box;
142
+
143
+ display: -ms-flexbox;
144
+
119
- display: flex;
145
+ display: flex;
146
+
147
+ -webkit-box-align: center;
148
+
149
+ -ms-flex-align: center;
120
150
 
121
151
  align-items: center;
122
152
 
153
+ -webkit-box-pack: center;
154
+
155
+ -ms-flex-pack: center;
156
+
123
157
  justify-content: center;
124
158
 
125
- @include mq-tablet() {
159
+ }
126
160
 
127
- display: none;
128
161
 
129
- }
130
-
131
- img {
132
-
133
- margin-right: 20px;
134
-
135
- }
136
-
137
- }
138
-
139
- }
140
-
141
- }
142
-
143
- .arrow {
144
-
145
- @include mq-tablet() {
146
-
147
- display: none;
148
-
149
- }
150
-
151
- }
152
-
153
- }
154
162
 
155
163
  ```