選択時にタブに下線を引いたCSSタブデザイン
選択時に「color」と「border-bottom」の色を変更しています。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="out-style">.pic-container {
position: relative;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
padding: 0 4rem;
box-sizing: border-box;
background-color: #fefefe;
}
.tab {
display: flex;
flex-wrap: wrap;
background-color: #efefef;
padding-bottom: 1rem;
overflow: hidden;
}
.tab-item {
display: none;
}
.tab-item+label {
flex: 1;
order: -1;
cursor: pointer;
padding: 1rem .5em;
margin-bottom: 1rem;
border-bottom: 3px solid #ddd;
color: #999;
white-space: nowrap;
text-align: center;
}
.tab-content {
width: 100%;
padding: 0 1rem;
display: none;
overflow: hidden;
color: #555;
line-height: 1.5;
}
.tab-item:checked+label {
border-bottom: 3px solid #379beb;
color: #379beb;
transition: .5s ease-in-out;
}
.tab-item:checked+label+.tab-content {
display: block;
padding: 0 1rem;
color: #333;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<div class="tab">
<input type="radio" name="radioTab" class="tab-item" checked="" id="tab1">
<label for="tab1">タブ1</label>
<div class="tab-content">コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１</div>
<input type="radio" name="radioTab" class="tab-item" id="tab2">
<label for="tab2">タブ2</label>
<div class="tab-content">コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２</div>
<input type="radio" name="radioTab" class="tab-item" id="tab3">
<label for="tab3">タブ3</label>
<div class="tab-content">コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３</div>
</div>
</div>
</body></html>
シンプルなCSSタブデザイン
「opacity」を調整することでフェードインさせてます
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
position: relative;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
padding: 0 6rem;
box-sizing: border-box;
background-color: #fefefe;
}
.tab {
position: relative;
display: flex;
flex-wrap: wrap;
padding-bottom: 1rem;
}
.tab-item {
display: none;
}
.tab-item+label {
flex: 1;
order: -1;
cursor: pointer;
padding: 1rem .5em;
border-radius: 6px 6px 0 0;
margin-bottom: 1rem;
border-bottom: 1px solid #999;
color: #ccc;
white-space: nowrap;
text-align: center;
}
.tab-content {
width: 100%;
height: 0;
opacity: 0;
overflow: hidden;
color: #555;
line-height: 1.5;
}
.tab-item:checked+label {
border: 1px solid #999;
border-bottom: none;
color: #333;
transition: color .5s ease-in-out;
}
.tab-item:checked+label+.tab-content {
height: auto;
opacity: 1;
color: #333;
transition: opacity .5s ease-in-out;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><div class="pic-container">
<div class="tab">
<input type="radio" name="radioTab" class="tab-item" checked="" id="tab1">
<label for="tab1">タブ1</label>
<div class="tab-content">コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１</div>
<input type="radio" name="radioTab" class="tab-item" id="tab2">
<label for="tab2">タブ2</label>
<div class="tab-content">コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２</div>
<input type="radio" name="radioTab" class="tab-item" id="tab3">
<label for="tab3">タブ3</label>
<div class="tab-content">コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３</div>
</div>
</div>
</body></html>
選択時にコンテンツが左からスライドインするCSSタブデザイン
「translateX」を調整することでスライドインさせてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="out-style">.pic-container {
position: relative;
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
padding: 0 6rem;
box-sizing: border-box;
background-color: #fefefe;
}
.tab {
position: relative;
display: flex;
flex-wrap: wrap;
background-color: #efefef;
padding-bottom: 1rem;
overflow: hidden;
}
.tab-item {
display: none;
}
.tab-item+label {
flex: 1;
order: -1;
cursor: pointer;
padding: 1rem .5em;
margin-bottom: 1rem;
border-bottom: 3px solid #ddd;
color: #999;
white-space: nowrap;
text-align: center;
}
.tab-content {
width: 100%;
height: 0;
padding: 0 1rem;
opacity: 0;
color: #333;
line-height: 1.5;
transform: translateX(90%);
}
.tab-item:checked+label {
border-bottom: 3px solid #ea5658;
color: #ea5658;
transition: .5s ease-in-out;
}
.tab-item:checked+label+.tab-content {
height: auto;
opacity: 1;
transform: translateX(0);
transition: transform .5s ease-in-out;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 600px; height: 337.5px; transform-origin: left top; transform: scale(1); margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<div class="tab">
<input type="radio" name="radioTab" class="tab-item" checked="" id="tab1">
<label for="tab1">タブ1</label>
<div class="tab-content">コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１コンテンツ１</div>
<input type="radio" name="radioTab" class="tab-item" id="tab2">
<label for="tab2">タブ2</label>
<div class="tab-content">コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２コンテンツ２</div>
<input type="radio" name="radioTab" class="tab-item" id="tab3">
<label for="tab3">タブ3</label>
<div class="tab-content">コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３コンテンツ３</div>
</div>
</div>
</body></html>