現在、HTMLテンプレートを利用してサイトを作っています。
使用したテンプレート
途中ですがサイトはここに仮置きしています。
仮置きサイト
タブを作って3つに表示する内容を分割したのですが、タブをcssで作った時のラジオボタンが消せません。
css
1.tabs { 2 3 background-color: #242943; 4 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 5 margin: 0 auto;} 6 7 /*タブのスタイル*/ 8 .tab_item { 9 width: calc(100%/3); 10 height: 80px; 11 border-bottom: 5px solid #5ab4bd; 12 background-color: #242943; 13 line-height: 80px; 14 color: #565656; 15 display: block; 16 float: left; 17 transition: all 0.4s ease; 18 } 19 .tab_item:hover { 20 opacity: 0.75; 21 } 22 .none{ 23 display: none; 24 } 25 /*ラジオボタン消す*/ 26 input[name="tab_item"] { 27 display: none; 28 } 29 30 /*タブ切り替えの中身のスタイル*/ 31 .tab_content { 32 display: none; 33 clear: both; 34 overflow: hidden; 35 } 36 37 38 /*選択されているタブだけ表示*/ 39 #director:checked ~ #director_content, 40 #cast:checked ~ #cast_content, 41 #staff:checked ~ #staff_content { 42 display: block; 43 } 44 45 /*選択されているタブのスタイルを変える*/ 46 .tabs input:checked + .tab_item { 47 background-color: #5ab4bd; 48 color: #fff; 49 }
html
1<div class="tabs"> 2 3 <input id="director" type="radio" name="tab_item" class="none" checked> 4 <label class="tab_item" for="director"><h2>DIRECTOR</h2></label> 5 6 <input id="cast" type="radio" name="tab_item"> 7 <label class="tab_item" for="cast"><h2>CAST</h2></label> 8 9 <input id="staff" type="radio" name="tab_item"> 10 <label class="tab_item" for="staff"><h2>STAFF</h2></label> 11 12 <!--タブ1--> 13 <div class="tab_content" id="director_content"> 14 内容 15 </div> 16 <div class="tab_content" id="cast_content">中略</div> 17 <div class="tab_content" id="staff_content">中略</div> 18</div> 19 20 21
参考にしたいサイトはこちらです。サイト
なぜラジオボタンが消えないのでしょうか、、、css htmlともにそんなにやったことがなくて些細なミスかもしれませんがよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/03 17:14
2018/03/03 17:43
2018/03/06 07:53