ヘッダーに画像のスライド配置したいです。
htmlに<li>タグで画像を設定して、スライドする為にcssで3枚の画像を同じ場所に配置したいのですがうまくできません。
spにはdisplay: none;
pcにはdisplay: block;
をhero-imageに入れ試しましたが、何も変わりませんでした。
ご教授よろしくお願いいたします。
html
1<!--slide--> 2<div class="hero-image"> 3 <ul class="hero-list bxslider"> 4 <li><img src="images/home/kv01.jpg" alt="rcudesign社内の仕事の様子"></li> 5 <li><img src="images/home/kv02.jpg" alt="rcudesign社内の仕事の様子"></li> 6 <li><img src="images/home/kv03.jpg" alt="rcudesign社内の仕事の様子"></li> 7 </ul> 8 <img src="images/home/kv_logo.png" alt="rcudesign" class="logo-img__center"> 9 </div> 10<!--/slide-->
css
1html{ 2 font-size: 62.5%;/*16px×62.5%=10px*/ 3} 4body{ 5 color: #333; 6 font-family: 'Montserrat', 'Noto Sans Jp', sans-serif; 7 font-style: 1.6rem; 8 font-feature-settings: "palt"; 9 letter-spacing: 0.025em; 10} 11a{ 12 text-decoration: none; 13 color: #333; 14} 15img{ 16 max-width: 100%; 17 height: auto; 18} 19/*------------------------------------------------------ 20 * utility 21------------------------------------------------------*/ 22.wrapper{ 23 box-sizing: border-box; 24 padding: 0 20px; 25} 26.page{ 27 margin-top: 72px; 28} 29.text-center{ 30 text-align: center; 31} 32.img-pc{ 33 display: none; 34} 35 36.bg-gray{ 37 background-color: #e6e6e6; 38} 39.bg-lightgray{ 40 background-color: #f4f4f4; 41} 42 43 44/*------------------------------------------------------ 45 * section 46------------------------------------------------------*/ 47.section-header{ 48 padding: 75px 0 55px; 49} 50.section-header2{ 51 padding: 75px 0 75px; 52} 53.section-header3{ 54 padding: 75px 0 55px; 55} 56.section-body{ 57 padding-bottom: 55px; 58} 59.section-body2{ 60 padding-bottom: 75px; 61} 62.section-body3{ 63 padding-bottom: 0; 64} 65.section-footer{ 66 padding: 0 56px 75px; 67} 68.section-footer2{ 69 padding: 0; 70} 71/*------------------------------------------------------ 72 * header 73------------------------------------------------------*/ 74.header{ 75 position: fixed; 76 top: 0; 77 left: 0; 78 z-index: 50; 79 width: 100%; 80 padding: 20px 20px 16px; 81 background-color: #fff; 82} 83.header-inner{ 84 padding-left: 0; 85} 86/*------------------------------------------------------ 87 * hero-image 88------------------------------------------------------*/ 89.hero-image{ 90 position: relative; 91 margin-top: 72px; 92} 93.img-sp{ 94 display: none; 95} 96.img-pc{ 97 display: block; 98}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。