質問編集履歴

1

css追加

2020/04/25 11:15

投稿

mogumogu22
mogumogu22

スコア24

test CHANGED
File without changes
test CHANGED
@@ -247,3 +247,131 @@
247
247
 
248
248
 
249
249
  ```
250
+
251
+ ```css
252
+
253
+ .slider-box{position: relative;}/* ボタンを画像上からの位置でposition取らすため設置*/
254
+
255
+ #slider{
256
+
257
+ position: relative;
258
+
259
+ height: 38em;
260
+
261
+ background-color: antiquewhite;
262
+
263
+ margin: 0 auto;
264
+
265
+ width: 100%;
266
+
267
+ overflow: hidden;
268
+
269
+ }
270
+
271
+ #slider2{
272
+
273
+ position: relative;
274
+
275
+ height: 38em;
276
+
277
+ background-color: antiquewhite;
278
+
279
+ margin: 0 auto;
280
+
281
+ width: 100%;
282
+
283
+ overflow: hidden;
284
+
285
+ }
286
+
287
+
288
+
289
+ .slide{
290
+
291
+ /*---中央よせ----*/
292
+
293
+ margin:0 auto;
294
+
295
+ height: 38em;
296
+
297
+ position: absolute;
298
+
299
+ width: 100%;
300
+
301
+ opacity: 0; /* safariではopacityは%だと機能しないので0〜1でかく*/
302
+
303
+ -webkit-transition: all 1s;
304
+
305
+ -moz-transition: all 1s;
306
+
307
+ -ms-transition: all 1s;
308
+
309
+ -o-transition: all 1s;
310
+
311
+ transition: all 2s;
312
+
313
+ }
314
+
315
+
316
+
317
+
318
+
319
+ .slide img{
320
+
321
+ /*---中央よせ----*/
322
+
323
+ position: absolute;
324
+
325
+ top: 0;
326
+
327
+ left: 0;
328
+
329
+ right: 0;
330
+
331
+ bottom: 0;
332
+
333
+ margin: auto;
334
+
335
+ width: 100%;
336
+
337
+ user-select: none; /* CSS3 */
338
+
339
+ -moz-user-select: none; /* Firefox */
340
+
341
+ -webkit-user-select: none; /* Safari、Chromeなど */
342
+
343
+ -ms-user-select: none; /* IE10から */
344
+
345
+ }
346
+
347
+ .display{opacity: 1;}
348
+
349
+ .slide-button{display: inline-block;}
350
+
351
+
352
+
353
+ .arrow_w{width: 5em;}
354
+
355
+ .prev{
356
+
357
+ position: absolute;
358
+
359
+ top: 18em;
360
+
361
+ z-index: 1000;
362
+
363
+ }
364
+
365
+ .next{
366
+
367
+ position: absolute;
368
+
369
+ top: 15em;
370
+
371
+ right: 0;
372
+
373
+ z-index: 1000;
374
+
375
+ }
376
+
377
+ ```