JQueryスライドショーが上手くいかない理由とは？

前へ 次へ
このQ&Aのポイント
  • 上手く行かないJQueryスライドショーの理由として、最後の画像の表示問題が挙げられます。HTMLとCSSのコードを確認し、display: none;が適用されているか確認してみましょう。
  • JQueryを使用して作成したスライドショーで、最後の画像がきれいに表示されない問題が発生しています。最後の画像にはdisplay: none;が適用されない可能性がありますので、HTMLとCSSのコードを確認してみてください。
  • JQueryを使用して作成したスライドショーで、最後の画像がうまく表示されないという問題があります。最後の画像にはdisplay: none;が適用されていない可能性があるため、HTMLとCSSのコードを再確認してみてください。
回答を見る
  • ベストアンサー

jqureryスライドショーが上手くいきません。

こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン　フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }

質問者が選んだベストアンサー

  • ベストアンサー
  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.2

ごめんなさい、ようやく意図がつかめました。 .slideshow img .alt → .slideshow .alt もしくは、 .slideshow img .alt → .slideshow img.alt // スペースが余分です。

emuemu84
質問者

お礼

本当に単純なミスで申し訳ございませんでした。 スペースが入るとか入らないとか細かい事がわかってません。 ありがとうございました。 また、宜しくお願いします。

その他の回答 (1)

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.1

説明文だけでは、どこに問題があるかわかりませんので、書いたプログラムを提示していただけないでしょうか？

emuemu84
質問者

補足

補足します。 <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>LAZY</title> <link href="style.css" rel="stylesheet" type="text/css"> <!-- デスクトップ --> <link href="desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:950px)"> <script src="jquery-1.8.3.min.js"></script> <script src="index.js"></script> <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> </head> <body> <div id="container"> <h1><a href="index.html"><img src="img1.jpg"　width="150"　height="160" 　alt="lazy" onmouseover="this.src='img2.jpg';" onmouseout="this.src='img1.jpg'" /> </a></h1> <div id="nav"> <ul> <li><a href="concept.html">CONCEPT</a></li> <li><a href="style.html">STYLE&GALLERY</a></li> <li><a href="http://ameblo.jp/lazy84/">BLOG</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </div></div> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> </body> </html> <CSS> @charset "UTF-8"; /* CSS Document */ h1 { border-bottom-style: none; border-top-style: none; border-right-style: none; border-left-style: none; margin-bottom: 40px; float: left; padding-top: 50px; } p { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 14px; line-height: 24px; } #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; } #container { padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 950px; } body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 14px; background-image: url(img6.jpg); } #nav ul { list-style-type: none; padding-left: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; width: 950px; } #nav ul li { float: left; border-right-width: 0px; border-right-style: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-bottom-style: none; border-left-style: none; } #nav ul li a:hover { color: #F00; } #nav ul li a { font-size: 14px; color: #FFF; text-decoration: none; width: 160px; text-align: center; display: block; line-height: 45px; margin-top: 150px; background-color: #666; margin-left: 10px; } #nav li a { background-image: -moz-linear-gradient(top,#888 0%, #777 50%, #666 50%, #777 100%); } #nav li a{ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #444), color-stop(0.50, #333), color-stop(1, #444)); text-shadow:0 -1px 0px #333 ,0 1px 0px #555 } #nav li:first-child a{ border-radius:5px 0 0 5px; } #nav li:last-child a{ border-radius:0 5px 5px 0; } .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; border-top-color: #000; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; } $(function(){ var interval = 3000; $('.slideshow').each(function(){ var container = $(this); function switchImg(){ var imgs = container.find('img'); var first = imgs.eq(0); var second = imgs.eq(1); first.fadeOut().appendTo(container); second.fadeIn(); } setInterval(switchImg,interval); }); });

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. その他（プログラミング・開発）

関連するQ&A

  • スライドショーに妙な間がある。

    いつも為になるアドバイスありがとうございます。 HP作成してるなかで気になったことがあるのですが、jQueryでスライドショーを設定して 画像からリンクを設定すると妙な間があって気になります。 原因は何でしょうか？ ご指導願います。 HTMLフォーム <!DOCTYPE html><!----> <html> <head> <meta charset="utf-8"> <title>ファッション通販サイト”Ce qui plait aux fill”</title> <style>/*CSS*/</style> <link rel="stylesheet" href="top.css" type="text/css" media="all"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> <link rel="stylesheet" href="top.css" type="text/css" media="all"> </head> <body> <div id="wrapper"> <div class="header"> <h1 class="logo"><img src="img/top-logo-01.jpg" /></h1> </div><!--header--> <div class="section"> <div class="fadein"> <a href="リンク01.html"><img src="画像01.jpg" width="400px" height="auto" /></a> <a href="リンク02.html"><img src="画像02.jpg" width="400px" height="auto" /></a> <a href="リンク03.html"><img src="画像03.jpg" width="400px" height="auto" /></a> <a href="リンク04.html"><img src="画像04.jpg" width="400px" height="auto" /></a> <a href="リンク05.html"><img src="画像05.jpg" width="400px" height="auto" /></a> <a href="リンク06.html"><img src="画像06.jpg" width="400px" height="auto" /></a> <a href="リンク07.html"><img src="画像07.jpg" width="400px" height="auto" /></a> <a href="リンク08.html"><img src="画像08.jpg" width="400px" height="auto" /></a> <a href="リンク09.html"><img src="画像09.jpg" width="400px" height="auto" /></a> <a href="リンク10.html"><img src="画像10.jpg" width="400px" height="auto" /></a> <a href="リンク11.html"><img src="画像11.jpg" width="400px" height="auto" /></a> </div><!--fadein--> </div><!--section--> <div class="img"> <p><img src="img/waku.jpg" /></p> </div><!--img--> <div class="news"> <div class="new-item"> <p><img src="img/new-item.jpg" /></p> </div><!--new-item--> </div><!--news--> <div class="item-menu"> <p>最新のアイテムを紹介します。</p> <ul> <li><a href="#">サンダル</a></li> <li><a href="#">パンプス</a></li> <li><a href="#">タンクトップ</a></li> <li><a href="#">キュロット</a></li> <li><a href="#">スカート</a></li> <li><a href="#">ウェッジソール</a></li> <li><a href="#">トレンチコート</a></li> <li><a href="#">カーディガン</a></li> <li><a href="#">ルームウェア</a></li> <li><a href="#">バック</a></li> </ul> </div><!--item-menu--> <div id="footer"> <ul> <li><a href="#">TOP</a></li> <li><a href="#">リンク</a></li> <li><a href="#">サイトマップ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div><!--footer--> </div><!--wrapper--> </body> </html> CSSフォーム @charset"utf-8"; body{ width:100%; background: #EDE8EA url(img/dot/14.gif) repeat; } body .fadein { position:relative;} .fadein img { position:absolute; left:20px; top:35px; } #wrapper{ margin:auto; width:980px; } .header{ width:980px; padding:0; border: 10px groove #cfc; background:#fff; } .section{ margin:30px 0 0; } .img{ float:left; } .news{ float:left; margin:20px; background:#fff; width:500px; border-radius: 10px; } .new-item{ text-align: center; margin:20px 0 0 0; } .item-menu{ float:left; margin:0 20px; font-size:30px; } .item-menu li{ font-size:24px; background-color:#fff; width:300px; list-style:none; text-align:center; margin:5px; } .item-menu a{ text-decoration:none; } .item-menu li:hover{ text-decoration:underline; background-color:#ADFF2F; } #footer{ clear: both; }

    • ベストアンサー
    • HTML
  • 教えてください!

    教えてください！jQueryについて safariではうまく表示されるのですがgoogle chromeでは表示されません。 初心者です。 どうしてでしょうか？ コード載せております。 困っています。分かる方 どなたかご教授お願いいたします。 よろしくお願いいたします。 -----------html------------ <body> <div id="slideshow"> <img src="images/top_01.jpg" width="950" height="450" alt="" class="active" /> <img src="images/top_02.jpg" width="950" height="450"alt="" /> <img src="images/top_03.jpg" width="950" height="450"alt="" /> <img src="images/top_04.jpg" width="950" height="450"alt="" /> <img src="images/top_05.jpg" width="950" height="450"alt="" /> </div> </body> -----------css------------- #slideshow { position:relative; height:450px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } ----------js----------- function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); よろしくおねがいします

    • ベストアンサー
    • CSS
  • JQUERY slideshowについて

    slide-show.jsについての質問です。 ホームページのトップイメージにスライドショーで３枚の写真を動かしています。 で、トップページの写真を９枚にして、左３枚・真ん中３枚・右３枚というふうに動かしたいです。 トップイメージの写真（幅900px）３枚を トップイメージの写真（幅300ｐｘ）×３を３枚スライドにする （意味不明ですか・・・） 下の#slideshow01を#slideshow02、#slideshow03に増やして、設置したら動きませんでした。 出来れば、右→真ん中→左がちょっと時差をつけてスライドして欲しいです。 写真の切り替えは、ＣＳＳのＺーindexを使っています。 現在のＨＴＭＬ <div id='slideshow01'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> 求めるＨＴＭＬ <div id='slideshow01'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> <div id='slideshow02'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_4.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_5.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_6.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> <div id='slideshow03'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_7.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_8.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_9.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> この　js　を使っています。 function slideSwitch() { var $active = $('#slideshow01 img.active'); if ( $active.length == 0 ) $active = $('#slideshow01 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow01 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); });

  • 写真の上0pxにタイトルバーをhtmlで作りたい

    HTMLで写真の真上にhtmlで作った色付き棒の中に文字を表現したいです。 それを３列ずつ複数行作成したいです。 ・写真と写真の横幅の間は30pxあける。 ・上下は50pxあける。 ・ウインドウ幅の中央に常に表示 ・ウインドウが写真よりも狭くなってもレイアウトが崩れない このようにしたいと思って、自分で作ってみましたが、 まったくうまくできませんでした。 どのようにすればいいのか教えて下さい。 よろしくお願いいたします。 ～～～～～～　HTML　～～～～～～～ <link href="aa.css" rel="stylesheet" type="text/css" /> <div class="aaa"><!-- と汎用ブロックで囲んで --> <div class="bbb">いのしし<div> <div class="bbb">たつ<div> <a href="" ><img src="" alt="" width="350" height="270" /></a> <a href="" ><img src="" alt="" width="350" height="270" /></a> <div class="ccc">うさぎ<div> <div class="ccc">とら<div> <div class="ccc">たぬき<div> <a href="" ><img src="" alt="" width="232" height="166" /></a> <a href="" ><img src="" alt="" width="232" height="166" /></a> <a href="" ><img src="" alt="" width="232" height="166" /></a> </div> ～～～～～～　CSS　～～～～～～～ @charset "Shift_JIS"; a img{ border:none; } div.aaa{ margin-top:0px; width:760px; margin-left:auto; margin-right:auto; text-align:center; } div.bbb{ background-color: #ffcc66; width: 350px; height: 30px; } div.ccc{ background-color: #ffcc66; width: 232px; height: 30px; font-size: 20px; font-color: }

    • ベストアンサー
    • HTML
  • FireFoxでのレイアウト表示崩れについて

    現在ホームページを作成しています。 CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。 IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。 よろしくお願いします。 以下ソース ◇HTML部分◇ <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <u class="hnavi"> <li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li> <li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li> <li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li> <li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li> <li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li> <li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li> </u> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS部分◇ body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } .hnavi { margin: 0; padding: 0; } .hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; } 以上です。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • jQueryでn秒後に要素を最後に移動

    $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner2"><img src="01.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="02.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="03.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:0px;" class="banner banner1"><img src="04.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:245px;" class="banner"><img src="05.jpg" width="100%" alt="" /></div>'); $("#top_banner").append('<div style="width:245px; position:absolute; top:0px; left:490px;" class="banner"><img src="06.jpg" width="100%" alt="" /></div>'); $(".banner").click(function(){ $(this).prependTo("#top_banner"); }); $(".banner1").delay(1000).prependTo("#top_banner"); $(".banner2").delay(2000).prependTo("#top_banner"); <div style="width:750px; background-color:#808080; height:90px; padding-top:6px;"> <div style="width:735px; margin:auto; position:relative;" id="top_banner"> </div> </div> 上記のように記述し、n秒後に自動でバナーが切り替わるプログラムを作成しようしましたが、 うまく動作しません。 クリックすると切り替わるので、その要領で「delay(1000).prependTo("#top_banner")」と記述しました。 1秒後に画像が切り替わるかなと思いましたが、動作しませんでした。 delayはprependToには効かないのでしょうか。 また、上記ソースをもう少し完結にまとめることは可能でしょうか。

  • javascript src書き換え

    javascript 初心者なのですが、質問させてください。 クリックした画像を3.jpgに書き換えるというコードを書いたのですが、うまく動きません。 どこが違間違っているのでしょうか。 /-------------------------------------------------------------/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神経衰弱</title> <style type="text/css"> ul { width: 300px; list-style:none; margin: 0; padding: 0; } li { float:left; margin: 0; padding; 0: } img { vertical-align: bottom; } #all { width: 300px; margin: 0px auto 0px; margin-top: 50px; } </style> </head> <body> <div id="all"> <ul> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_1" onclick="conce(c_1)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_2" onclick="conce(c_2)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_3" onclick="conce(c_3)" /></li> <li><img src="none.jpg" alt="4" width="100px" height="100px" id="c_4" onclick="conce(c_4)" /></li> <li><img src="none_2.jpg" alt="" width="100px" height="100px" id="c_5"/></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_6" onclick="conce(c_5)" /></li> <li><img src="none.jpg" alt="1" width="100px" height="100px" id="c_7" onclick="conce(c_6)" /></li> <li><img src="none.jpg" alt="2" width="100px" height="100px" id="c_8" onclick="conce(c_7)" /></li> <li><img src="none.jpg" alt="3" width="100px" height="100px" id="c_9" onclick="conce(c_8)" /></li> </ul> </div> <script type="text/javascript"> function conce(aaa){ document.getElementById("aaa").src = "3.jpg"; } </script> </body> </html> /-----------------------------------------------------------------------/ よろしくお願いします。

  • <div>この余白は・・・

    <div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> 　<div class="title"> 　　<img src="img/title.jpg" width="700" height="75" border="0"> 　</div> 　<div class="main"> 　　<img src="img/main.jpg" width="700" height="375" border="0"> 　</div> 　<div class="menu"> 　　<img src="img/home_a.jpg" width="100" height="35" border="0"> 　　<img src="img/first.jpg" width="100" height="35" border="0"> 　　<img src="img/info.jpg" width="100" height="35" border="0"> 　　<img src="img/order.jpg" width="100" height="35" border="0"> 　　<img src="img/support.jpg" width="100" height="35" border="0"> 　　<img src="img/link.jpg" width="100" height="35" border="0"> 　　<img src="img/question.jpg" width="100" height="35" border="0"> 　</div> 　<div class="area"> 　　<div class="box"> 　　　<h5>AAAAAAAAA</h5> 　　　<img src="img/kari.gif" width="250" height="100" border="0"> 　　</div> 　　<div class="box2"> 　　　<h5>BBBBBBBBB</h5> 　　　<img src="img/kari2.gif" width="250" height="100" border="0"> 　　</div> 　</div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } 　どなたか知恵をお貸しください。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • jCarouselLiteでwidth: 100%

    jCarouselLiteを使用し、 .shopList内の<li>要素を横並びに並べたスライダーを作成しています。 <li>要素にwidth: 100%を指定し、 要素の表示を一つにしてウインドウサイズいっぱいのスライダーの作成を考えていました。（矢印をクリックすると、画像がウインドウの端から流れてくるイメージです） <li>内の要素<img class="productimgimg">は、ブロック指定してmargin-left/right:auto;でセンタリングしています。 が、ウインドウを可変しても通常の<div>要素にwidth: 100%指定した時のように 要素が付いてきません。 （リロードすれば指定位置である中央に戻るのですが……） コードは以下の通りです。 <!------------------html内--------------------> <head> $(function() { $(".shopList").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible : 1, speed:800, easing: "easeInOutCubic" }); }); </head> <body> <div class="left"><div class="prev"> <img src="00000000g.png"> </div></div> <div class="right"><div class="next"> <img src="00000000.png"> </div></div> <div class="shopList"> <ul> <li><img src="1111111.jpg" width="000" height="000" class="productimg"/></li> <li><img src="2222222.jpg" width="000" height="000" class="productimg"/></li> <li><img src="3333333.jpg" width="000" height="000" class="productimg"/></li> <li><img src="444444.jpg" width="000" height="000" class="productimg"/></li> <li><img src="555555.jpg" width="000" height="000" class="productimg"/></li> <li><img src="666666.jpg" width="000" height="000" class="productimg"/></li> </ul> </div> </body> <!------------------css設定--------------------> .left { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; left: 30px; z-index: 11; /* 重なる順番 */ cursor: pointer; } .right { position: absolute; margin: 0; padding: 0; width: 20px; height: 34px; top: 250px; right: 30px; z-index: 10; /* 重なる順番 */ cursor: pointer; } .shopList { width: 100%; position: relative; margin: 0; padding: 0; height: 520px; } .shopList ul, .shopList ul li { margin: 0; padding: 0; float: left; display: inline; overflow: hidden; width: 100%; } .productimg { display: block; margin-left: auto; margin-right: auto; } <li>内の<img>要素が、常に画面のセンターにあるようにしたいのです。 よろしくお願いします。

  • HTML、ＣＳＳ が、なかなかうまくいきません。

    お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する