同じjqueryを２つ並べて動かしたいけど動かない

2023/08/16 14:41

このQ&Aのポイント

同じjqueryを２つ並べて動かしたいけど、片方が動かない問題について解決方法を教えてください。
http://39kn.com/2011/06/05/5528/ のjqueryを横に並べて動かしたいですが、片方だけが動作しない問題が発生しています。
２つのスライダーデモを並べる際に、片方が動かない問題にどのように対処すればよいでしょうか？

ベストアンサー

同じjqueryを２つ並べて動かしたいけど動かない

2012/09/13 18:15

いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、２つめは動きません。どうすれば動きますか？？理想は■が１つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div> </div> </body> </html>

01mk
お礼率62% (45/72)

JavaScript
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

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

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2012/09/13 20:14 回答No.1

＞同じjqueryを２つ並べて動かしたいけど動かないこれってjQueryではなくて、mootoolsではないのですか？ mootoolsは全然知りませんので、回答にはなりませんが… まずは、HTMLを見直してください。　・divの閉じタグの数があっていない。　・spanの中にdivがある。　・タグ同士が互い違いになって、入れ子関係になっていない。　・同じidの要素が複数以上存在する。などなど。ブラウザが無理やり解釈するでしょうから、結果がどうなるのか予想できません。（というか、HTMLとして成立していない）ほかにもいろいろありますので、一度（↓）などでチェックしてみるのがよろしいかと。 http://www.htmllint.net/en/html-lint/htmllint.html ＞横に並べて動かしたいのですがそれぞれのラッパー（例えばdiv要素）をフロートさせればよろしいかと。例えば div.wrapper { float : left; } <div> 　<div class="slider_wrapper"> 　　スライダー1の内容など　</div> 　<div class="slider_wrapper"> 　　スライダー２の内容など　</div> </div> とか・・・＞どうすれば動きますか？？スクリプトを読んだわけではないので、以下はあくまでも印象ですが… 多分、クラスを作っているように見受けられますので、別のインスタンスを作成することで複数の対象を制御することが可能なように作られているのではないでしょうか。しかしながら、ご提示のソースではみな同じidになっていますので、仮にそれでできるとしても、今のままでは識別できないため動かないと思われます。

その他の回答 (2)

ecaih
ベストアンサー率48% (16/33)

2012/10/01 17:39 回答No.3

詳しく見てないですけど、同じidがあるからじゃないですか？？１つのファイルに、同じidは使えません。

fujillin
ベストアンサー率61% (1594/2576)

2012/09/13 21:20 回答No.2

#1です。間違えていましたので、訂正。誤　：　div.wrapper { float : left; } 　　　　　　　　↓ 正　：　div.slider_wrapper { float : left; }

関連するQ&A

jqueryで画像切り替え
この場をお借りして教えて頂ければ幸いです。 jqueryについて、今現在添付画像のようなサムネイルをマウスオーバーしますと、メイン画像が切り替わるようなものをｊjqueryを使用して制作しました。ここから、setIntervalを使用して画像が何もしなければ勝手に切り替わるように、またマウスオーバーをしている際は切り替わらないように、そしてマウスアウトしたらそこの画像から順にsetIntervalが開始されるようにしたいと思っております。そこの作業が出来ず困っておりまして、是非ともお教え頂ければと思います。今現在のhtml , css , jsの方は記載しておきます。※reset.cssは除きます。 <body> <div id="wrap"> <div id="sec1"> <div id="photoBox"> <ul id="photo"> <li><img src="img/plan1.jpg" alt="食1" /></li> <li><img src="img/plan2.jpg" alt="食2" /></li> <li><img src="img/plan3.jpg" alt="食3" /></li> </ul> <ul id="thumb"> <li class="first"><img src="img/plan1_s.jpg" alt="" /></li> <li><img src="img/plan2_s.jpg" alt="" /></li> <li><img src="img/plan3_s.jpg" alt="" /></li> </ul> </div> 　　　　</div> </div> </body> -------------------------------------------------------------------- div#wrap{ width:394px; margin:0 auto; } div#photoBox{ width:394px; height:391px; padding:40px 0; border-bottom:1px solid #CCC; } div#photoBox ul#photo{ width:394px; height:295px; padding-bottom:5px; position:relative; } div#photoBox ul#photo li{ width:394px; height:295px; display:block; position:absolute; top:0; left:0; } div#photoBox ul#thumb{ width:394px; height:91x; position:relative; } div#photoBox ul#thumb li{ float:left; padding-left:5px; } div#photoBox ul#thumb li.first{ padding-left:0; } --------------------------------------------------------- (function(){ var photo = $('#photo').find('li'); var thumb = $('#thumb').find('li'); photo.hide().eq(0).show(); thumb.hover(function(){ $(this).stop().fadeTo('fast', 0.6); photo.stop().fadeTo('fast', 0) .eq($(this).index()) .stop().fadeTo('fast', 1); }, function(){ $(this).stop().fadeTo('fast', 1); }); })
- ベストアンサー
- JavaScript
【jQuery】サムネイル
3つのサムネイル画像(.thumb)があります。クリックした.thumbはopacityを1に、その他は0.5に切り替わるする方法を教えてください。始めは1番目.thumbのopacityは1でお願いします。 ■html <div id="ph-wrap"> <div id="photo"> <p><img src="./img/photo1.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo2.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo3.png" width="480" height="320" alt="" /></p> </div> <div id="thumb-wrap"> <p class="thumb"><img src="./img/photo1.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo2.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo3.png" width="120" height="80" alt="" /></p> </div> </div> ■CSS(一部抜粋) #thumb-wrap{ float:left; margin:0 0 0 10px; padding:0; width:120px; } #thumb-wrap img{ width:120px; height:80px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; /* Firefox */ filter: alpha(opacity=50); /* IE */ } .opc{ opacity:1.0; -moz-opacity:1; /* Firefox */ filter: alpha(opacity=100); /* IE */ } ■jQuery $(function () { var photoImg = "#photo img" var thumbWrapImg = "#thumb-wrap img" $("#photo p:gt(0)").hide(); $(thumbWrapImg).eq(0).css({"opacity":1}); $(thumbWrapImg).click(function () { $(this).animate({"opacity":1},100); $(photoImg).attr("src",$(this).attr("src")); }); });
- ベストアンサー
- JavaScript
【jQuery】setInterval
jqueryの初心者です。 3つの画像を3秒間隔でクロスフェードさせ、それを繰り返したいのですが setIntervalの使い方が違うのか、思うような動きになりません。何が原因なのかと、無駄な部分があると思いますのでなるべくシンプルで初心者レベルのコードを教えて頂きたいです。宜しくお願いします。 $(function(){ setInterval(function(){ setTimeout(function(){ $(".photo-1").fadeOut(1000); },3000); setTimeout(function(){ $(".photo-2").fadeIn(1000); },3000); setTimeout(function(){ $(".photo-2").fadeOut(1000); },6000); setTimeout(function(){ $(".photo-3").fadeIn(1000); },6000); setTimeout(function(){ $(".photo-3").fadeOut(1000); },9000); setTimeout(function(){ $(".photo-1").fadeIn(1000); },9000); },3000); }); <div id="photo-box"> <p class="photo-1"><img src="img/01.jpg" width="500" height="150" alt="" /></p> <p class="photo-2"><img src="img/02.jpg" width="500" height="150" alt="" /></p> <p class="photo-3"><img src="img/03.jpg" width="500" height="150" alt="" /></p> </div>
- ベストアンサー
- JavaScript
jQuery 2つのsetInterval
写真と文字を組み合わせたクロスフェードで行き詰りました。２つ質問があります。【質問１】１番目のテキストがフェードイン→3秒待機→1番目のテキストと 1番目の写真がフェードアウト→2番目・3番目同じ→繰り返し。という感じにしたいのですが、下記の#text-boxの設定ですと setIntervalで5秒間隔でフェードインになるので#photo-boxとのタイミングが5秒ずれてしまいます。これを合わせるにはどうすればよいのでしょうか？【質問２】下記のように、１つのdivでテキストと写真を入れると正常に動かなくなります。それぞれ分けてdiv(#text-box,#photo-box)で囲うと動きます。この原因はなんでしょうか？ <div id="all-box"> <p class="text">1番目のテキスト</p> <p class="photo"><img src="img/01.jpg" width="500" height="200" alt="" /></p> <p class="text">2番目のテキスト</p> <p class="photo"><img src="img/02.jpg" width="500" height="200" alt="" /></p> <p class="text">3番目のテキスト</p> <p class="photo"><img src="img/03.jpg" width="500" height="200" alt="" /></p> </div> 宜しくお願いします。 $(function(){ $("#text-box .text").hide(); setInterval(function(){ $("#text-box") .find(".text:first-child") .fadeIn(1000) .delay(3000) .fadeOut(1000) .next(".text") .end() .appendTo("#text-box"); },5000); $("#photo-box .photo:gt(0)").hide(); setInterval(function(){ $("#photo-box") .find(".photo:first-child") .fadeOut(1000) .next(".photo") .fadeIn(1000) .end() .appendTo("#photo-box"); },5000); }); ■HTML <div id="all-box"> <div id="text-box"> <p class="text">1番目のテキスト</p> <p class="text">2番目のテキスト</p> <p class="text">3番目のテキスト</p> </div> <div id="photo-box"> <p class="photo"><img src="img/01.jpg" width="500" height="200" alt="" /></p> <p class="photo"><img src="img/02.jpg" width="500" height="200" alt="" /></p> <p class="photo"><img src="img/03.jpg" width="500" height="200" alt="" /></p> </div> </div> ■CSS #all-box{ position:relative; width:500px; height:200px; } #text-box,#photo-box{ width:500px; height:200px; } #text-box .text{ position:absolute; top:80px; left:0; z-index:2; } #photo-box .photo{ position:absolute; top:0; left:0; width:500px; height:200px; z-index:1; }
- 締切済み
- JavaScript
同HTML内で複数のjQueryを設置したいです
買ってきたjQueryの本を元に複数のjQueryを使用し、タブメニュータイプのものと自動スライドショータイプのを同じHTML内に入れたいのですが両方ともうまくいきません。いろいろ自分なりに調べたのですが、わからないです。うまくいく方法をどうか教えてもらえないでしょうか？宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div>  <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div>  </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
jQueryについて
jQueryのクロスフェードとlightboxを同一ページに設定しています。よく分かっていないのに、コピペで作っていますが、クロスフェードをするとlightboxが動作しません。設定をどう変更したら出来るようになりますか？どなたか助けてください。 <link rel="stylesheet" type="text/css" href="cssjs/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="cssjs/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="cssjs/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="cssjs/target.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#rightimg'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <title>あかさたな</title> </head> <body> <div id="outer"> <div id="container"> <div id="header"> <h1>いろはにほへと</h1> </div> <div id="menu"> <ul id="bar"> <li><a href="index.html">HOME</a></li> <li><a href="ka.html">ABC</a></li> <li><a href="history.html">DEF</a></li> <li><a href="kaga.html">GHJ</a></li> <li><a href="admission.html">KLM</a></li> <li id="sen"><a href="link.html">りんく</a></li> </ul> </div> <div class="don"></div> <div id="eyecatch"> <div id="leftimg"></div> <div id="rightimg"> <img src="images/1.jpg" width="300" height="300" alt="" /> <img src="images/2.jpg" width="300" height="300" alt="" /> <img src="images/3.jpg" width="300" height="300" alt="" /> <img src="images/4.jpg" width="300" height="300" alt="" /> </div> </div> <div id="contents"> <h2>最新ニュース</h2> <h3>あかさたな</h3> <div id="gallery"> <ul> <li><a href="top/3.jpg" title="かきくけこ"><img src="top/3s.jpg" width="193" height="272" alt="かきくけこ" /></a></li> <li><a href="top/1.jpg" title="あいうえお"><img src="top/1s.jpg" width="182" height="272" alt="あいうえお" /></a></li> <li><a href="top/2.jpg" title="あいうえお"><img src="top/2s.jpg" width="182" height="272" alt="あいうえお" /></a></li> </ul> </div>
- 締切済み
- JavaScript
jQuery マウスオーバーのたびに処理を繰り返す
よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。（サムネイルには元画像をcssで縮小して表示しています）やりたいことは以下の２つです。・Div要素には元画像の大きさで表示させたい。・できれば、フェードイン・アウトで画像を切り替えたい。色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>
- ベストアンサー
- JavaScript
jQueryでappleっぽい画像ギャラリー設置したいです
http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを私のホームページにも組み込みたいと思っているのですが、CSS・JAVAを最近本を買ったりして勉強しはじめた初心者なだけに、紹介されている設置方法だけでは理解できなく質問させていただきました。 (1)とりあえずjQueryからjquery.jsをダウンロードはしましたが、こjquery.jsはどこにどうすればいいのでしょうか？ (2) <div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="画像パス1" width="920" height="400" /></div> <div class="slide"><img src="画像パス2" width="920" height="400" /></div> <div class="slide"><img src="画像パス3" width="920" height="400" /></div>  </div> <div id="menu"> <ul> <li class="fbar"> </li> //区切り線用 <li class="menuItem"><a href=""><img src="サムネイル画像パス1" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス2" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス3" /></a></li> </ul> </div> </div> </div> このコードはhtmlのheadに組み込むのでしょうか？それともbodyでしょうか？ (3) 次にCSSを記述します。特に難しい部分はないので、cssを見ていただくとして・・・とありますが、リンク先のcssはいじらなくてもそのまま使用すればいいのでしょうか？最後に、jQueryを記述すれば完成です。 $(document).ready(function(){ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ positions[i]= totWidth; totWidth += $(this).width(); if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); $('#menu ul li a').click(function(e){ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); e.preventDefault(); }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); }); とありますが、これはどこに組み込めばいいのでしょうか？また何も触らなくてもいいのでしょうか？他にも分からないところだらけなので、立て続けに質問させていただくと思いますが、お手数おかけしますが力を貸してください。よろしく御願いいたします。
- ベストアンサー
- JavaScript
jQuery bxSlider でのアニメーション
jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。１枚目から５枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか？ <script type="text/javascript"> $(function(){ var slider = $('#slider1').bxSlider({ controls: true, duration: 2000, easing: 'easeInOutQuart', onAfterSlide: function(currentSlide){ if(currentSlide==0){ $("#block").fadeIn("slow"); }else{ $("#block").hide(); } if(currentSlide==1){ $("#block2").fadeIn("slow"); }else{ $("#block2").hide(); } if(currentSlide==2){ $("#block3").fadeIn("slow"); }else{ $("#block3").hide(); } if(currentSlide==3){ $("#block4").fadeIn("slow"); }else{ $("#block4").hide(); } if(currentSlide==4){ $("#block5").fadeIn("slow"); }else{ $("#block5").hide(); } } }); $('.thumbs a').click(function(){ var thumbIndex = $('.thumbs a').index(this); slider.goToSlide(thumbIndex); $('.thumbs a').removeClass('pager-active'); $(this).addClass('pager-active'); return false; }); $('.thumbs a:first').addClass('pager-active'); }); </script> <ul id="slider1"> <li class="slider1-1"> <div id="block" style="background-color: red; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-2"> <div id="block2" style="background-color: white; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-3"> <div id="block3" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-4"> <div id="block4" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-5"> <div id="block5" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-6"> <div id="block6" style="background-color: #FFF; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> </ul> <div class="thumbs"> <a href=""><img src="img/1.jpg" width="50" height="50" /></a> <a href=""><img src="img/2.jpg" width="50" height="50" /></a> <a href=""><img src="img/3.jpg" width="50" height="50" /></a> <a href=""><img src="img/4.jpg" width="50" height="50" /></a> <a href=""><img src="img/5.jpg" width="50" height="50" /></a> <a href=""><img src="img/6.jpg" width="50" height="50" /></a> </div>
- ベストアンサー
- JavaScript
このプログラムにある問題点を教えて下さい
プログラムを自分で作ってみました。形はイメージ通りですが自信がありません。何か問題点があるように思えてなりません。これで正しいのでしょうか？ <style type="text/css"> #aaa{ width: 850px; background-color: #eee; } .CCC { width: 750px; height: 133px; margin-left: 35px; margin-top: 15px; } .CCC ul{ margin: 0; padding: 0; list-style: none; } .CCC li.C0 { float: left; } .CCC li.C0 img { padding: 5px; border: 1px solid #ccc; } .CCC li.C1 { width: 200px; padding: 3px 20px 3px 12px; margin-left: 25px; font-size: 16px; font-weight: bold; font-family: "MS UI Gothic"; color: #F05; border-bottom: 1px solid #F05; float: left; } .CCC li.C2 { width: 300px; font-size: 14px; float: left; line-height:150%; margin-left: 50px; margin-top: 15px; } .CCC li.C3 { width: 160px; float: right; } .CCC li.C3 .C4 img{ border: 0; border-style: none; margin-bottom: 25px; } .cf { clear:both; font-size: 15px; color: #ccc; text-align: center; } </style> <div id="aaa"> <div class="CCC"> <ul> <li class="C0"><img src="image/image_case01.jpg" width="185" height="123"></li> <li class="C1">タイトルタイトル &nbsp&nbsp&nbsp/ タイトル</li> <li class="C2">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</li> <li class="C3"><span class="C4"><a href=""><img src="1.jpg" width="160" height="30"></a></span><span class="C4"><a href=""><img src="2.jpg" width="160" height="30"></a></span></li> </ul> </div> <div class="cf">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</div> <div class="CCC"> <ul> <li class="C0"><img src="image/image_case01.jpg" width="185" height="123"></li> <li class="C1">タイトルタイトル &nbsp&nbsp&nbsp/ タイトル</li> <li class="C2">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</li> <li class="C3"><span class="C4"><a href=""><img src="1.jpg" width="160" height="30"></a></span><span class="C4"><a href=""><img src="2.jpg" width="160" height="30"></a></span></li> </ul> </div> <div class="cf">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</div> </div>
- ベストアンサー
- HTML