一瞬画像が縦に並んでしまう問題の解決方法
- jQueryを使ったフラッシュもどきのギャラリー表示を作成している際、Sleipnirブラウザでリロードすると一瞬画像が縦に並んでしまう問題が発生します。この問題を解決するためには、スライドショーの初期化をDOMが完全に読み込まれた後に行う必要があります。
- また、画像のサイズを指定する際には、各画像の幅と高さを指定することが重要です。画像が縦に並ぶ原因のひとつは、画像のサイズが指定されていないためです。
- さらに、スライドショーのトランジション効果やタイムアウト、スピードなども適切に設定することで、画像が縦に並ぶことなく正しく表示されるようになります。
- ベストアンサー
一瞬画像が
現在、jQueryを使って、以下のようなフラッシュもどきのギャラリー表示を作っていますが このソースをSleipnirというブラウザで実行し、リロードをすると、一瞬画像が縦に並んでしまい 一瞬とはいえ、見た目がくずれてしまいます。 これをくずれないように表示するにはどうしたらよいのでしょうか？ どなたか、よいお知恵をお願いいたします。 <!doctype html> <html> <head> <title>JQuery Cycle Plugin - Example Slideshow</title> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="jquery.cycle.all.min.js"></script> <!-- initialize the slideshow when the DOM is ready --> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' , timeout: 8000 , speed: 500 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow2').cycle({ fx: 'fade' , timeout: 4000 , speed: 4000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow3').cycle({ fx: 'fade' , timeout: 2000 , speed: 8000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div style="width:900px;"> <div class="slideshow2" style="float:left;"> <img src="images/common/a1.jpg" width="300" height="300" /> <img src="images/common/a2.jpg" width="300" height="300" /> <img src="images/common/a3.jpg" width="300" height="300" /> <img src="images/common/a4.jpg" width="300" height="300" /> <img src="images/common/a5.jpg" width="300" height="300" /> <img src="images/common/a6.jpg" width="300" height="300" /> <img src="images/common/a7.jpg" width="300" height="300" /> <img src="images/common/a8.jpg" width="300" height="300" /> <img src="images/common/a9.jpg" width="300" height="300" /> <img src="images/common/a10.jpg" width="300" height="300" /> <img src="images/common/a11.jpg" width="300" height="300" /> </div> <div class="slideshow" style="float:left;"> <img src="images/common/b1.jpg" width="300" height="300" /> <img src="images/common/b2.jpg" width="300" height="300" /> <img src="images/common/b3.jpg" width="300" height="300" /> <img src="images/common/b4.jpg" width="300" height="300" /> <img src="images/common/b5.jpg" width="300" height="300" /> <img src="images/common/b6.jpg" width="300" height="300" /> <img src="images/common/b7.jpg" width="300" height="300" /> <img src="images/common/b8.jpg" width="300" height="300" /> <img src="images/common/b9.jpg" width="300" height="300" /> <img src="images/common/b10.jpg" width="300" height="300" /> <img src="images/common/b11.jpg" width="300" height="300" /> <img src="images/common/b12.jpg" width="300" height="300" /> </div> <div class="slideshow3" style="float:right;"> <img src="images/common/c1.jpg" width="300" height="300" /> <img src="images/common/c2.jpg" width="300" height="300" /> <img src="images/common/c3.jpg" width="300" height="300" /> <img src="images/common/c4.jpg" width="300" height="300" /> <img src="images/common/c5.jpg" width="300" height="300" /> <img src="images/common/c6.jpg" width="300" height="300" /> <img src="images/common/c7.jpg" width="300" height="300" /> <img src="images/common/c8.jpg" width="300" height="300" /> <img src="images/common/c9.jpg" width="300" height="300" /> <img src="images/common/c10.jpg" width="300" height="300" /> <img src="images/common/c11.jpg" width="300" height="300" /> </div> </div> </body> </html>
- like-linux
- お礼率77% (28/36)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
予めCSSでサイズを指定してはいかがでしょう。 <style type="text/css"><!-- .slideshow,.slideshow2,.slideshow3{width: 300px;height: 300px;overflow: hidden;} --></style>
関連するQ&A
- 教えてください!
教えてください！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
- 画像のサムネール+フォトアルバムを制作中で困っています
こんにちは。 HTML + CSS + Javascriptを使用して、「サムネール画像+フォトアルバム」を作っています。 Javascriptの知識が乏しいため、質問させていただきました。 よろしくお願いいたします。 サムネール画像の並ぶ A.html 拡大画像の並ぶ B.html CSS外部をリンクさせている C.css Javascriptを外部リンクさせている D.js の4つのファイルがあります。 A.htmlでクリックした際に数字を記憶させて B.htmlに入れ込むことがしたいです。 □A.htmlは下記で画像を並べています。 <img src="images/photo1.jpg" alt="Photo" width="120" height="120" > <img src="images/photo2.jpg" alt="Photo" width="120" height="120" > <img src="images/photo3.jpg" alt="Photo" width="120" height="120" > <img src="images/photo4.jpg" alt="Photo" width="120" height="120" > ・ ・ ・ ・ 40枚くらいあります。 □B.htmlは下記で画像を表示しています。 <div id="mainPhoto"> <img src="images/photo1.jpg" id="slidePhoto" /> </div> <div id="mainPhotoNavi"> <script type="text/javascript">count = 0; imageLength = 9; baseuri = 'images'</script> <script src="js/slideshow.js" type="text/javascript"></script> </div> ※A.htmlのphoto3.jpgをクリックしたら、3という数字が記憶されて、 B .htmlの"mainPhoto"内部のphoto(x).jpg、(x)に当てはまる。 "mainPhotoNavi"内部のcount = (x)、(x)に当てはまる。 上記のような方法をとりたいです。 どうか、よろしくお願いいたします。
- 締切済み
- JavaScript
- 二重の画像切り替え
以下のようなJavaScriptを作りたいと考えております。 非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。 （ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。） 見せるのも恥ずかしいレベルのソースですが、ソースも載せます。 ＣのいずれかをクリックするとＢの３つのサムネイル画像がすべて切替り、 更にＢのいずれかをクリックすると拡大画像のＡが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←Ａ（Ｂの拡大画像） └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←Ｂ（車の各方向からの写真画像） └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←Ｃ（車のカラーバリエーション） └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> <!--Ａ（Ｂの拡大画像）--> <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div> <!--Ｂ（車の各方向からの写真画像）--> <div class="thumbnail"> <ul> <li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li> <li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li> <li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li> </ul> </div> <!--Ｃ（車の各方向からの写真画像）--> <div class="color"> <ul> <li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li> </ul> </div> <!--メインイメージ切り替えスクリプト--> <script type="text/javascript"> $(document).ready( function() { $(".thumbnail a").click( function() { var changeSrc = $(this).attr("href"); $("#target_main").fadeOut("slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); }); </script> <!--カラー切り替えスクリプト--> ・ ・ ・
- 締切済み
- JavaScript
- 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; }
- ベストアンサー
- その他（プログラミング・開発）
- 同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> <!-- END #gnav --> <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><!-- END wrap --> <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> <!-- END #wrap --> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
- 画像のフェードインについて・・・。
現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- ベストアンサー
- その他([技術者向] コンピューター)
- 画像のフェードインについて・・・。
以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- 締切済み
- JavaScript
- 「2枚1組の画像」3セットを1セットずつランダムで表示させたい。
Javascriptの書き方はよく分からない素人です。 いつもソースを探してきて使っているレベルです。 やりたい内容に似たソース（▼以下）を探してきたのですが、 もともと「2枚1組の画像」を2セットずつ表示させるもので、 変更の仕方が分からないので教えていただきたいです。 さらに、「一定時間ごと」ではなく、 「ページを読み込む度」に表示を変えたいです。 （この場合全く違う書き方をすることになるのでしょうか？） よろしくお願いします。 ▼ここから－－－－－－－－－－－－－－－－－－－ <script language="javascript"><!-- setInterval("textch()",3000); TEXT = new Array('text0','text1','text2'); function textch() { for(i=0; i<TEXT.length; i++){ var tmpA, tmpB, rnd; rnd=Math.floor(Math.random() * TEXT.length); tmpA=TEXT[i]; tmpB=TEXT[rnd]; TEXT[i]=tmpB; TEXT[rnd]=tmpA; } for(j=0;j<TEXT.length;j++) { document.getElementById(""+TEXT[j]+"").style.display = "none"; if(j == 0 || j == 1) { document.getElementById(""+TEXT[j]+"").style.display = "block"; } } } //--></script> <div id="text0"><img src="images/a.jpg" alt="A" width="410" height="168"><img src="images/b.jpg" alt="B" width="470" height="168"></div> <div id="text1"><img src="images/c.jpg" alt="C" width="410" height="168"><img src="images/d.jpg" alt="D" width="470" height="168"></div> <div id="text2"><img src="images/e.jpg" alt="E" width="410" height="168"><img src="images/f.jpg" alt="F" width="470" height="168"></div>
- ベストアンサー
- JavaScript
- 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 ); });
- 締切済み
- JavaScript
- HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
お礼
ありがとうございます。 無事、解決しました。