質問編集履歴

2

2021/07/03 01:14

投稿

BB_Y66w_design
BB_Y66w_design

スコア1

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ```HTML
30
30
 
31
- ソースコード <!DOCTYPE html>
31
+ <!DOCTYPE html>
32
32
 
33
33
  <html lang="ja">
34
34
 
@@ -420,7 +420,7 @@
420
420
 
421
421
  ```css
422
422
 
423
- ソースコード #arrow-wrapper {
423
+ #arrow-wrapper {
424
424
 
425
425
  display: -webkit-box;
426
426
 
@@ -540,7 +540,7 @@
540
540
 
541
541
  ```javascript
542
542
 
543
- ソースコード $(document).ready(function() {
543
+ $(document).ready(function() {
544
544
 
545
545
  $(".carousel").slick({
546
546
 

1

質問本文をより具体的に記述しました。

2021/07/03 01:14

投稿

BB_Y66w_design
BB_Y66w_design

スコア1

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,19 @@
2
2
 
3
3
  画像のスライドを設置するためにslick.jsを導入しましたが、
4
4
 
5
- うまく表示されません。何が原因か教えてください。
5
+ うまく表示されません。
6
+
7
+
8
+
9
+ 現状slickスライダーで表示されているのは下記画像の"現在のデザイン"となります。
10
+
11
+ .carousel内のコンテンツが横並びにならず縦並びの表示となってしまっています。
12
+
13
+ prev,nextArrowの部分も表示されません。
14
+
15
+
16
+
17
+ 下記画像の"実現したいデザイン"のようなデザインにコーディングするには何が足らないかを教えてください。
6
18
 
7
19
  よろしくお願いいたします。
8
20
 
@@ -16,7 +28,177 @@
16
28
 
17
29
  ```HTML
18
30
 
31
+ ソースコード <!DOCTYPE html>
32
+
33
+ <html lang="ja">
34
+
35
+ <head>
36
+
37
+ <meta charset="utf-8" />
38
+
39
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
40
+
41
+ <title>Weaving Will | Top</title>
42
+
43
+ <meta
44
+
45
+ name="description"
46
+
47
+ content="新潟県妙高市を拠点に活動する複業Webデザイナーのポートフォリオサイトです。"
48
+
49
+ />
50
+
51
+ <!-- CSS -->
52
+
53
+ <link
54
+
55
+ rel="stylesheet"
56
+
57
+ href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
58
+
59
+ />
60
+
61
+ <!-- Add the slick-theme.css if you want default styling -->
62
+
63
+ <link
64
+
65
+ rel="stylesheet"
66
+
67
+ type="text/css"
68
+
69
+ href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
70
+
71
+ />
72
+
73
+ <!-- Add the slick-theme.css if you want default styling -->
74
+
75
+ <link
76
+
77
+ rel="stylesheet"
78
+
79
+ type="text/css"
80
+
81
+ href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
82
+
83
+ />
84
+
85
+ <link
86
+
87
+ rel="stylesheet"
88
+
89
+ href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
90
+
91
+ />
92
+
93
+ <link rel="stylesheet" href="./css/style.css" />
94
+
95
+
96
+
97
+ <!-- Font Awosome -->
98
+
99
+ <script
100
+
101
+ src="https://kit.fontawesome.com/8ba1f84262.js"
102
+
103
+ crossorigin="anonymous"
104
+
105
+ ></script>
106
+
107
+ <!-- Font -->
108
+
109
+ <script>
110
+
111
+ (function (d) {
112
+
113
+ var config = {
114
+
115
+ kitId: "qow8hvi",
116
+
117
+ scriptTimeout: 3000,
118
+
119
+ async: true,
120
+
121
+ },
122
+
123
+ h = d.documentElement,
124
+
125
+ t = setTimeout(function () {
126
+
127
+ h.className =
128
+
129
+ h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
130
+
131
+ }, config.scriptTimeout),
132
+
133
+ tk = d.createElement("script"),
134
+
135
+ f = false,
136
+
137
+ s = d.getElementsByTagName("script")[0],
138
+
139
+ a;
140
+
141
+ h.className += " wf-loading";
142
+
143
+ tk.src = "https://use.typekit.net/" + config.kitId + ".js";
144
+
145
+ tk.async = true;
146
+
147
+ tk.onload = tk.onreadystatechange = function () {
148
+
149
+ a = this.readyState;
150
+
151
+ if (f || (a && a != "complete" && a != "loaded")) return;
152
+
153
+ f = true;
154
+
155
+ clearTimeout(t);
156
+
157
+ try {
158
+
159
+ Typekit.load(config);
160
+
161
+ } catch (e) {}
162
+
163
+ };
164
+
165
+ s.parentNode.insertBefore(tk, s);
166
+
167
+ })(document);
168
+
169
+ </script>
170
+
171
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
172
+
173
+ <script
174
+
175
+ type="text/javascript"
176
+
177
+ src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
178
+
179
+ ></script>
180
+
181
+ <script src="./js/carousel.js"></script>
182
+
183
+ </head>
184
+
185
+
186
+
187
+ <body>
188
+
189
+
190
+
191
+
192
+
193
+
194
+
195
+
196
+
197
+
198
+
199
+
200
+
19
- ソースコード <section class="works">
201
+ <section class="works">
20
202
 
21
203
  <div class="container">
22
204
 
@@ -160,6 +342,78 @@
160
342
 
161
343
  </section>
162
344
 
345
+
346
+
347
+ <section class="contact">
348
+
349
+ <div class="container">
350
+
351
+ <div class="contact-wrapper shadow">
352
+
353
+ <h2 class="section-title">Contact</h2>
354
+
355
+ <div class="contact-text">
356
+
357
+ <p>制作のご依頼、ご相談など気軽にお問い合わせください。</p>
358
+
359
+ <a href="contact.html" class="btn">Contact</a>
360
+
361
+ </div>
362
+
363
+ </div>
364
+
365
+ </div>
366
+
367
+ </section>
368
+
369
+ </main>
370
+
371
+
372
+
373
+
374
+
375
+
376
+
377
+ <!-- JS -->
378
+
379
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
380
+
381
+ <script
382
+
383
+ type="text/javascript"
384
+
385
+ src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
386
+
387
+ ></script>
388
+
389
+ <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script>
390
+
391
+ <script src="./js/humburger-menu.js"></script>
392
+
393
+ <script src="./js/loading.js"></script>
394
+
395
+
396
+
397
+ <script>
398
+
399
+ var swiper = new Swiper(".swiper-container", {
400
+
401
+ navigation: {
402
+
403
+ nextEl: ".swiper-button-next",
404
+
405
+ prevEl: ".swiper-button-prev",
406
+
407
+ },
408
+
409
+ });
410
+
411
+ </script>
412
+
413
+ </body>
414
+
415
+ </html>
416
+
163
417
  ```
164
418
 
165
419
 
@@ -168,99 +422,113 @@
168
422
 
169
423
  ソースコード #arrow-wrapper {
170
424
 
171
- display: flex;
172
-
173
- justify-content: flex-end;
174
-
175
- align-items: center;
176
-
177
- line-height: 1;
178
-
179
- @include font2;
180
-
181
- margin-top: 4rem;
182
-
183
-
184
-
185
- #arrow {
186
-
187
- display: flex;
188
-
189
- font-weight: 200;
190
-
191
-
192
-
193
- .slick-arrow {
194
-
195
- margin-right: 4.8rem;
196
-
197
- }
198
-
199
-
200
-
201
- }
202
-
203
-
204
-
205
-
206
-
207
- .slick-prev,
208
-
209
- .slick-next {
210
-
211
- position: static;
212
-
213
- font-size: 1.8rem;
214
-
215
- }
216
-
217
-
218
-
219
- .slick-prev {
220
-
221
- left: 0;
222
-
223
- }
224
-
225
-
226
-
227
- .slick-next {
228
-
229
- right: 0;
230
-
231
- }
232
-
233
-
234
-
235
- a {
236
-
237
- font-size: 1.8rem;
238
-
239
- color: $black;
240
-
241
- font-weight: 400;
242
-
243
- transition: 1s all;
244
-
245
- }
246
-
247
-
248
-
249
- .slick-arrow {
250
-
251
- font-size: 3.2rem;
252
-
253
- cursor: pointer;
254
-
255
- }
256
-
257
-
258
-
259
- a:hover {
260
-
261
- color: $blue;
262
-
263
- }
425
+ display: -webkit-box;
426
+
427
+ display: -ms-flexbox;
428
+
429
+ display: flex;
430
+
431
+ -webkit-box-pack: end;
432
+
433
+ -ms-flex-pack: end;
434
+
435
+ justify-content: flex-end;
436
+
437
+ -webkit-box-align: center;
438
+
439
+ -ms-flex-align: center;
440
+
441
+ align-items: center;
442
+
443
+ line-height: 1;
444
+
445
+ font-family: effra, sans-serif;
446
+
447
+ margin-top: 4rem;
448
+
449
+ }
450
+
451
+
452
+
453
+ #arrow-wrapper #arrow {
454
+
455
+ display: -webkit-box;
456
+
457
+ display: -ms-flexbox;
458
+
459
+ display: flex;
460
+
461
+ font-weight: 200;
462
+
463
+ }
464
+
465
+
466
+
467
+ #arrow-wrapper #arrow .slick-arrow {
468
+
469
+ margin-right: 4.8rem;
470
+
471
+ }
472
+
473
+
474
+
475
+ #arrow-wrapper .slick-prev,
476
+
477
+ #arrow-wrapper .slick-next {
478
+
479
+ position: static;
480
+
481
+ font-size: 1.8rem;
482
+
483
+ }
484
+
485
+
486
+
487
+ #arrow-wrapper .slick-prev {
488
+
489
+ left: 0;
490
+
491
+ }
492
+
493
+
494
+
495
+ #arrow-wrapper .slick-next {
496
+
497
+ right: 0;
498
+
499
+ }
500
+
501
+
502
+
503
+ #arrow-wrapper a {
504
+
505
+ font-size: 1.8rem;
506
+
507
+ color: #000a14;
508
+
509
+ font-weight: 400;
510
+
511
+ -webkit-transition: 1s all;
512
+
513
+ transition: 1s all;
514
+
515
+ }
516
+
517
+
518
+
519
+ #arrow-wrapper .slick-arrow {
520
+
521
+ font-size: 3.2rem;
522
+
523
+ cursor: pointer;
524
+
525
+ }
526
+
527
+
528
+
529
+ #arrow-wrapper a:hover {
530
+
531
+ color: #878efc;
264
532
 
265
533
  }
266
534
 
@@ -308,12 +576,8 @@
308
576
 
309
577
 
310
578
 
311
-
312
-
313
579
  ```
314
580
 
315
-
316
-
317
-
318
-
319
- ![実現したいデザ](dcea8cb5169254fba9e667fc9f66bbe2.png)
581
+ ![イメージ説明](c382e4e7706439363aee24fbd98bb521.png) 現在のデザイン
582
+
583
+ ![イメージ説明](aed93a9e9644f44d9a29516a6893e58f.png) 実現したいデザイン