animationの記述はどうなっていますか?スライドが2枚ですから、50%で入れ替えになります。さんの質問・回答を見てください。20秒も背景になるのはおかしいですね。:早速のご返信ありがとうございます。}}上記で行いましたが、うまくいきませんでしたので下記で再試行いたしました。}}しかしながら、どちらもうまくいきませんでしたのでスライドイン・アウト型へ変更いたしました。お手間お掛けしました。ありがとうございました。:スライドイン・アウト型ではうまくいき、フェイドインアウト型ではうまくいかないのはどうしてでしょうね。蛇足かもしえませんが、以下でうまくいくはずです。:わざわざありがとうございます。やってみて、背景はでてこなくなりました!しかし今度は画像が同じ位置にでてこなくなってしまいました、、。画像が2段になり、上下でフェイドイン・アウトになってしまいます。スライド式も背景がでてきてしまうので同じ画像を交互に挿入してやっております。ご教示ありがとうございました。absolute;}が抜けていたみたいで、できました!本当にありがとうございました。次はサムネイル用ロールオーバーに挑戦したく思います。:解決おめでとうございます。次も頑張ってください。フェイドイン・アウト型スライドショー(レスポンシブ)をお借りしたいのですが、5枚目の画像を消さずに残す方法がありましたらご教示願います。現在制作中のホームページのトップページに使用するつもりなのですが、スライドショーの終わりの5枚目に重要なメッセージを表示して固定させたいと考えています。:kemasukeさんこんにちは。forwards;を加えれば、100%で止まったままになります。ところが、このanimationは、100%では、フェードアウトして消えてしまいますので、一工夫が人用です。forwards;を記述してください。すると、1枚目から4枚目まではanimationを繰り返しません。5枚目については別扱いにします。htmlで、class="pic"となっているところを、class="pic2"とします。cssで、以下のように、別建ての記述にします。}}これでうまくいきますので、試してみてください。読み返していて気が付きました。:お返事ありがとうございます。試してみたところ、大成功でした。大きく前進したことは間違いありません。本当にありがとうございました。:お役に立ててうれしいです。一歩一歩前進してください。サイトを作る際に参考にさせていただいております。スマホサイトでは何とかスライドショーを表示させることができたのですが、PCサイトでは何故か全画面表示の時は5枚分の画像が縦に並びスライドしません。ウィンドウを狭め左右の余白がない形になるとスライドショーがはじまります。上記の2点のみ変更して使用させていただいておりますので、何が原因なのか検討もつきません。何か改善手段があったら、ご教授いただけたら幸いです。:rioさん、はじめまして。変更した2点目の記述がありませんね。思い当たる点が思い浮かびませんね。画像が縦に並ぶということは、position:absolute;が反映されていないということですが、画面を狭めると正常になるというところがわかりません。クラス名の、.picと#stageのposition:relative;がきちんと定義されているか確認してください。:すみません、抜けておりました。変更した箇所は画像のサイズだったのですが、本日cssを上の方に入れてみたら全て解決しました。別の箇所のスタイルがおかしくて影響してしまった様です。この度はご指摘ありがとうございました。:解決してホッとしました。そんなこともあるんですね。いいサイトができますように。:大変参考にさせていただいております。最後の画像がずっと残ってしまい、2巡目以降の一枚目がほとんど表示されることなく2枚目に移行してしまいます。:おはようございます。5秒ごとですから、トータル50秒、delayが+5秒まではできていると思います。記述ですが、これは5枚用の記述ですから、10枚用では、各%について半分にしなければなりません。5枚用は20%で切り替えるのですが、10枚用は10%で切り替える必要があります。:ありがとうございました!!おかげでスムーズに切り替わるようになりました。:どういたしまして、お役に立てて幸いです。今後とも当サイトをよろしく。:kazanoさん、はじめまして。スライドショー(フェードイン・アウト型)で、西村茂美さんから同じ質問が寄せられています。その回答を参考にしてください。レスポンシブ型でのサンプルを、以下に掲載しました。rel="nofollow">http://css.programming.jp/pages/slideshow_fade_2_link.html</a>CODEは、ソースで確認してください。上のSAMPLEは、firefoxではリンクが効かないようです。次のページは、スライド型を併用したもので、firefoxでもうまくいきます。ページソースを見て、参考にしてください。:先日フェイドイン型フォトギャラリー(レスポンシブ)で質問させていただいた。ご質問にご回答いただき感謝しております。#stage2の動作が確認できません。(htmlの.pic2を.picにすると動作しますが#stageと同タイミングになるため写真が消えている時間が長くなります)イメージは#stageで5枚を25秒で繰り返し、#stage2は2枚を16秒で表示したいと考えております。何度も試行錯誤をしてみたのですが、解決できずに困っています。ご教授いただけませんでしょうか?htmlは以下の通りです。cssは以下の通りです。このコメント欄には、html形式のコードが表示されません。私も困っているのですが。<は&lt;、>は&gt;を半角でで記述すれば表示されます。:早速のご返答ありがとうございます。htmlは以下のように記述してあります。ご回答にあったように原則的にコピペのネーミングの後に2をつけてあります。)に変換してみました。style="padding:23%;")(/div)よろしくお願いします。:htmlにもcssにもミスがあります。&lt;/div&gt;は、stageの記述の最後に記します。