質問編集履歴

1

CSS追記

2019/11/22 10:47

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -361,3 +361,81 @@
361
361
  </html>
362
362
 
363
363
  ```
364
+
365
+
366
+
367
+ ```css
368
+
369
+
370
+
371
+ .slider-wrap {
372
+
373
+ width: 600px;
374
+
375
+ padding: 10px;
376
+
377
+ margin: 0 auto;
378
+
379
+ border-radius: 10px;
380
+
381
+ background-color: #DDD;
382
+
383
+ box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);
384
+
385
+ }
386
+
387
+ .slider-area {
388
+
389
+ position: relative;
390
+
391
+ width: 600px;
392
+
393
+ height: 300px;
394
+
395
+ background-color: #FFF;
396
+
397
+ overflow: hidden;
398
+
399
+ }
400
+
401
+ .slider-list {
402
+
403
+ position: absolute;
404
+
405
+ top: 0;
406
+
407
+ left: 0;
408
+
409
+ width: 2400px;
410
+
411
+ height: 300px;
412
+
413
+ }
414
+
415
+ .slider-list > li { float: left; }
416
+
417
+ .slider-ctrl-btn {
418
+
419
+ position: absolute;
420
+
421
+ top: 50%;
422
+
423
+ width: 30px;
424
+
425
+ height: 30px;
426
+
427
+ margin-top: -15px;
428
+
429
+ cursor: pointer;
430
+
431
+ border-radius: 15px;
432
+
433
+ background-color: rgba(255, 255, 255, 0.5);
434
+
435
+ }
436
+
437
+ .slider-ctrl-btn.prev { left: 30px; }
438
+
439
+ .slider-ctrl-btn.next { right: 30px; }
440
+
441
+ ```