詳しい人求む！

CSS のみのタブ切り替えについて

解決済

質問者：i-d-a-i
質問日時：2023/01/11 16:47
回答数：1件

タブがオンになった時、
そのオンになったタブの下線部分だけを消したいのですが、
良い方法ありますか ?

教えてください。

よろしくお願いします。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*
Tabs
*/
/*//////////////////////////////////////////////
// タブ切り替え
//////////////////////////////////////////////*/
/* ノーマライズ */
ul {
list-style-type: none;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
}
/* タブ切り替えを制御するラジオボタンを非表示 */
.tab-btn {
display:none;
}

.tab-list-wrap {
/* タブ切り替えボタンを横並び */
display:flex;
}

.tab-list {
box-sizing: border-box;
display: block;
width: 150px;
color: rgba(var(--color-b), 1.0);
font-weight: 700;
text-align:center;
margin-inline-start: 5px;
padding-block-start: 7px;
padding-block-end: 7px;
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-radius: 4px 4px 0 0;
background-image: linear-gradient(
0deg,
rgba(238, 238, 238, 0.5),
rgba(255, 255, 255, 1.0)
);

cursor:pointer;
}

/* ボタンにチェックが入った時の色 */
#tab-btn1:checked ~ .tab-list-wrap #tab-list1,
#tab-btn2:checked ~ .tab-list-wrap #tab-list2,
#tab-btn3:checked ~ .tab-list-wrap #tab-list3,
#tab-btn4:checked ~ .tab-list-wrap #tab-list4 {
background: rgba(255, 255, 255, 1.0);
}

/*初期状態を非表示に*/
.tab-content {
display: none;
/* box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 1.0); */
border: solid 1px #dddddd;

}

/* 対応するボタンにチェックが入ったときに表示 */
#tab-btn1:checked ~ .tab-content-wrap #tab-content1,
#tab-btn2:checked ~ .tab-content-wrap #tab-content2,
#tab-btn3:checked ~ .tab-content-wrap #tab-content3,
#tab-btn4:checked ~ .tab-content-wrap #tab-content4 {
display: block;
}
</style>
</head>

<body>

<input id="tab-btn1" class="tab-btn" name="tab" type="radio" checked>
<input id="tab-btn2" class="tab-btn" name="tab" type="radio">
<input id="tab-btn3" class="tab-btn" name="tab" type="radio">
<input id="tab-btn4" class="tab-btn" name="tab" type="radio">

<ul class="tab-list-wrap">
<li><label id="tab-list1" class="tab-list" for="tab-btn1">タブ 01</label></li>
<li><label id="tab-list2" class="tab-list" for="tab-btn2">タブ 02</label></li>
<li><label id="tab-list3" class="tab-list" for="tab-btn3">タブ 03</label></li>
<li><label id="tab-list4" class="tab-list" for="tab-btn4">タブ 04</label></li>
</ul>

<div class="tab-content-wrap">
<div id="tab-content1" class="tab-content">
<span>タブ 01</span>
</div>
<div id="tab-content2" class="tab-content">
<span>タブ 02</span>
</div>
<div id="tab-content3" class="tab-content">
<span>タブ 03</span>
</div>
<div id="tab-content4" class="tab-content">
<span>タブ 04</span>
</div>
</div>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2023/01/11 17:38

こんにちは

意図的なのかどうか不明ですが、タブ側のボーダーの色が、グラデーションの最下部の色とほぼ同じなので、通常時は下線があるように表示され、選択時は消える様な表示になっています。
ですので、コンテンツ側の上線を消せば良いのですが、部分的に消すことは難しいですね。

方法として簡単に思いつくのは以下でしょうか。
1）::afterなどで、タブと同じ幅の白色のブロック要素を枠線に重ねる。
2）コンテンツ全体を上にずらして、タブのブロックと重ねるようにする。

以下は、2）の方法での例です。
枠線の太さ分(=1px)上げればよいので、
.tab-content-wrap {
margin-top: -1px;
}
を追加してみるのではいかがでしょうか？

※ 全体のCSSの構成を変えると、コンテンツが手前側に表示される場合がありますので、その際は z-index で制御してください。
※ ご提示のCSSでは、変数 --color-b が定義されていないようですが、直接には関係が無いので無視しました。