cssだけの上下連動できるタブ切り替えを作りたい

実現したいこと

jsを使用せずに、cssだけの上下のタブが連動しているタブ切り替えを作りたい。

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

cssだけでタブが上下連動しているタブ切り替えを作りたいのですが上手くいきません。
上下にタブを作って切り替えをすることはできたのですが、
上下の選択されているタブには色を付けることができません。

調べてもjsを使用した方法しか出てこないのですが、わかる方いらっしゃいますでしょうか？

該当のソースコード

<html>
      <div class="tab-container">
          <input id="a" type="radio" name="tab-item" checked>
          <label class="tab-item" for="a">A</label>
          <input id="b" type="radio" name="tab-item">
          <label class="tab-item" for="b">B</label>
              <div id="a-content" class="tab-content">
                Aの内容です。
              </div>
              <div id="b-content" class="tab-content">
                Bの内容です。
              </div>
          <div class="bottom_tab">
            <label class="tab-item" for="a">A</label>
            <label class="tab-item" for="b">B</label>   
          </div>   

      </div>

<css>

/* 全体を覆うdiv */
.tab-container {
  width: 500px;
  border: 1px solid #57ccbc;
}
/*タブ(label)のスタイル*/
.tab-item {
  width: 50%;
  height: 50px;
  line-height: 50px;
  background-color: lightgray;
  text-align: center;
  display: block;
  float: left;
  flex-wrap: nowrap;
  color: gray;
  text-align: center;
  transition: all 0.2s;
  font-weight: bold;
}

/* inputボタンは目には見えないところで働いてもらう */
input[name="tab-item"] {
  display: none;
}

/* タブで切り替えたいコンテンツの部分。ここはお好みで */
.tab-content {
  display: none;
  padding: 40px 0;
  overflow: hidden;
  clear: both;
  text-align: center;
}

/* 選択されているタブのコンテンツを表示させる */
#a:checked ~ #a-content,
#b:checked ~ #b-content {
  display: block;
}

/* 選択されていることがわかるように、選択されているタブはスタイルを変える */
.tab-container input:checked + .tab-item {
  background-color: #57ccbc;
  color: #fff;
}

maisumakun

2023/02/16 08:08 編集

どのような背景があって、CSSだけで実装したいのでしょうか？

sumaru

2023/02/16 08:11

ご質問ありがとうございます！クライアント様の要望でjsを使わない仕様にしてほしいとのことなのです>< やり方ご存じでしょうか？

maisumakun

2023/02/16 08:22

もし仮に、「CSSだけの実装が不可能」となったらどうされるのでしょうか？

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

回答1件

ベストアンサー

提示されたものをそのまま生かすなら

CSS
1.tab-container input:checked + .tab-item {
2  background-color: #57ccbc;
3  color: #fff;
4}

を

CSS
1.tab-container #a:checked ~ .bottom_tab > [for="a"],
2.tab-container #b:checked ~ .bottom_tab > [for="b"],
3.tab-container input:checked + .tab-item {
4  background-color: #57ccbc;
5  color: #fff;
6}

とすれば上下の選択されているタブに色を付ける事ができます。

ただ、今のHTML、CSSだとごちゃごちゃし過ぎてる感じがします。
私ならこうします。

HTML
1<div class="tab-container">
2	<input id="a" type="radio" name="tab-item" checked>
3	<input id="b" type="radio" name="tab-item">
4	<label for="a">A</label>
5	<label for="b">B</label>
6	<div id="a-content">Aの内容です。</div>
7	<div id="b-content">Bの内容です。</div>
8	<label for="a">A</label>
9	<label for="b">B</label>
10</div>

CSS
1/* 全体を覆うdiv */
2.tab-container {
3	width: 500px;
4	border: 1px solid #57ccbc;
5	display: flex;
6	flex-wrap: wrap;
7}
8
9/* inputボタンは目には見えないところで働いてもらう */
10.tab-container > input {
11	display: none;
12}
13
14/*タブ(label)のスタイル*/
15.tab-container > label {
16	flex: 0 0 50%;
17	line-height: 50px;
18	background-color: lightgray;
19	text-align: center;
20	color: gray;
21	transition: all .2s;
22	font-weight: bold;
23}
24
25/* タブで切り替えたいコンテンツの部分。ここはお好みで */
26.tab-container > div {
27	flex: 0 0 100%;
28	padding: 40px 0;
29	overflow: hidden;
30	clear: both;
31	text-align: center;
32}
33
34/* 選択されているタブのコンテンツを表示させる */
35#a:not(:checked) ~ #a-content,
36#b:not(:checked) ~ #b-content {
37	display: none;
38}
39
40/* 選択されていることがわかるように、選択されているタブはスタイルを変える */
41#a:checked ~ [for="a"],
42#b:checked ~ [for="b"] {
43	background-color: #57ccbc;
44	color: #fff;
45}

投稿2023/02/16 16:09

CTRL-S

総合スコア195

sumaru

2023/02/17 00:44

すごく丁寧に教えて下さりありがとうございます！！無事実装することが出来ました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.30%

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

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

質問する

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

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

cssだけの上下連動できるタブ切り替えを作りたい

実現したいこと

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

該当のソースコード

関連した質問