htmlとcssを使用したタグの振り分けができない

実現したいこと

htmlとcssを使用したタグの振り分け

発生している問題・分からないこと

ファンアートを載せるサイトを作ろうと思っています。
プログラミングは初めてです。
Youtubeなどをみて見様見真似でコードを打ち込んでみましたが、実際にうまく表示されず、しかしどこが間違っているかわかりません。
タブはクリックできますが、タブのコンテンツが表示されません。

アドバイスいただけると幸いです。

該当のソースコード

html
1<body>
2
3  <div class="container">
4
5    <div class="side">
6
7      <ul class="tab_menu">
8          <li>
9            <input id="top" type="radio" name="tab_item" checked>
10            <label class="tab_item" for="top">top</label>
11          </li>
12
13          <LI>
14            <input id="about" type="radio" name="tab_item" checked>
15            <label class="tab_item" for="about">about</label>
16          </LI>
17          <li>
18            <input id="illust" type="radio" name="tab_item">
19            <label class="tab_item" for="illust">illust</label>
20          </LI>
21          <LI>
22            <input id="comic" type="radio" name="tab_item">
23            <label class="tab_item" for="comic">comic</label>
24          </LI>
25
26          <li><a href="https://x.com/__yomali">twitter</a></li>
27          <li><a href="./index.html">index</a></li>
28      </ul>
29
30    </div> 
31
32    <div class=main>
33        
34      <div class="tab_content" id="top_content">
35        <div class="tab_content_description">
36          <p class="c-txtsp">
37            topの内容がここに入ります</p>
38        </div>
39      </div>
40
41      <div class="tab_content" id="about_content">
42        <div class="tab_content_description">
43         <p class="c-txtsp">
44            ここは、こみんくまが個人運営しているサイトです。<br>
45            展示しているファンアートは、版権元とは一切関係ございません。<br>
46            サイト内の全てのコンテンツの転載・複製・加工・再配布・再アップロード・AI学習を固く禁じます。<br>
47            Reproducing all or any part of the contents is prohibited.  <br>
48            お問い合わせはwaveboxまで<br>
49            <a href="https://wavebox.me/wave/co5s02g2m77vn256/">ここ</a>
50         </p>
51        </div>
52      </div>
53
54      <div class="tab_content" id="illust_content">
55        <div class="tab_content_description">
56          <p class="c-txtsp">illustの内容がここに入ります</p>
57        </div>
58      </div>
59
60      <div class="tab_content" id="comic_content">
61        <div class="tab_content_description">
62          <p class="c-txtsp">comicの内容がここに入ります</p>
63        </div>
64      </div>
65  
66    </div>
67  </div>
68  
69</body>

css
1.container {
2    width: 100%;
3    height: 1000px;
4    display: flex;
5  }
6  .main {
7    width: 90%;
8    color: black;
9    background-color: white
10  }
11  .side {
12    width: 10%;
13    box-sizing: border-box;
14    color: white;
15    background-color: black;
16  }
17
18.side li:hover {
19    color: #80ba4a;
20}
21
22
23
24/*ラジオボタンを全て消す*/
25input[name="tab_item"] {
26    display: none;
27  }
28  
29  /*タブ切り替えの中身のスタイル*/
30  .tab_content {
31    display: none;
32    padding: 40px 40px 0;
33    clear: both;
34    overflow: hidden;
35  }
36  
37  
38  /*選択されているタブのコンテンツのみを表示*/
39  #top:checked ~ #top_content,
40  #about:checked ~ #about_content,
41  #illust:checked ~ #illust_content,
42  #comic:checked ~ #comic_content {
43    display: block;
44  }
45
46/*選択されているタブのスタイルを変える*/
47.tab_menu input:checked + .tab_item {
48    background-color: #80ba4a;
49    color: #fff;
50  }
51

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

[リンク内容]https://bagelee.com/design/css/create_tabs_using_only_css/

こちらを参考にしました。

補足

特になし

maisumakun

2024/10/22 12:59

一部の<li>が<LI>と大文字になっていますが、これを小文字にしたらどうなりますか？

__yomali

2024/10/22 14:32

コメントありがとうございます。試しましたがまだ解決できていません。

行動規範の内容に同意します

回答2件

こうですね

CSS
1.tab_content {
2padding: 40px 40px 0;
3clear: both;
4overflow: hidden;
5}
6
7.container:not(:has(#top:checked))  #top_content,
8.container:not(:has(#about:checked)) #about_content,
9.container:not(:has(#illust:checked)) #illust_content,
10.container:not(:has( #comic:checked)) #comic_content {
11display: none;
12}