Q&A
実現したいこと
（※HTMLCSSの基礎レベルの学習が一通り終わり、実際のWebページでよく見かける機能を作る練習をしています。今回のタブ切り替えは、Google検索で出てきたソースコードを参考にして作成しております。）
横に並んだ3つのタブの中から1つを選択すると、画面上すぐ下の説明が切り替わるようにしたいです。
ラジオボタン(非表示)とlabelタグを紐づけを利用しており、タブ（label要素）を選択すると、CSSの疑似クラス :checked により、div要素の表示・非表示を切り替えたいです。
発生している問題・分からないこと
- ３つのタブを適当にクリックすると、div要素が縦に３つ並んだ状態になってしまいます。
（ラジオボタンはチェックが１つだけしか入らなかったと思いますが、ラジオボタンが機能していないのでしょうか？） - labelタグのcssで、width: calc(100% / 3); と指定しているのに、折り返して表示されてしまいます。
エラーメッセージ
error
1エラーメッセージの表示はありません。
該当のソースコード
HTML
1<!doctype html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>タブ切り替え</title> 7 <style> 8 div.container { 9 max-width: 1000px; 10 } 11 section { 12 margin: 0 auto; 13 width: 80%; 14 } 15 input { 16 display: none; 17 } 18 .description { 19 display: none; 20 clear: both; 21 } 22 .radio-btn { 23 border: 2px solid yellowgreen; 24 display: block; 25 float: left; 26 width: calc(100% / 3); 27 cursor: pointer; 28 } 29 #input-dog:checked ~ #dog-desc, 30 #input-cat:checked ~ #cat-desc, 31 #input-rabbit:checked ~ #rabbit-desc { 32 display: block; 33 border: 2px solid red; 34 } 35 </style> 36 </head> 37 <body> 38 <header> 39 </header> 40 <main> 41 <div class="container"> 42 <section> 43 <h3>ペットの説明を読む</h3> 44 <div class="main-area"> 45 <input type="radio" name="" id="input-dog" class="input-radio" checked> 46 <input type="radio" name="" id="input-cat" class="input-radio"> 47 <input type="radio" name="" id="input-rabbit" class="input-radio"> 48 49 <label for="input-dog" class="radio-btn">ワンちゃん</label> 50 <label for="input-cat" class="radio-btn">ネコちゃん</label> 51 <label for="input-rabbit" class="radio-btn">ウサギちゃん</label> 52 53 <div class="description" id="dog-desc"> 54 <p>犬は、飼い主さまに従順な性格と可愛らしい見た目で、ペットとして高い人気があります。ただし、飼いやすさは犬種やサイズによっても異なります。犬の鳴き声は、トラブルになりやすいため、無駄吠えの対策が必須です。お世話はご飯、ブラッシングなどのお手入れ、散歩を基本的に行います。抜け毛やにおいの少ない小型犬は、飼育初心者の方でも飼いやすいといえます。犬と一緒に暮らすには、お金と時間がある程度かかります。最後まできちんと面倒がみられるか、考えてから犬をお迎えしましょう。</p> 55 </div> 56 <div class="description" id="cat-desc"> 57 <p>癒し系のペットとして人気の高い猫は、ツンデレな性格や可愛い仕草で飼い主さまを魅了しています。鳴き声はやや大きいため、近所に響かないように対策が不可欠です。毎日のご飯やお手入れのほかに、おもちゃでの遊びも必要です。猫の飼育には、ケージ、トイレ、給水器、食器、猫砂などを最低限用意しましょう。猫はケージに閉じ込めず、家の中を自由に歩けるように環境を整えることをおすすめします。猫は長生きすると20年近く生きます。最後まできちんとお世話ができるか考えてからお迎えしましょう。</p> 58 </div> 59 <div class="description" id="rabbit-desc"> 60 <p>うさぎは、ヨーロッパに生息する「アナウサギ」を品種改良して生まれました。体臭が少なく、くりっとした目にふわふわのしっぽが魅力です。うさぎはほとんど鳴くことはありません。お世話は、ご飯とケージ掃除、ブラッシングなどのお手入れと比較的簡単です。うさぎの飼育にはケージ、給水器、食器、トイレ、ブラシなどを用意しましょう。ほかの小動物に比べて体が大きいため、広めの飼育スペースが必要です。オスのうさぎは縄張り意識が強く、マーキングする可能性があるので注意しましょう。</p> 61 </div> 62 </div> 63 </section> 64 </div><!-- /.container --> 65 </main> 66 <footer> 67 </footer> 68 </body> 69</html>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
div要素のdisplayをフレックスボックスとし、flex-wrapで折り返し表示されるように設定したが、結果は変わりませんでした。
補足
特になし
回答1件
0
ベストアンサー
ラジオボタンはチェックが１つだけしか入らなかったと思いますが、ラジオボタンが機能していないのでしょうか？
はい。name=""としていた場合、それらのinput type="radio"は連動しません。
their name attributes are not empty （WHATWGより）
投稿2025/11/22 07:42
総合スコア146963
あなたの回答
tips
プレビュー
2025/11/22 10:08