Q&A
タグ「Java」と「JavaScript」間違えてません？
スライドショー画像の幅と高さをユーザーの画面サイズに合わせながら次のコンテンツを下に表示したい
スライドショーの画像の幅と高さは指定しないで、下のコンテンツ（class="main-contents"）をスライドショーの下にもってきたいのですが、どうしても画像に次のコンテンツが重なってしまいます。
なにか他に方法があったら教えてくださいm(_ _)m
幅か高さのどちらかを指定しないとできないのであれば、高さは600pxで固定でも良いのですが、横の画像がきれいに縮小してセンタリングになるようにしたいです。
分かる方がいましたら、ご伝授お願いいたします。
html
1<!doctype html> 2 3<html lang="ja"> 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 7<meta name="format-detection" content="telephone=no"> 8<meta name="Description" content="" /> 9<meta name="Keywords" content="" /> 10<meta http-equiv="Content-Style-Type" content="text/css" /> 11<title>サイト1</title> 12<link rel="stylesheet" href="css/main.css"> 13<link rel="stylesheet" href="css/menu.css"> 14<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 15</head> 16<body> 17<div id="warp"> 18<header class="header"> 19 <div class="sns_icon"> 20 <ul class="sns_l"> 21 <li class="sns_l_1"><a href="#"><img src="images/icon_line.png" alt="LINE"></a></li> 22 <li class="sns_l_1"><a href="#"><img src="images/icon_insta.png" alt="instagram"></a></li> 23 <li class="sns_l_1"><a href="#"><img src="images/icon_cart.png" alt="オンラインショップ"></a></li> 24 </ul> 25 </div> 26 <h1 class="header__logo"> 27 <a href="#" class="header__logo-link"><img src="images/logo.png" alt=""></a> 28 </h1> 29 <div class="nav__btn js-menu"> 30 <a href="javascript:void(0)" class="nav__btn-link"> 31 <div id="humberger"> 32 <div></div> 33 <div></div> 34 <div></div> 35 </div> 36 </a> 37 </div> 38</header> 39 40 <!--ナビここから--> 41 <div class="nav"> 42 <div class="nav__overlay js-menu"></div> 43 <div class="nav__content"> 44 <div class="nav__btn js-menu"> 45 <a href="javascript:void(0)" class="nav__btn-link"> 46 <span class="dli-close"></span> 47 </a> 48 </div> 49 <nav class="nav__inner"> 50 <div id="globalMenuSp"> 51 <ul id="manu" class="menu"> 52 <li><a href="#">実店舗のご案内</a></li> 53 <ul> 54 <li class="tenpo"><a href="#">ショップ</a></li> 55 <li class="tenpo"><a href="#">カフェ</a></li> 56 <li class="tenpo"><a href="#">アクセス</a></li> 57 <li class="tenpo"><a href="#">カレンダー</a></li> 58 </ul> 59 <li><a href="#">ご案内</a></li> 60 <li><a href="#">オンラインショップ</a></li> 61 <li><a href="#">お問い合わせ</a></li> 62 <div class="menu_icon"> 63 <div class="menu_icon1"> 64 <div class="menu_sns_icon"> 65 <p class="sns_icon1"><a href="#"><img src="images/icon_line.png" alt="LINE"></a></p> 66 <p class="sns_icon1"><a href="#"><img src="images/icon_insta.png" alt="instagram"></a></p> 67 <p class="sns_icon1"><a href="#"><img src="images/icon_cart.png" alt="オンラインショップ"></a></p> 68 </div> 69 </div> 70 </div> 71 </ul> 72 </div> 73 </nav> 74 </div> 75 </div> 76 <!--ナビここまで--> 77 78 <!--スライドショーここから--> 79 <ul id="slideshow" class="slideshow"> 80 <li class="showSlide"><img src="images/main01.png"></li> 81 <li><img src="images/main02.png"></li> 82 <li><img src="images/main03.png"></li> 83 </ul> 84 <script src="js/slideshow.js"></script> 85 <!--スライドショーここまで--> 86<main class="main-contents"> 87 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 88</main> 89<footer class="footer"> 90 <p>footer</p> 91</footer> 92<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 93<script type="text/javascript" src="js/menu.js"></script> 94 95</div> 96</body> 97</html>
CSS
1body{ 2 margin:0px; /* ページ全体のmargin */ 3 padding:0px; /* ページ全体のpadding */ 4 text-align:center; /* 下記のautoに未対応用のセンタリング */ 5} 6 7 8#warp 9 { 10 margin-left:auto; /* 左側マージンを自動的に空ける */ 11 margin-right:auto; /* 右側マージンを自動的に空ける */ 12 text-align:left; /* 中身を左側表示に戻す */ 13 width:100%; /* 幅を決定する */ 14 } 15 16/*ヘッダー*/ 17 18 19.header__logo-link img{ 20 height: 70px; 21 width:auto; 22} 23 24 25.sns_icon{ 26 27} 28 29.sns_l{ 30 display: table; 31 32} 33 34.sns_l_1{ 35 display: table-cell; 36 37} 38 39.sns_l_1 a img{ 40 width: 22px; 41 padding-right: 15px; 42 43} 44 45/*スライドショー*/ 46 47.slideshow { 48 width: 100%; 49 height: 100%; 50 list-style-type: none; 51 position: relative; 52} 53 54.slideshow > li { 55 opacity: 0; 56 position: absolute; 57 transition: opacity 3s ease-in-out; 58} 59 60.slideshow > li.showSlide { 61 opacity: 1; 62} 63 64.slideshow > li > img { 65 display: block; 66 mnax-height: 100vh; 67 width: 100%; 68 object-fit: cover; 69 margin: 0 auto; 70} 71 72/* SP用メディアクエリ */ 73@media screen and (max-width:600px){ 74 .slideshow{ 75 width: 100%; 76 } 77} 78 79 80.main-contents{ 81 82} 83 84.header{ 85 display: -webkit-box; 86 display: -ms-flexbox; 87 display: flex; 88 position: fixed; 89 top: 0; 90 padding: 5px 10px; 91 width: 100%; 92 height: 100px; 93 border-bottom: 1px solid #ccc; 94 -webkit-box-pack: justify; 95 -ms-flex-pack: justify; 96 justify-content: space-between; 97 -webkit-box-align: center; 98 -ms-flex-align: center; 99 align-items: center; 100 -webkit-box-sizing: border-box; 101 box-sizing: border-box; 102 background: #fff; 103 overflow: hidden; 104 z-index: 10; 105} 106.header__logo{ 107 display: -webkit-box; 108 display: -ms-flexbox; 109 display: flex; 110 top: 0; 111} 112.header__logo-link{ 113 color: #333; 114 font-size: 11px; 115 font-size: 1.1rem; 116 font-weight: normal; 117 text-decoration: none; 118} 119.header .nav__btn{ 120 display: -webkit-box; 121 display: -ms-flexbox; 122 display: flex; 123 top: 0; 124 position: static; 125} 126.header .nav__btn-link{ 127 display: block; 128 color: #666; 129 text-align: center; 130 -webkit-box-sizing: border-box; 131 box-sizing: border-box; 132 text-decoration: none; 133 cursor: pointer; 134 line-height: 1.15; 135 font-size: 11px; 136 font-size: 1.1rem; 137} 138.main-contents{ 139 height: 1055px; 140 margin: 0px; 141 padding-top: 55px; 142} 143 144/* ナビ */ 145.nav__overlay{ 146 display: none; 147 width: 100%; 148 height: 100%; 149 position: fixed; 150 top: 0; 151 left: 0; 152 z-index: 20; 153 background-color: rgba(0,0,0,0.6); 154} 155.nav__content{ 156 position: fixed; 157 top: 0; 158 right: 0; 159 z-index: 30; 160} 161.nav__btn{ 162 position: absolute; 163 top: 0; 164 left: -55px; 165} 166.nav__btn-link{ 167 display: none; 168} 169 170 171body.is-open .nav__btn-link{ 172 display: block; 173 padding-top: 15px; 174 color: #fff; 175 text-align: center; 176 -webkit-box-sizing: border-box; 177 box-sizing: border-box; 178 cursor: pointer; 179 text-decoration: none; 180 font-size: 11px; 181 font-size: 1.1rem; 182} 183body.is-open .nav__overlay, 184body.is-open .nav__inner{ 185 display: block; 186} 187.nav__inner{ 188 display: none; 189 width: 250px; 190 padding: 10px; 191 overflow: auto; 192 background-color: #fff; 193} 194 195li.tenpo a{ 196 padding-left: 18px; 197 font-weight:100; 198 font-size:14px; 199} 200 201.menu{ 202 padding-left: 30px; 203 padding-top: 20px; 204} 205 206.menu li{ 207 padding-bottom: 20px; 208 font-weight: bold; 209} 210 211.menu li a{ 212 text-decoration: none; 213} 214 215.menu_icon{ 216 position: relative; 217 height: 100px; 218} 219 220 221.menu_icon1{ 222 position: absolute; 223 bottom: 0; 224 margin: 0; 225 padding: 0; 226} 227 228.menu_icon1 a img{ 229 width: 100%; 230} 231 232.menu_sns_icon{ 233 width: 100%; 234 display: table; 235} 236 237.sns_icon1{ 238 display: table-cell; 239} 240 241.sns_icon1 a img{ 242 width: 26px; 243 padding-right: 15px; 244} 245 246 247/*ハンバーガーメニュー三本線*/ 248 249#humberger { 250 position: relative; 251 height: 24px; 252 width: 24px; 253 display: inline-block; 254 box-sizing: border-box; 255} 256#humberger div { 257 position: absolute; 258 left: 0; 259 height: 4px; 260 width: 24px; 261 background-color: #444; 262 border-radius: 2px; 263 display: inline-block; 264 box-sizing: border-box; 265} 266#humberger div:nth-of-type(1) { 267 top: 0; 268} 269#humberger div:nth-of-type(2) { 270 top: 10px; 271} 272#humberger div:nth-of-type(3) { 273 bottom: 0; 274} 275 276/*ハンバーガーメニュー閉じるボタン*/ 277 278.dli-close { 279 display: inline-block; 280 color: #fff; 281 line-height: 1; 282 width: 2em; 283 height: 0.2em; 284 background: currentColor; 285 border-radius: 0.2em; 286 position: relative; 287 transform: rotate(45deg); 288} 289 290.dli-close::before { 291 content: ''; 292 position: absolute; 293 top: 0; 294 left: 0; 295 width: 100%; 296 height: 100%; 297 background: inherit; 298 border-radius: inherit; 299 transform: rotate(90deg); 300} 301 302/*フッター*/ 303 304footer{ 305 width: auto; 306 height:70px; 307 background-color :#000; 308 color : #fff; 309 text-align : center; 310 padding-top: 60px; 311}
js
1$(function(){ 2 var imgs = $("#slideshow > li"); 3 var imgLen = imgs.length; 4 var count = 0; 5 function changeImg(){ 6 count = (count + 1) % imgLen; 7 imgs.removeClass("showSlide").eq(count).addClass("showSlide"); 8 } 9 setInterval(changeImg, 5000); 10})
js
1var scrollTopValue = 0; 2$(window).scroll(function() { 3 scrollTopValue = $(this).scrollTop(); 4}); 5$(function() { 6 /* サイドメニュー */ 7 var saveScrollTopValue = 0; 8 $(".js-menu").on("click", function(){ 9 $("body").toggleClass("is-open"); 10 if ($("body").hasClass('is-open')) { 11 saveScrollTopValue = scrollTopValue; 12 $('body').css({"top":-scrollTopValue + 'px'}); 13 } else { 14 $('body').css('top',''); 15 $(window).scrollTop(saveScrollTopValue); 16 } 17 }); 18 var windowH = window.innerHeight; 19 $('.nav__overlay, .nav__inner').css("height", windowH); 20}); 21 22/*クリックで閉じる*/ 23 24$('#manu a[href]').on('click', function(event) { 25 $('#humberger').trigger('click'); 26 });
回答1件
0
ベストアンサー
幅か高さのどちらかを指定しないとできない
おっしゃるとおりです。
css
1.slideshow { 2 width: 100%; 3 height: 600px; 4 list-style-type: none; 5 position: relative; 6}
横の画像がきれいに縮小してセンタリングになるように
「きれいに縮小してセンタリング」というのがどういう状態なのかわかりませんが、こういうことでしょうか？
（「センタリング」が必要な状態ということは、object-fit: containではないかな？ という気もしますが……）
css
1.slideshow > li { 2 height: 100%; 3 width: 100%; 4} 5.slideshow > li > img { 6 display: block; 7 mnax-height: 100vh; 8 width: 100%; 9 object-fit: cover; 10 margin: 0 auto; 11 height: 100%; 12}
投稿2021/03/25 03:21
総合スコア36074
あなたの回答
tips
プレビュー
