Q&AJqueryのslickを使うとCSSが反映されないので、それを治したいです。
<div class="realnews"> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> <div class="newshop"> <div class="shopimg"> <img src="img/302a635dc64144975b5cd35a7324e35d-500x350.jpg" alt=""> </div> <div class="letter"> <p>2019.04.18</p> <h3>「サツドラ奈良もちいどの店」オープン！</h3> <p>〒630-8222 奈良県奈良市餅飯殿町２９−１</p> <p>TEL:0472-25-3525/通常営業時間:9:00-21:00</p> <p class="map">MAP</p> <p class="newleeteer">店舗情報</p> </div> </div> ```ここに言語を入力 コード
.shopimg img{
width: 200px;
padding-left: 30px;
}
.newshop{
display: flex;
border: 3px solid #DDFFFF;
width: 45%;
margin:0 auto;
padding-top: 20px;
}
.letter{
padding-left:20px;
}
.map{
border: 1px solid black;
width: 40%;
padding: 10px;
text-align: center;
background: #EEEEEE;
margin-bottom: 20px;
margin-top: 10px;
border-radius: 5px;
}
.newleeteer{
border: 1px solid black;
width: 40%;
padding: 10px;
text-align: center;
background: #EEEEEE;
border-radius: 5px;
}
.map, .newleeteer{
display: inline-block;
}
.map:hover{
background: white;
}
.newleeteer:hover{
background: #FFF;
}
.new{
color: #444;
font-size: 24px;
display: flex;
align-items: center;
width: 35%;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 20px;
}
.new:before, .new:after {
content: "";
flex-grow: 1;
border-top: 4px dotted #444;
display: block;
}
.new:before {
margin-right: .5em;
}
.new:after {
margin-left: .5em;
}
コード
`Jquery
$(function() {
$('.realnews').slick({
infinite: true,
dots: false,
slidesToShow: 1,
centerMode: true, //要素を中央寄せ
centerPadding:'250px', //両サイドの見えている部分のサイズ
autoplay:true, //自動再生
responsive: [{
breakpoint: 480,
settings: {
centerMode: false,
}
}]
});
});
</script>
回答2件
0
自己解決
slickの機能に邪魔されてCSSが反映されないだけでした。
新しくもう一つClassを追加して、Slickの機能と喧嘩しないように設定したら治りました
投稿2019/09/13 13:51
総合スコア61
0
「CSSが当たらない」とありますが、どの要素のどのCSSが本来当たるはずなのに当たらないとかをもう少し明確に記載いただければわかるのですが、これだけですとちょっと自分はどうしたいのかよく分からないです。
直接的な解決ではないかもしれないですが、JQueryのslickを与えている$('.realnews')が添付いただいているHTMLに存在しないので、そこは気になりました。
投稿2019/09/13 07:25
総合スコア348
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。