質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

5083閲覧

CSSにて複数のスライドショーを作成する方法

nodoame

総合スコア12

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/12/11 09:43

編集2016/12/11 14:10

###前提・実現したいこと
css だけで作る フォトギャラリー・スライドショー
上記のサイトを参考にスライドショーを作成しているのですが、table内に2つ以上のスライドショーを作成する方法でつまずいています。解決方法を教えていただけると幸いです。

###該当のソースコード

HTML

1<table> 2 <tr> 3 <th>名前</th> 4 <td>内容</td> 5 <td width="150">内容</td> 6 <td width="150">内容</td> 7 <td> 8 <!--スライドショー--> 9 <div id="stage3"> 10 <input type="radio" id="back3_2" name="gal" checked> 11 <input type="radio" id="back3_3" name="gal"> 12 <input type="radio" id="next3_1" name="gal"> 13 <input type="radio" id="next3_2" name="gal"> 14 <div id="b_btn3"> 15 <label for="back3_2"><div id="left3_2" class="cover_left3"><span><</span></div></label> 16 <label for="back3_3"><div id="left3_3" class="cover_left3"><span><</span></div></label> 17 </div> 18 <div id="n_btn3"> 19 <label for="next3_1"><div id="right3_1" class="cover_right3"><span>></span></div></label> 20 <label for="next3_2"><div id="right3_2" class="cover_right3"><span>></span></div></label> 21 <label for="next3_3"><div id="right3_3" class="cover_right3"><span>></span></div></label> 22 </div> 23 <div id="photos3"> 24 <div class="photo" id="photo3_1" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div> 25 <div class="photo" id="photo3_2" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div> 26 <div class="photo" id="photo3_3" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div> 27 </div> 28 </div> 29 </td> 30 </tr> 31 32 <tr> 33 <th>名前</th> 34 <td>内容</td> 35 <td width="150">内容</td> 36 <td width="150">内容</td> 37 <td> 38 <!--スライドショー--> 39 <div id="stage4"> 40 <input type="radio" id="back4_2" name="gal" checked> 41 <input type="radio" id="back4_3" name="gal"> 42 <input type="radio" id="next4_1" name="gal"> 43 <input type="radio" id="next4_2" name="gal"> 44 <div id="b_btn4"> 45 <label for="back4_2"><div id="left4_2" class="cover_left4"><span><</span></div></label> 46 <label for="back4_3"><div id="left4_3" class="cover_left4"><span><</span></div></label> 47 </div> 48 <div id="n_btn4"> 49 <label for="next4_1"><div id="right4_1" class="cover_right4"><span>></span></div></label> 50 <label for="next4_2"><div id="right4_2" class="cover_right4"><span>></span></div></label> 51 <label for="next4_3"><div id="right4_3" class="cover_right4"><span>></span></div></label> 52 </div> 53 <div id="photos4"> 54 <div class="photo" id="photo4_1" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div> 55 <div class="photo" id="photo4_2" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div> 56 <div class="photo" id="photo4_3" style="width:240px; margin:0 auto;"><img src="画像URL" style=" display: block; margin-left: auto; margin-right: auto;"></div> 57 </div> 58 </div> 59 60 </td> 61 </tr> 62</table>

CSS

1 2/*全体のコンテナー*/ 3#stage3{ 4 position: relative; 5 width: 240px; 6 height: 240px; 7 margin: 0 auto; 8 overflow:hidden; 9} 10/*全てのラジオボタンを非表示に*/ 11#back3_1{ display:none;} 12#next3_1{ display:none;} 13#back3_2{ display:none;} 14#next3_2{ display:none;} 15#back3_3{ display:none;} 16#next3_3{ display:none;} 17#back3_4{ display:none;} 18#next3_4{ display:none;} 19#back3_5{ display:none;} 20#next3_5{ display:none;} 21 22/*全ての写真を水平一列に格納したdiv、#photosにtransitionを設定*/ 23#photos3 { 24 position:absolute; 25 top:0; 26 width:800px; 27 -webkit-transition: all 1s ease; 28 -moz-transition: all 1s ease; 29 -o-transition: all 1s ease; 30 transition: all 1s ease; 31} 32 33 34/*各写真の並び位置を設定*/ 35#photo3_1{ 36 position:relative; 37 float:left; 38 } 39#photo3_2{ 40 position:relative; 41 float:left; 42 } 43#photo3_3{ 44 position:relative; 45 float:left; 46 } 47#photo3_4{ 48 position:relative; 49 float:left; 50 } 51#photo3_5{ 52 position:relative; 53 float:left; 54 } 55/*ボタン領域の設定*/ 56.cover_left3, .cover_right3 { 57 position:absolute; 58 top:0; 59 width:50px; 60 height:240px; 61 display:none; 62 cursor:pointer; 63 z-index:101; 64} 65.cover_left3 { 66 left:0; 67} 68.cover_right3 { 69 left:100px; 70} 71/*ボタン領域内のボタン文字(<、>)の設定*/ 72.cover_left3 span, .cover_right3 span { 73 position: absolute; 74 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 75 font-size: 40px; 76 font-weight: bold; 77 opacity:0; 78 top: 140px; 79} 80.cover_left3 span { 81 left: 10px; 82} 83.cover_right3 span { 84 left: 100px 85} 86/*ボタン領域hover時文字の設定*/ 87.cover_right3:hover > span,.cover_left3:hover > span { 88 opacity:1; 89 color:#EEE; 90} 91#right3_1{ display:none; } 92#left3_2{ display:none;} 93#right3_2{ display:none; } 94#left3_3{ display:none;} 95#right3_3{ display:none; } 96#left3_4{ display:none;} 97#right3_4{ display:none; } 98#left3_5{ display:none;} 99 100/*各ボタン領域がクリックされた時の#photosの行き先位置の設定*/ 101 102#back3_2:checked ~ #photos3 { left:0; } 103#back3_3:checked ~ #photos3,#next3_1:checked ~ #photos3 { left:-240px; } 104#back3_4:checked ~ #photos3,#next3_2:checked ~ #photos3 { left:-480px; } 105#back3_5:checked ~ #photos3,#next3_3:checked ~ #photos3 { left:-720px; } 106#next3_4:checked ~ #photos3 { left:-2400px; } 107 108/*ボタン領域クリック時に前表示域を消し切り替え後の表示域を表示*/ 109#back3_2:checked ~ #n_btn3 label #right3_1 { display:block; } 110#back3_3:checked ~ #b_btn3 label #left3_2,#back3_3:checked ~ #n_btn3 label #right3_2 { display:block; } 111#back3_4:checked ~ #b_btn3 label #left3_3,#back3_4:checked ~ #n_btn3 label #right3_3 { display:block; } 112#back3_5:checked ~ #b_btn3 label #left3_4,#back3_5:checked ~ #n_btn3 label #right3_4 { display:block; } 113#next3_1:checked ~ #b_btn3 label #left3_2,#next3_1:checked ~ #n_btn3 label #right3_2 { display:block; } 114#next3_2:checked ~ #b_btn3 label #left3_3,#next3_2:checked ~ #n_btn3 label #right3_3 { display:block; } 115#next3_3:checked ~ #b_btn3 label #left3_4,#next3_3:checked ~ #n_btn3 label #right3_4 { display:block; } 116#next3_4:checked ~ #b_btn3 label #left3_5 { display:block; } 117 118 119 120 121 122/*全体のコンテナー*/ 123#stage4{ 124 position: relative; 125 width: 240px; 126 height: 240px; 127 margin: 0 auto; 128 overflow:hidden; 129} 130/*全てのラジオボタンを非表示に*/ 131#back4_1{ display:none;} 132#next4_1{ display:none;} 133#back4_2{ display:none;} 134#next4_2{ display:none;} 135#back4_3{ display:none;} 136#next4_3{ display:none;} 137#back4_4{ display:none;} 138#next4_4{ display:none;} 139#back4_5{ display:none;} 140#next4_5{ display:none;} 141 142/*全ての写真を水平一列に格納したdiv、#photosにtransitionを設定*/ 143#photos4 { 144 position:absolute; 145 top:0; 146 width:800px; 147 -webkit-transition: all 1s ease; 148 -moz-transition: all 1s ease; 149 -o-transition: all 1s ease; 150 transition: all 1s ease; 151} 152 153 154/*各写真の並び位置を設定*/ 155#photo4_1{ 156 position:relative; 157 float:left; 158 } 159#photo4_2{ 160 position:relative; 161 float:left; 162 } 163#photo4_3{ 164 position:relative; 165 float:left; 166 } 167#photo4_4{ 168 position:relative; 169 float:left; 170 } 171#photo4_5{ 172 position:relative; 173 float:left; 174 } 175/*ボタン領域の設定*/ 176.cover_left4, .cover_right4 { 177 position:absolute; 178 top:0; 179 width:50px; 180 height:240px; 181 display:none; 182 cursor:pointer; 183 z-index:101; 184} 185.cover_left4 { 186 left:0; 187} 188.cover_right4 { 189 left:100px; 190} 191/*ボタン領域内のボタン文字(<、>)の設定*/ 192.cover_left4 span, .cover_right4 span { 193 position: absolute; 194 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 195 font-size: 40px; 196 font-weight: bold; 197 opacity:0; 198 top: 140px; 199} 200.cover_left4 span { 201 left: 10px; 202} 203.cover_right4 span { 204 left: 100px 205} 206/*ボタン領域hover時文字の設定*/ 207.cover_right4:hover > span,.cover_left4:hover > span { 208 opacity:1; 209 color:#EEE; 210} 211#right4_1{ display:none; } 212#left4_2{ display:none;} 213#right4_2{ display:none; } 214#left4_3{ display:none;} 215#right4_3{ display:none; } 216#left4_4{ display:none;} 217#right4_4{ display:none; } 218#left4_5{ display:none;} 219 220/*各ボタン領域がクリックされた時の#photosの行き先位置の設定*/ 221 222#back4_2:checked ~ #photos4 { left:0; } 223#back4_3:checked ~ #photos4,#next4_1:checked ~ #photos4 { left:-240px; } 224#back4_4:checked ~ #photos4,#next4_2:checked ~ #photos4 { left:-480px; } 225#back4_5:checked ~ #photos4,#next4_3:checked ~ #photos4 { left:-720px; } 226#next4_4:checked ~ #photos4 { left:-2400px; } 227 228/*ボタン領域クリック時に前表示域を消し切り替え後の表示域を表示*/ 229#back4_2:checked ~ #n_btn4 label #right4_1 { display:block; } 230#back4_3:checked ~ #b_btn4 label #left4_2,#back4_3:checked ~ #n_btn4 label #right4_2 { display:block; } 231#back4_4:checked ~ #b_btn4 label #left4_3,#back4_4:checked ~ #n_btn4 label #right4_3 { display:block; } 232#back4_5:checked ~ #b_btn4 label #left4_4,#back4_5:checked ~ #n_btn4 label #right4_4 { display:block; } 233#next4_1:checked ~ #b_btn4 label #left4_2,#next4_1:checked ~ #n_btn4 label #right4_2 { display:block; } 234#next4_2:checked ~ #b_btn4 label #left4_3,#next4_2:checked ~ #n_btn4 label #right4_3 { display:block; } 235#next4_3:checked ~ #b_btn4 label #left4_4,#next4_3:checked ~ #n_btn4 label #right4_4 { display:block; } 236#next4_4:checked ~ #b_btn4 label #left4_5 { display:block; } 237

###発生している問題・エラーメッセージ

上記のソースを実行すると、下のスライドショーは動くが、上のスライドショーが実行されない

###補足情報(言語/FW/ツール等のバージョンなど)
今回はjs等は使わずにcssのみでスライドショーを実行したいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ラジオボタンで切り替えるスライダーですね。
見たところラジオボタンのnameが2つとも同じになっています。
nameが同じであれば1つのグループになってしまうので、各スライダーでnameを分けてください。

例)

html

1~~~~~ 2 3<input type="radio" id="back3_2" name="gal3" checked> 4<input type="radio" id="back3_3" name="gal3"> 5<input type="radio" id="next3_1" name="gal3"> 6<input type="radio" id="next3_2" name="gal3"> 7 8~~~~~ 9 10<input type="radio" id="back4_2" name="gal4" checked> 11<input type="radio" id="back4_3" name="gal4"> 12<input type="radio" id="next4_1" name="gal4"> 13<input type="radio" id="next4_2" name="gal4"> 14 15~~~~~

投稿2016/12/12 09:45

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nodoame

2016/12/12 12:49

解決できました!本当にありがとうございます!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問