Q&A
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>practice14</title> 6 <meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2"> 7 <link rel="stylesheet" href="practice14.css" type="text/css"> 8 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> 11 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> 12 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> 13 <script async src="https://platform.twitter.com/widgets.js"></script> 14 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 15</head> 16<body> 17<main> 18 <div id="section1"> 19 <div class="inner"> 20 <div class="slider"> 21 <div class="slide01"> 22 <a href="https://satudora.jp/event/16965/"> 23 <img src="https://satudora.jp/uploads/2019/02/bn_1711docomo_l-1000x598.jpg" alt=""> 24 <p><span class="background-pink">キャンペーン</span><span class="big">サツドラでdポイントがたまる！つかえる！</span></p> 25 </a> 26 </div><!--slide01--> 27 <div class="slide02"> 28 <a href="https://satudora.jp/event/16965/"> 29 <img src="https://satudora.jp/uploads/2018/11/IMG_5176.jpg" alt=""> 30 <p><span class="background-brown">お知らせ</span><span class="big">ふたりの妊活 応援プロジェクト</span></p> 31 </a> 32 </div><!--slide02--> 33 <div class="slide03"> 34 <a href="https://satudora.jp/event/16965/"> 35 <img src="https://satudora.jp/uploads/2020/02/satsudora_10_202002_TOP_1000x598.jpg" alt=""> 36 <p><span class="background-brown">お知らせ</span><span class="big">楽天ペイアプリでのお支払いで、楽天ポイント最大10%還元!!</span></p> 37 </a> 38 </div><!--slide03--> 39 <div class="slide04"> 40 <a href="https://satudora.jp/event/16965/"> 41 <img src="https://satudora.jp/uploads/2020/02/83a6eca0f87d1fce17b7fcea2b5e7053.jpg" alt=""> 42 <p><span class="background-pink">キャンペーン</span><span class="big">auPAYで最大20%ポイント還元!!</span></p> 43 </a> 44 </div><!--slide04--> 45 <div class="slide05"> 46 <a href="https://satudora.jp/event/16965/"> 47 <img src="https://satudora.jp/uploads/2020/02/90bf4a46e2ad85477443414f310d91ca.jpg" alt=""> 48 <p><span class="background-pink">キャンペーン</span><span class="big">App Store & iTunes ギフトカードキャンペーン実施中</span></p> 49 </a> 50 </div><!--slide05--> 51 <div class="slide06"> 52 <a href="https://satudora.jp/event/16965/"> 53 <img src="https://satudora.jp/uploads/2020/01/2b23bfd951509b71d4e9dcf439031616.jpg" alt=""> 54 <p><span class="background-pink">キャンペーン</span><span class="big">サツドラ商品券1,000円分が当たる！サツドラ×エリエール共同企画 生活応援キャンペーン！</span></p> 55 </a> 56 </div><!--slide06--> 57 <div class="slide07"> 58 <a href="https://satudora.jp/event/16965/"> 59 <img src="https://satudora.jp/uploads/2020/01/aa3748927803878abb1608faa1b2e71a.jpg" alt=""> 60 <p><span class="background-pink">キャンペーン</span><span class="big">当選者総額30万EZOポイントプレゼント！花王オーラルケア商品を使ってよい歯＆いい歯でハハハ！キャンペーン！</span></p> 61 </a> 62 </div><!--slide07--> 63 <div class="slide08"> 64 <a href="https://satudora.jp/event/16965/"> 65 <img src="https://satudora.jp/uploads/2020/01/adc4ff2b88f488d5db2fd255b71bfd58.png" alt=""> 66 <p><span class="background-pink">キャンペーン</span><span class="big">エフティ資生堂から純白専科 すっぴん色づく美容液フォンデュ 新発売キャンペーン</span></p> 67 </a> 68 </div><!--slide08--> 69 <div class="slide09"> 70 <a href="https://satudora.jp/event/16965/"> 71 <img src="https://satudora.jp/uploads/2020/01/905948ff8df11986a7ff2621cd2f3e26.png" alt=""> 72 <p><span class="background-pink">キャンペーン</span><span class="big">コーセーコスメポートからジュレームアミノシュープリーム新発売</span>/p> 73 </a> 74 </div><!--slide09--> 75 <div class="slide10"> 76 <a href="https://satudora.jp/event/16965/"> 77 <img src="https://satudora.jp/uploads/2020/01/62a6baaa9ae3b7942f536977a57da78d.png" alt=""> 78 <p><span class="background-pink">キャンペーン</span><span class="big">アサヒ飲料から『守る働く乳酸菌』『届く強さの乳酸菌 Ｗ』お買い得なキャンペーン</span></p> 79 </a> 80 </div><!--slide10--> 81 <div class="slide11"> 82 <a href="https://satudora.jp/event/16965/"> 83 <img src="https://satudora.jp/uploads/2019/08/satsudorawebbaneer_last.png" alt=""> 84 <p><span class="background-brown">お知らせ</span><span class="big">サツドラFES 2019 ご来場ありがとうございました</span></p> 85 </a> 86 </div><!--slide11--> 87 <div class="slide12"> 88 <a href="https://satudora.jp/event/16965/"> 89 <img src="https://satudora.jp/uploads/2019/09/29e244d86176b8508c841f2e03bd5385.jpg" alt=""> 90 <p><span class="background-brown">お知らせ</span><span class="big">全レジで対応可能!4つのスマホ決済が可能になりました</span></p> 91 </a> 92 </div><!--slide12--> 93 <div class="slide13"> 94 <a href="https://satudora.jp/event/16965/"> 95 <img src="https://satudora.jp/uploads/2019/07/95621cc9751c7ba3dbd17bdd1de7d960.png" alt=""> 96 <p><span class="background-brown">お知らせ</span><span class="big">処方箋の受付はネット予約が便利です</span></p> 97 </a> 98 </div><!--slide13--> 99 <div class="slide14"> 100 <a href="https://satudora.jp/event/16965/"> 101 <img src="https://satudora.jp/uploads/2019/02/d7a68982f962c9f2af8ce3b5c079e93c.jpg" alt=""> 102 <p><span class="background-brown">お知らせ</span><span class="big">全く新しいセルフスキンケア LIFTER</span></p> 103 </a> 104 </div><!--slide14--> 105 </div><!--slider--> 106 <div class="arrows"> 107 <i class="fas fa-angle-right"></i> 108 <i class="fas fa-angle-left"></i> 109 </div> 110 </div><!--inner--> 111 </div><!--section1--> 112</main> 113</body> 114</html>
CSS
1#section1 { 2 position: relative; 3 margin: 0; 4 padding: 0; 5} 6.slider { 7 position: relative; 8 margin: 0; 9 padding: 0; 10 display: block; 11 12} 13.slick-center{ 14 margin-right: 30px; 15 margin-left: 30px; 16} 17 18.slider img { 19 width: 100%; 20 height: 100%; 21 border-radius: 10px; 22 position: relative; 23 padding: 0; 24 margin: 0; 25} 26.slide01, .slide02, .slide03, .slide04, .slide05, .slide06, .slide07, .slide08, .slide09, .slide10, .slide11, .slide12, .slide13, .slide14 { 27 display: block; 28 margin: 0; 29 padding: 0; 30 width: 40%; 31 height: 23rem; 32} 33.background-pink { 34 background-color: #EEA2F2; 35 color: white; 36 padding: 0.5% 0.7% 0.5% 1%; 37 margin: 0; 38 text-align: center; 39 border-radius: 3px; 40 font-size: 0.95rem; 41} 42.background-brown { 43 background-color: #D4975B; 44 color: white; 45 padding: 0.5% 0.7% 0.5% 1%; 46 margin: 0; 47 text-align: center; 48 border-radius: 3px; 49 font-size: 0.95rem; 50} 51.big { 52 font-size: 1.4rem; 53 font-weight: 900; 54 color: black; 55 margin: 0; 56 padding: 0; 57} 58.slider { 59 display: block; 60 position: absolute; 61 z-index: 1001; 62 margin: 0; 63 padding: 0; 64 border: 1px solid red; 65} 66i { 67 font-size: 3rem; 68 font-weight: 100; 69 background-color: #3E5FAA; 70 outline: 5px solid #F4FBFE; 71 border-radius: 50%; 72 width: 50px; 73 height: 50px; 74 text-align: center; 75 color: white; 76 left: 50%; 77 margin: 0; 78 padding: 0; 79 z-index: 1001; 80}
js
1<script> 2$(function() { 3 $('.slider').slick({ 4 autoplay: true, 5 autoplaySpeed: 2500, 6 speed: 800, 7 arrows: false, 8 centerMode: true, 9 centerPadding: '27%', 10 aroows: true, 11 12 }); 13 14 }); 15</script>
前提・実現したいこと
スライドの矢印を作っているのですが、スライドするとsliderのpadding-bottomが勝手に大きくなり下の要素の位置が変わってしまいます。どこを修正すればいいでしょうか？
あと、矢印を元サイトのようにしたいのですが、これはfont-awesomeを使うのでしょうか？
自分は、font-awesomeを使っていますが矢印の機能が上手く実装できませんでした。矢印の実装、配置を教えていただきたいです。
そしてもう1つ、左右の画像を暗くしたいのですがどうすればいいでしょうか？
補足情報（FW/ツールのバージョンなど）
模写をしているので元サイトのようにしたいです。
質問が多いですがよろしくお願いいたします！！
回答1件
0
ベストアンサー
スライドするとsliderのpadding-bottomが勝手に大きくなり下の要素の位置が変わってしまいます。
.slick-center{ margin-right: 30px; margin-left: 30px; }
この記述が問題になっているようです。
矢印の作り方や左右の画像については、せっかくお手本があるのでブラウザの検証ツールをつかって元サイトがどのように実装しているかを見てみるのが一番勉強になると思います。（勉強のために模写をされているのだと思いますので）
投稿2020/02/26 14:33
総合スコア461
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。