質問編集履歴

1

SCSSを記載していましたがコンパイル後のCSSを記載してます。

2021/02/04 11:56

投稿

TMTN
TMTN

スコア52

test CHANGED
File without changes
test CHANGED
@@ -128,7 +128,7 @@
128
128
 
129
129
  ```
130
130
 
131
- ```SCSS
131
+ ```CSS
132
132
 
133
133
  /* <====== 全体共通 ======> */
134
134
 
@@ -214,22 +214,10 @@
214
214
 
215
215
 
216
216
 
217
- /* <====== 変数 ======> */
218
-
219
-
220
-
221
- $main-bg-color: rgba(102, 89, 89, 0.281);
222
-
223
- $main-color-w: rgb(255, 255, 255);
224
-
225
- $main-color-b: rgb(0, 0, 0);
226
-
227
217
 
228
218
 
229
219
  /* <====== works ======> */
230
220
 
231
-
232
-
233
221
  h2#works {
234
222
 
235
223
  padding-top: 12rem;
@@ -246,73 +234,97 @@
246
234
 
247
235
  height: 45rem;
248
236
 
249
- flex-direction: column;
250
-
251
-
252
-
253
- .works-inner-items {
254
-
255
- width: 90%;
256
-
257
- height: 40rem;
258
-
259
- margin-top: 8rem;
260
-
261
- position: relative;
262
-
263
- z-index: -1;
264
-
265
- flex-direction: column;
266
-
267
-
268
-
269
- &::after {
270
-
271
- width: 100%;
272
-
273
- height: 40rem;
274
-
275
- content: "";
276
-
277
- position: absolute;
278
-
279
- left: 0rem;
280
-
281
- top: 1rem;
282
-
283
- transform: skewY(-5deg);
284
-
285
- transform-origin: bottom left;
286
-
287
- z-index: -1;
288
-
289
- background: $main-color-b;
290
-
291
- }
292
-
293
-
294
-
295
- .work-font {
296
-
297
- font-size: 1.5rem;
298
-
299
- color: $main-color-w;
300
-
301
- position: relative!important;
302
-
303
-
304
-
305
- .work-arrow {
306
-
307
- color: $main-color-w;
308
-
309
- padding: 1rem;
310
-
311
- }
312
-
313
- }
314
-
315
- }
237
+ -webkit-box-orient: vertical;
238
+
239
+ -webkit-box-direction: normal;
240
+
241
+ -ms-flex-direction: column;
242
+
243
+ flex-direction: column;
244
+
245
+ }
246
+
247
+
248
+
249
+ .works-inner .works-inner-items {
250
+
251
+ width: 90%;
252
+
253
+ height: 40rem;
254
+
255
+ margin-top: 8rem;
256
+
257
+ position: relative;
258
+
259
+ z-index: -1;
260
+
261
+ -webkit-box-orient: vertical;
262
+
263
+ -webkit-box-direction: normal;
264
+
265
+ -ms-flex-direction: column;
266
+
267
+ flex-direction: column;
268
+
269
+ }
270
+
271
+
272
+
273
+ .works-inner .works-inner-items::after {
274
+
275
+ width: 100%;
276
+
277
+ height: 40rem;
278
+
279
+ content: "";
280
+
281
+ position: absolute;
282
+
283
+ left: 0rem;
284
+
285
+ top: 1rem;
286
+
287
+ -webkit-transform: skewY(-5deg);
288
+
289
+ transform: skewY(-5deg);
290
+
291
+ -webkit-transform-origin: bottom left;
292
+
293
+ transform-origin: bottom left;
294
+
295
+ z-index: -1;
296
+
297
+ background: black;
298
+
299
+ }
300
+
301
+
302
+
303
+ .works-inner .works-inner-items .work-font {
304
+
305
+ font-size: 1.5rem;
306
+
307
+ color: white;
308
+
309
+ }
310
+
311
+
312
+
313
+ .works-inner .works-inner-items .work-font a {
314
+
315
+ position: relative;
316
+
317
+ z-index: 10000;
318
+
319
+ }
320
+
321
+
322
+
323
+ .works-inner .works-inner-items .work-font .work-arrow {
324
+
325
+ color: white;
326
+
327
+ padding: 1rem;
316
328
 
317
329
  }
318
330