貴サイト環境での現象であれば、こちらでは分かりかねますのでご了承ください。こちらのフォトギャラリーを使わせて頂きました。css歴1ヶ月と未熟者で分からない事だらけですが、何とか設置出来ました。ありがとうございます。いくつか質問があります。サムネイル画像に、現在選択(表示)されている画像が見た目で分かるような表示。クリックではなくマウスオーバーで。いった事が出来ますでしょうか?すみませんが、宜しくお願い致します。:minさん、はじめまして。当サイトをご活用くださりありがとうございます。>サムネイル画像に、現在選択(表示)されている画像が見た目で分かるような表示。クリックではなくマウスオーバーで。ありますが、ご趣旨が今一つはっきりしません。:言葉足らずですみません。サムネイルに枠を付けられるかと、いう事です。初期表示は一番目の画像にのみ付いていて、クリックしたらクリックした画像に枠が付くといった感じです。マウスオーバーは、クリック型ではなくサムネイル部分にマウスを乗せると画像が変わるホバーエフェクトでという事です。勉強不足で申し訳ないのですが、再度考察頂けると幸いです。以下のページに示しました(「」を外したURLのみをブラウザに貼りつけてください)「http://css.programming.jp/pages/thumb_hover_fade_responsive.html」HTML、CSSをご覧になればわかると思います。初期状態で枠をつけることができていませんのご了承ください。:ありがとうございます。ページ拝見し、早速設置して良い感じになったので嬉しいです。他にも使ってみたいものがあるので、また利用させて下さい。引き続きご活用ください。WEB作成初心者です。こちらのフォトギャラリーを使用させて頂き、他のページも参考にさせて頂いております。ありがとうございます。ひとつ質問させて下さい。本当に初心者な質問で申し訳ないのですが、こちらのフォトギャラリーをtable要素やbox要素などで囲んでレイアウトしたいのですが、可能でしょうか?何度か挑戦しているのですが、paddingやmarginでしか位置調整出来ず、行き詰っております。厚かましいお願いですが、何卒お知恵を拝借出来ればと存じます..。:emyさん、はじめまして。</td>内に挿入すれば、そのまま表示されるはずです。table要素に入れるということは、他のセル内の要素と並べたりしてレイアウトするということだと思うのですが、そのtableやtdにCSSが定義されていれば、その影響を受けることになります。ご返信ありがとうございます。仰る通り別のcssからの影響が原因でした。白紙の状態から作り直した所、無事にレイアウト出来そうです。ありがとうございました。あと一点質問なのですが、こちらのcssとhtmlを使わせて頂いているのですが、最初の写真が消えず、その上にクリックした画像が表示されてしまいます。上記の質問欄に似たようなやり取りがありましたので、そちらのCSSの記述も追加してみたのですが、やはり消えません。(キャプションと書いてあるので、画像とは違うのかもしれません)お手隙の時で構いませんのでご教示頂ければと思います。:レイアウトが解決してよかったですね。最初の写真は下敷きのようなもので、消えません。他の写真が上に乗るので、見えなくなり不自然ではないはずですが。(キャプションの項は、関係ありません。キャプションは、メモ書きのような説明文です。)どのような不具合があるのでしょうか?最初の写真は、初期画面に何も表示されていないのが寂しいので表示させています。同じサイズの、例えば黒色のスクリーン画像を表示させておいて、そこに説明文などを書いておくのもいいかもしれません。:元々消えないものなのですね。当方としての不具合なのですが、縦横比の違うサイズの画像を表示させているので、クリックした画像の下から、下敷き画像が横や下などから見えてしまう事です。黒色のスクリーンで対応..も、やはり見えてしまいますよね。画像サイズは統一しないと無理でしょうか。背景色と同じ色のスクリーンを置くことです。:なるほど!そんなやり方もあるのですね。ご返信頂いて感謝しております。さきほど、レスポンシブではない方のフェイドイン型フォトギャラリーを参考にしまして、文字を画像に差し替えた所、うまく行きました!このようなやり方を公開して頂いた上、ご相談にも乗って下さり感謝のしようもございません。ありがとうございます。引き続き当サイトをご活用ください。今回、こちらのフォトギャラリーを使用させて頂きました。素晴らしいアイディアを教えて頂き、本当に感謝しております。申し訳ありませんが、ご質問させて下さい。今回使用している画像サイズが全て異なっており、checkedが入った場合に、親要素を透過設定しました。親要素のサイズが基準で表示されるので、レスポンシブした時に、はみ出したり余分な空白が出来ます。親要素を基準としている事は理解しておりますが、checkedが入った場合に、親要素ではなくabsoluteのサイズに合わせて高さを可変する方法、またはそれに近い方法がありましたらご教授頂けないでしょうか?宜しくお願い致します。代えると、高さが可変になります。60%は、表示を見ながら、適した値に変えてください。:早速のご解答ありがとうございます。書き方が分かりづらく、大変申し訳ありませんでした。1232の画像サイズが1より小さいと、12のheightの差分、2と3の間に余白がある様に見えるのを解消したいです。これは、やはり1と2の画像サイズは同じにしないと、難しいでしょうか?お手間を取らせて申し訳ございませんが、もし良い案がありましたらご教授お願い致します。加えますと、幅はサイズの大小にかかわらず、いっぱいに表示されます。スライドによって縦横比が違ってくると、高さはバラバラになり、高さが小さいものは、余白が生じます。指定した写真です(ここでは1)。したがって、この記述を削除し、代わりに同サイズの無地の四角形画像を表示すれば、それがスクリーンになって、余白はそれの一部が見えることになります。:ご解答ありがとうございます。「縦横比が違うので、高さはバラバラになり、高さが小さいものは、余白が生じます。↑ここで見えている背景1を、checkedになると2の高さになる様にしたいのです。1に同じサイズの無地の画像を挿入しても、2で指定する画像サイズがバラバラだと、やはり透過にしていても1が余白として見える事になりますよね?PCで見たときはそこまで気にならないのですが、スマホで見たときに、2の画像が小さいとメイン画像とサムネイルの間にかなりの余白が出来てしまい、スクロールしないとサムネイルが表示されないので。:見えているスライド以外は、opacityが0ですから見えません。背景に見えているのは、初期画面が何もないと間が抜けるので、1をあらかじめ表示しているのです。src="wp-images/1.jpg">をdivの中に入れて、idをphoto0として、全ての#rがcheckedになった時に、#photo0のopacityを0にすればいいと思います。:分かりやすいご解答ありがとうございました。会社のホームページに、こちらのHTMLとCSSを利用させて頂き、作成中です。同じページ内で別のフォトギャラリーを入れたいのですが、2個目のフォトギャラリーが綺麗に表示されません。動きは1個目と2個目、個別に動いています。2個目の固定で表示される1枚目がずっと表示されたまま&ラジオボタンが見えている・・・がどうしても直せません。span」と、名前が重なっているだろうところを変更。:富永さん、はじめまして。src="wp-images/s1.jpg"></label>の、r1,galはダブっていませんか。お気づきのように、全ての要素について別々の定義が必要です。項目についても同様です。:管理人様ご返信ありがとうございます!「r1」の部分は、「r9~r15」と名前を変えております。「gal」は、どうしてもHTML内でしか探せないのですが、CSS内にもあるのでしょうか??HTML内は「galb」としましたが、やはり1枚目の固定画像・ラジオボタンが消えません。私の方で作った例を、以下のURLでお示ししますので、ソースを表示して参考にしてください。見本のソースありがとうございます。:このファイルではHTMLが分かりません。実際に、二つのギャラリーが載っているページを示してください。上にお知らせしたURLに、スライドの下に各スライドのテキストを加えた例を示しました。このHTML、CSSをベースに作成して見て下さい。:ありがとうございます。頂いたサンプルで、もう一度自分でやってみます!ちなみに、作っているページはこちらになります。:作成ページを拝見しました。name="galb">」を1番目の記述と変えて、galをgalbのように代える必要があります。name="gal">」が要りません。以上で正常に動くと思います。:管理人様ページご確認頂いてありがとうございます!ご指摘の通り直しましたら、正常に表示されました!!CSS内に「gal」を見つけることができなかったので、HTML内でも変更必要ないと思っていたのですが、ここを変える必要があったのですね。期日に間に合ってよかったですね。:サムネイル画像を隙間なく並べたいのですが、そういったことも可能でしょうか?このページを公開してから時間がたっての質問で申し訳御座いませんが、よろしくお願いいたします。:佐藤さんはじめまして。src="wp-images/s2.jpg"></label>のように、全部くっつけて記述してください。:管理人様ご挨拶もなしに質問してしまい申し訳御座いません。アドバイス通りに行ったところ、隙間なく並べることができました。本当にありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。フォトギャラリー・スライドショ。