teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問slickをCDNで実装したいが、画像が縦に並んでしまう。

編集履歴

質問編集履歴

6

タグ編集

2020/09/26 04:18

投稿

ma-ma-ma-ma
ma-ma-ma-ma

スコア1

test CHANGED
File without changes
test CHANGED
@@ -38,37 +38,21 @@
38
38
 
39
39
  <head>
40
40
 
41
- <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
41
+
42
-
43
- <meta http-equiv="Content-Language" content="ja">
44
-
45
- <meta http-equiv="Content-Style-Type" content="text/css">
46
-
47
- <meta name="google" content="nositelinkssearchbox" />
48
-
49
- <meta http-equiv="Expires" content="86400">
50
-
51
- <meta http-equiv="Pragma" content="no-cache">
52
-
53
- <meta http-equiv="Cache-Control" content="no-cache">
54
-
55
- <meta name="viewport" content="width=device-width, initial-scale=1">
56
42
 
57
43
  <!--省略-->
58
44
 
59
45
  <link href="../css/header.css" rel="stylesheet" type="text/css" media="all" />
60
46
 
47
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
48
+
61
- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
49
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
62
-
63
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
50
+
64
-
65
- <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
66
-
67
- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
51
+ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
68
-
69
- <!-- jQuery library (served from Google) -->
52
+
70
-
71
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
53
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
54
+
55
+
72
56
 
73
57
 
74
58
 

5

タグ編集

2020/09/26 04:18

投稿

ma-ma-ma-ma
ma-ma-ma-ma

スコア1

test CHANGED
File without changes
test CHANGED
@@ -38,6 +38,22 @@
38
38
 
39
39
  <head>
40
40
 
41
+ <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
42
+
43
+ <meta http-equiv="Content-Language" content="ja">
44
+
45
+ <meta http-equiv="Content-Style-Type" content="text/css">
46
+
47
+ <meta name="google" content="nositelinkssearchbox" />
48
+
49
+ <meta http-equiv="Expires" content="86400">
50
+
51
+ <meta http-equiv="Pragma" content="no-cache">
52
+
53
+ <meta http-equiv="Cache-Control" content="no-cache">
54
+
55
+ <meta name="viewport" content="width=device-width, initial-scale=1">
56
+
41
57
  <!--省略-->
42
58
 
43
59
  <link href="../css/header.css" rel="stylesheet" type="text/css" media="all" />

4

タグ編集

2020/09/25 10:19

投稿

ma-ma-ma-ma
ma-ma-ma-ma

スコア1

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  ### 該当のソースコード
30
30
 
31
- HTML
31
+ **HTML**
32
32
 
33
33
 
34
34
 
@@ -40,7 +40,7 @@
40
40
 
41
41
  <!--省略-->
42
42
 
43
-
43
+ <link href="../css/header.css" rel="stylesheet" type="text/css" media="all" />
44
44
 
45
45
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
46
46
 
@@ -124,7 +124,7 @@
124
124
 
125
125
 
126
126
 
127
- CSS
127
+ **CSS(header.css)**
128
128
 
129
129
 
130
130
 

3

タグ編集

2020/09/25 06:49

投稿

ma-ma-ma-ma
ma-ma-ma-ma

スコア1

test CHANGED
File without changes
test CHANGED
@@ -30,13 +30,17 @@
30
30
 
31
31
  HTML
32
32
 
33
+
34
+
33
35
  <html>
34
36
 
35
37
 
36
38
 
37
39
  <head>
38
40
 
39
-
41
+ <!--省略-->
42
+
43
+
40
44
 
41
45
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
42
46
 
@@ -94,7 +98,7 @@
94
98
 
95
99
 
96
100
 
97
-
101
+ <div class="contents">
98
102
 
99
103
  <div class="sliderArea">
100
104
 
@@ -108,9 +112,9 @@
108
112
 
109
113
  <div><a href="" target="_top"><img src="aa.jpg" border="0" width="800" /></a></div>
110
114
 
111
- </div><div>
115
+ </div></div>
116
+
112
-
117
+ </div>
113
-
114
118
 
115
119
  </body>
116
120
 
@@ -118,6 +122,216 @@
118
122
 
119
123
 
120
124
 
125
+
126
+
127
+ CSS
128
+
129
+
130
+
131
+
132
+
133
+ * {
134
+
135
+ font-size: 12px;
136
+
137
+ color: #666666;
138
+
139
+ padding: 0;
140
+
141
+ margin: 0;
142
+
143
+ border: 1;
144
+
145
+ letter-spacing: 2px;
146
+
147
+ }
148
+
149
+
150
+
151
+
152
+
153
+
154
+
155
+
156
+
157
+ body {
158
+
159
+ width: 100%;
160
+
161
+ margin-right: auto;
162
+
163
+ margin-left: auto;
164
+
165
+ text-align: center;
166
+
167
+ }
168
+
169
+
170
+
171
+ .contents {
172
+
173
+ width: auto;
174
+
175
+ background-color: #FFFFFF;
176
+
177
+ margin-right: auto;
178
+
179
+ margin-left: auto;
180
+
181
+ text-align: center;
182
+
183
+ }
184
+
185
+
186
+
187
+
188
+
189
+
190
+
191
+ /*スライダー*/
192
+
193
+
194
+
195
+
196
+
197
+ .sliderArea {
198
+
199
+ max-width: 100%;
200
+
201
+ margin: 0 auto;
202
+
203
+ padding: 0 25px;
204
+
205
+ }
206
+
207
+
208
+
209
+ .sliderArea {
210
+
211
+ max-width: 800px;
212
+
213
+ }
214
+
215
+
216
+
217
+ .slick-slide {
218
+
219
+ margin: 0 5px;
220
+
221
+ }
222
+
223
+
224
+
225
+ .slick-slide img {
226
+
227
+ width: 100%;
228
+
229
+ height: auto;
230
+
231
+ }
232
+
233
+
234
+
235
+ .slick-prev,
236
+
237
+ .slick-next {
238
+
239
+ z-index: 1;
240
+
241
+ }
242
+
243
+
244
+
245
+ .slick-prev:before,
246
+
247
+ .slick-next:before {
248
+
249
+ color: #000;
250
+
251
+ }
252
+
253
+
254
+
255
+ .slick-slide {
256
+
257
+ transition: all ease-in-out .3s;
258
+
259
+ opacity: .2;
260
+
261
+ }
262
+
263
+
264
+
265
+ .slick-active {
266
+
267
+ opacity: 1;
268
+
269
+ }
270
+
271
+
272
+
273
+ .slick-current {
274
+
275
+ opacity: 1;
276
+
277
+ }
278
+
279
+
280
+
281
+ .thumb {
282
+
283
+ margin: 20px 0 0;
284
+
285
+ }
286
+
287
+
288
+
289
+ .thumb .slick-slide {
290
+
291
+ cursor: pointer;
292
+
293
+ }
294
+
295
+
296
+
297
+ .thumb .slick-slide:hover {
298
+
299
+ opacity: .7;
300
+
301
+ }
302
+
303
+
304
+
305
+ /*====================================================================
306
+
307
+ .full-screen
308
+
309
+ ====================================================================*/
310
+
311
+
312
+
313
+ .full-screen .slick-list {
314
+
315
+ overflow: visible;
316
+
317
+ }
318
+
319
+
320
+
321
+ .full-screen.slider {
322
+
323
+ max-width: 800px;
324
+
325
+ margin: 0 auto;
326
+
327
+ }
328
+
329
+
330
+
331
+
332
+
333
+
334
+
121
335
  ### 試したこと
122
336
 
123
337
 

2

タグ編集

2020/09/25 06:43

投稿

ma-ma-ma-ma
ma-ma-ma-ma

スコア1

test CHANGED
File without changes
test CHANGED
@@ -29,6 +29,12 @@
29
29
  ### 該当のソースコード
30
30
 
31
31
  HTML
32
+
33
+ <html>
34
+
35
+
36
+
37
+ <head>
32
38
 
33
39
 
34
40
 
@@ -78,7 +84,15 @@
78
84
 
79
85
  </script>
80
86
 
87
+ </head>
88
+
89
+
90
+
91
+
92
+
81
- ＊
93
+ <body>
94
+
95
+
82
96
 
83
97
 
84
98
 
@@ -98,6 +112,10 @@
98
112
 
99
113
 
100
114
 
115
+ </body>
116
+
117
+ </html>
118
+
101
119
 
102
120
 
103
121
  ### 試したこと

1

初心者マーク

2020/09/25 03:24

投稿

ma-ma-ma-ma
ma-ma-ma-ma

スコア1

test CHANGED
File without changes
test CHANGED
@@ -27,6 +27,8 @@
27
27
 
28
28
 
29
29
  ### 該当のソースコード
30
+
31
+ HTML
30
32
 
31
33
 
32
34