teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問slickを導入したんですが使えないです。

編集履歴

質問編集履歴

4

修正

2020/02/20 22:32

投稿

katusi
katusi

スコア12

test CHANGED
File without changes
test CHANGED
@@ -212,6 +212,38 @@
212
212
 
213
213
  }
214
214
 
215
+ .slider {
216
+
217
+ position: relative;
218
+
219
+ display: inline-block;
220
+
221
+ }
222
+
223
+ .slide01 img, .slide02 img, .slide03 img {
224
+
225
+ border: 2px solid red;
226
+
227
+
228
+
229
+ }
230
+
231
+ .slide-text01, .slide-text02, .slide-text03 {
232
+
233
+
234
+
235
+ margin: 0;
236
+
237
+ padding: 0;
238
+
239
+ top: 100px;
240
+
241
+ left: 200px;
242
+
243
+
244
+
245
+ }
246
+
215
247
  ```
216
248
 
217
249
  ```js

3

修正

2020/02/20 22:32

投稿

katusi
katusi

スコア12

test CHANGED
File without changes
test CHANGED
@@ -16,6 +16,8 @@
16
16
 
17
17
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
18
18
 
19
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
20
+
19
21
  <script async src="https://platform.twitter.com/widgets.js"></script>
20
22
 
21
23
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
@@ -28,9 +30,65 @@
28
30
 
29
31
  <body>
30
32
 
33
+ <header>
34
+
35
+ <div class="inner">
36
+
37
+ <img class="header-logo-back" src="https://writer-station.com/img/front/pc_img/bg_wave.svg?1578457100" alt="">
38
+
39
+ <div class="header-logo">
40
+
41
+ <a href="https://writer-station.com/">
42
+
43
+ <img src="https://writer-station.com/img/front/pc_img/logo_ttl_white.svg" alt="">
44
+
45
+ <p>WRITER STATION<br><span class="big">ライターステーション</span><p></a>
46
+
47
+ </div>
48
+
49
+ <div class="header-sub">
50
+
51
+ <a class="subcribe" href="https://writer-station.com/entry"><span class="blue"><i class="far fa-circle"></i></span>登録はこちら</a>
52
+
53
+ <a class="blog" href="https://writer-station.com/entry"><span class="blue"><i class="fas fa-pencil-ruler"></i></span>ブログ</a>
54
+
55
+ <a class="login" href="https://writer-station.com/entry"><span class="blue"><i class="fas fa-lock-open"></i></span>ログイン</a>
56
+
57
+ </div>
58
+
59
+ <div class="header-menu">
60
+
61
+ <ul>
62
+
63
+ <li><a href="https://writer-station.com/#overview">▽仕事の概要</a></li>
64
+
65
+ <li><a href="https://writer-station.com/#overview">▽案件例</a></li>
66
+
67
+ <li><a href="https://writer-station.com/#overview">▽対象とする人</a></li>
68
+
69
+ <li><a href="https://writer-station.com/#overview">▽仕事の流れ</a></li>
70
+
71
+ <li><a href="https://writer-station.com/#overview">▽サポート体制</a></li>
72
+
73
+ <li><a href="https://writer-station.com/#overview">▽先輩登録者の声</a></li>
74
+
75
+ <li><a href="https://writer-station.com/#overview">▽Q＆A</a></li>
76
+
77
+ </ul>
78
+
79
+ </div>
80
+
81
+ <div id="page_top"><a href="#"><i class="fas fa-angle-up"></i></a></div>
82
+
83
+ </div>
84
+
85
+ </header>
86
+
87
+
88
+
31
- <main>
89
+ <main>
32
-
90
+
33
- <div id="section1">
91
+ <div id="section1">
34
92
 
35
93
  <div class="inner">
36
94
 

2

修正

2020/02/20 22:22

投稿

katusi
katusi

スコア12

test CHANGED
File without changes
test CHANGED
@@ -30,55 +30,51 @@
30
30
 
31
31
  <main>
32
32
 
33
- <div id="section1">
33
+ <div id="section1">
34
34
 
35
35
  <div class="inner">
36
36
 
37
37
  <div class="slider">
38
38
 
39
- <ul>
40
-
41
- <li class="slide01">
39
+ <div class="slide01">
42
-
40
+
43
- <img class="img01" src="https://writer-station.com/img/front/pc_img/slider03.svg?1578457100" alt="">
41
+ <img class="img01" src="https://writer-station.com/img/front/pc_img/slider03.svg?1578457100" alt="">
44
-
42
+
45
- <p class="slide-text01">業界最高レベルの報酬をGET!!<br>ご紹介する仕事のすべてが自社案件。<br>お支払いも編集部から直接振込。
43
+ <p class="slide-text01">業界最高レベルの報酬をGET!!<br>ご紹介する仕事のすべてが自社案件。<br>お支払いも編集部から直接振込。
46
-
44
+
47
- <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
45
+ <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
48
-
46
+
49
- </p>
47
+ </p>
50
-
48
+
51
- </li>
49
+ </div>
52
-
50
+
53
- <li class="slide02">
51
+ <div class="slide02">
54
-
52
+
55
- <img class="img02" src="https://writer-station.com/img/front/pc_img/slider01.svg?1578457100" alt="">
53
+ <img class="img02" src="https://writer-station.com/img/front/pc_img/slider01.svg?1578457100" alt="">
56
-
54
+
57
- <p class="slide-text02">ライター経験者はもちろん、未経験の方も大歓迎！<br><span class="attention">※応募時に課題文を提出いただき合否の判定をいたします。</span>
55
+ <p class="slide-text02">ライター経験者はもちろん、未経験の方も大歓迎！<br><span class="attention">※応募時に課題文を提出いただき合否の判定をいたします。</span>
58
-
56
+
59
- <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
57
+ <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
60
-
58
+
61
- </p>
59
+ </p>
62
-
60
+
63
- </li>
61
+ </div>
64
-
62
+
65
- <li class="slide03">
63
+ <div class="slide03">
66
-
64
+
67
- <img class="img03" src="https://writer-station.com/img/front/pc_img/slider02.svg?1578457100" alt="">
65
+ <img class="img03" src="https://writer-station.com/img/front/pc_img/slider02.svg?1578457100" alt="">
68
-
66
+
69
- <p class="slide-text02">編集部がしっかりサポート。<br>働きながらWEBライティングを学べます。
67
+ <p class="slide-text02">編集部がしっかりサポート。<br>働きながらWEBライティングを学べます。
70
-
68
+
71
- <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
69
+ <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
72
-
70
+
73
- </p>
71
+ </p>
74
-
72
+
75
- </li>
73
+ </div>
76
-
77
- </ul>
78
74
 
79
75
  </div><!--slide-->
80
76
 
81
- </div>
77
+ </div>
82
78
 
83
79
  </div>
84
80
 

1

誤字

2020/02/20 16:49

投稿

katusi
katusi

スコア12

test CHANGED
File without changes
test CHANGED
@@ -2,65 +2,159 @@
2
2
 
3
3
  <!DOCTYPE html>
4
4
 
5
- <html lang="ja">
5
+ <html lang="ja" prefix="og: http://ogp.me/ns#">
6
6
 
7
7
  <head>
8
8
 
9
9
  <meta charset="utf-8">
10
10
 
11
- <title>slide-html</title>
12
-
13
- <link rel="stylesheet" href="style.css" type="text/css">
11
+ <link rel="stylesheet" href="practice13.css" type="text/css">
14
-
15
- <link rel="stylesheet" href="css/ress.css">
12
+
16
-
17
- <link rel="stylesheet" href="css/slick.css">
13
+ <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
18
-
14
+
19
- <link rel="stylesheet" href="css/slick-theme.css">
15
+ <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
16
+
17
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
18
+
19
+ <script async src="https://platform.twitter.com/widgets.js"></script>
20
+
21
+ <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
22
+
23
+ <title>practice13</title>
20
24
 
21
25
  </head>
22
26
 
27
+
28
+
23
29
  <body>
24
30
 
31
+ <main>
32
+
33
+ <div id="section1">
34
+
25
- <div class="imgs">
35
+ <div class="inner">
36
+
26
-
37
+ <div class="slider">
38
+
39
+ <ul>
40
+
41
+ <li class="slide01">
42
+
43
+ <img class="img01" src="https://writer-station.com/img/front/pc_img/slider03.svg?1578457100" alt="">
44
+
45
+ <p class="slide-text01">業界最高レベルの報酬をGET!!<br>ご紹介する仕事のすべてが自社案件。<br>お支払いも編集部から直接振込。
46
+
47
+ <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
48
+
49
+ </p>
50
+
51
+ </li>
52
+
53
+ <li class="slide02">
54
+
55
+ <img class="img02" src="https://writer-station.com/img/front/pc_img/slider01.svg?1578457100" alt="">
56
+
57
+ <p class="slide-text02">ライター経験者はもちろん、未経験の方も大歓迎！<br><span class="attention">※応募時に課題文を提出いただき合否の判定をいたします。</span>
58
+
59
+ <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
60
+
61
+ </p>
62
+
63
+ </li>
64
+
65
+ <li class="slide03">
66
+
27
- <img src="https://writer-station.com/img/front/pc_img/slider02.svg?1578457100" alt="">
67
+ <img class="img03" src="https://writer-station.com/img/front/pc_img/slider02.svg?1578457100" alt="">
68
+
28
-
69
+ <p class="slide-text02">編集部がしっかりサポート。<br>働きながらWEBライティングを学べます。
70
+
29
- <img src="https://writer-station.com/img/front/pc_img/slider01.svg?1578457100" alt="">
71
+ <br><span class="gray">在宅ライター募集します。「ライターステーション」</span>
72
+
30
-
73
+ </p>
74
+
75
+ </li>
76
+
77
+ </ul>
78
+
79
+ </div><!--slide-->
80
+
31
- </div>
81
+ </div>
32
-
33
-
34
-
35
-
36
-
82
+
37
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
83
+ </div>
38
-
84
+
39
- <script src="js/slick.min.js"></script>
85
+ </main>
40
-
41
- <script src="js/practice13.js"></script>
86
+
87
+
42
88
 
43
89
  </body>
44
90
 
45
91
  </html>
46
92
 
47
-
48
-
49
93
  ```
50
94
 
51
95
  ```css
52
96
 
53
- .imgs {
97
+ #page_top {
54
-
98
+
55
- width: 400px;
99
+ width: 50px;
56
-
100
+
57
- height: 300px;
101
+ height: 50px;
102
+
103
+ position: fixed;
104
+
105
+ right: 2.5%;
106
+
107
+ bottom: 50px;
108
+
109
+ background: #B4E3F9; /*ボタンの色*/
110
+
111
+ opacity: 0.7;
112
+
113
+ border-radius: 50%; /*角の丸み*/
114
+
115
+ z-index: 1005;
116
+
117
+ }
118
+
119
+ #page_top a {
120
+
121
+ font-family: "Font Awesome 5 Free";
122
+
123
+ content: "\f102"; /*アイコン*/
124
+
125
+ font-weight: 900;
126
+
127
+ font-size: 25px;
128
+
129
+ color: #fff; /*アイコンの色*/
130
+
131
+ position: absolute;
132
+
133
+ width: 25px;
134
+
135
+ height: 25px;
136
+
137
+ top: 0;
138
+
139
+ bottom: 0;
140
+
141
+ right: 0;
142
+
143
+ left: 0;
144
+
145
+ margin: auto;
58
146
 
59
147
  text-align: center;
60
148
 
149
+ }
150
+
151
+ #section1 {
152
+
153
+ margin: 0;
154
+
61
155
  position: relative;
62
156
 
63
- left: 300px;
157
+ padding: 0;
64
158
 
65
159
  }
66
160
 
@@ -68,28 +162,68 @@
68
162
 
69
163
  ```js
70
164
 
71
- $('.imgs').slick({
72
-
73
- dots: true,
165
+ <script>
166
+
74
-
167
+ $(function() {
168
+
169
+ var pagetop = $("#page_top");
170
+
171
+ pagetop. hide();
172
+
173
+
174
+
175
+ $(window).scroll(function () {
176
+
177
+ if ($(this).scrollTop() > 500) {
178
+
179
+ pagetop.fadeIn();
180
+
181
+ } else {
182
+
183
+ pagetop.fadeOut();
184
+
185
+ }
186
+
75
- });
187
+ });
188
+
189
+ pagetop.click(function () {
190
+
191
+ $('body, html').animate({ scrollTop: 0 }, 800);
192
+
193
+ return false;
194
+
195
+ });
196
+
197
+ });
198
+
199
+ $(function() {
200
+
201
+ $('.slider').slick({
202
+
203
+
204
+
205
+ });
206
+
207
+ });
208
+
209
+
210
+
211
+ </script>
76
212
 
77
213
  ```
78
214
 
79
215
  ### 前提・実現したいこと
80
216
 
81
- jQueryを使いスライドを作りたいのですが、上記のように書いたところ何も変わりません。
217
+ 今現在模写をしていて、jQueryを使い画像のスライドを作りたいのですが、上記のように書いたところ何も変わりません。
82
-
83
- youtubeで(https://youtu.be/NTTOcMGURoI)を見て真似をしたのですが、、
218
+
84
-
85
- 以前違うサイトの模写slickを使いスライドを作った時はcssで親要素にposition: relative;,
219
+ あとsliderの中の文字を画像の左上に固定してそれも画像と同時に切り替えしたいです。
86
-
220
+
87
- 子要素にabsoluteを使ってやると上手くいったにですが、この動画を見る限りcssでそのようなことはせずともなるようだったので試すとダメでした。
221
+ pagetopにいくボタンは適応できたのですが、slickだけできません。
88
222
 
89
223
 
90
224
 
91
225
  ### 補足情報（FW/ツールのバージョンなど）
92
226
 
93
- 動画で言われているファイルについては動画通りにしました。
227
+ 元のサイトのURLは(https://writer-station.com/)です。
94
228
 
95
229
  よろしくお願いいたします。