目次
コピペでできるタブのデザインサンプル一覧
シンプル
タブ1の内容
タブ2の内容
タブ3の内容
<div class="t8-tab-1">
<label><input type="radio" name="t8-tab-1" checked>タブ1</label>
<div>タブ1の内容</div>
<label>
<input type="radio" name="t8-tab-1">タブ2</label>
<div>タブ2の内容</div>
<label>
<input type="radio" name="t8-tab-1">タブ3</label>
<div>タブ3の内容</div>
</div>.t8-tab-1 input {
display: none;
}
.t8-tab-1 {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
max-width: 500px;
}
.t8-tab-1 > label {
flex: 1 1;
order: -1;
min-width: 70px;
padding: .5em 1em;
border-radius: 5px 5px 0 0;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.t8-tab-1 > label:hover {
opacity: 1;
}
.t8-tab-1 > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
border: 1px solid #808080 !important;
}
.t8-tab-1 label:has(:checked) {
background-color: #0d6efd;
}
.t8-tab-1 label:has(:checked) + div {
display: block;
}
連結
タブ1の内容
タブ2の内容
タブ3の内容
<div class="t8-tab-1a">
<label><input type="radio" name="t8-tab-1a" checked>タブ1</label>
<div>タブ1の内容</div>
<label>
<input type="radio" name="t8-tab-1a">タブ2</label>
<div>タブ2の内容</div>
<label>
<input type="radio" name="t8-tab-1a">タブ3</label>
<div>タブ3の内容</div>
</div>.t8-tab-1a input {
display: none;
}
.t8-tab-1a {
display: flex;
flex-wrap: wrap;
max-width: 500px;
}
.t8-tab-1a > label {
flex: 1 1;
order: -1;
min-width: 70px;
padding: .5em 1em;
border: 1px solid #808080;
border-radius: 5px 5px 0 0;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.t8-tab-1a > label:hover {
opacity: 1;
}
.t8-tab-1a > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
border: 1px solid #808080 !important;
}
.t8-tab-1a label:has(:checked) {
background-color: #0d6efd;
}
.t8-tab-1a label:has(:checked) + div {
display: block;
}
角型
タブ1の内容
タブ2の内容
タブ3の内容
<div class="t8-tab-2">
<label><input type="radio" name="t8-tab-2" checked>タブ1</label>
<div>タブ1の内容</div>
<label>
<input type="radio" name="t8-tab-2">タブ2</label>
<div>タブ2の内容</div>
<label>
<input type="radio" name="t8-tab-2">タブ3</label>
<div>タブ3の内容</div>
</div>.t8-tab-2 input {
display: none;
}
.t8-tab-2 {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
max-width: 500px;
}
.t8-tab-2 > label {
flex: 1 1;
order: -1;
opacity: .5;
min-width: 70px;
padding: .5em 1em;
background-color: #0d6efd;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.t8-tab-2 > label:hover {
opacity: 1;
}
.t8-tab-2 > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
border: 1px solid #808080 !important;
}
.t8-tab-2 label:has(:checked) {
opacity: 1;
}
.t8-tab-2 label:has(:checked) + div {
display: block;
}
角丸
タブ1の内容
タブ2の内容
タブ3の内容
<div class="t8-tab-3">
<label><input type="radio" name="t8-tab-3" checked>タブ1</label>
<div>タブ1の内容</div>
<label>
<input type="radio" name="t8-tab-3">タブ2</label>
<div>タブ2の内容</div>
<label>
<input type="radio" name="t8-tab-3">タブ3</label>
<div>タブ3の内容</div>
</div>
.t8-tab-3 input {
display: none;
}
.t8-tab-3 {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
max-width: 500px;
}
.t8-tab-3 > label {
flex: 1 1;
order: -1;
opacity: .5;
min-width: 70px;
padding: .5em 1em;
border-radius: 5px 5px 0 0;
background-color: #0d6efd;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.t8-tab-3 > label:hover {
opacity: 1;
}
.t8-tab-3 > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
border: 1px solid #808080 !important;
}
.t8-tab-3 label:has(:checked) {
opacity: 1;
}
.t8-tab-3 label:has(:checked) + div {
display: block;
}
円形(ラベル)
タブ1の内容
タブ2の内容
タブ3の内容
<div class="t8-tab-4">
<label><input type="radio" name="t8-tab-4" checked>タブ1</label>
<div>タブ1の内容</div>
<label>
<input type="radio" name="t8-tab-4">タブ2</label>
<div>タブ2の内容</div>
<label>
<input type="radio" name="t8-tab-4">タブ3</label>
<div>タブ3の内容</div>
</div>.t8-tab-4 input {
display: none;
}
.t8-tab-4 {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
max-width: 500px;
}
.t8-tab-4 > label {
flex: 1 1;
order: -1;
opacity: .5;
min-width: 70px;
padding: .5em 1em;
border-radius: 15px 15px 0 0;
background-color: #0d6efd;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.t8-tab-4 > label:hover {
opacity: 1;
}
.t8-tab-4 > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
border: 1px solid #808080 !important;
}
.t8-tab-4 label:has(:checked) {
opacity: 1;
}
.t8-tab-4 label:has(:checked) + div {
display: block;
}
台形
タブ1の内容
タブ2の内容
タブ3の内容
<div class="t8-tab-5">
<label><input type="radio" name="t8-tab-5" checked>タブ1</label>
<div>タブ1の内容</div>
<label>
<input type="radio" name="t8-tab-5">タブ2</label>
<div>タブ2の内容</div>
<label>
<input type="radio" name="t8-tab-5">タブ3</label>
<div>タブ3の内容</div>
</div>.t8-tab-5 input {
display: none;
}
.t8-tab-5 {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
max-width: 500px;
}
.t8-tab-5 > label {
flex: 1 1;
order: -1;
opacity: .5;
min-width: 70px;
padding: .5em 1em;
clip-path: polygon(0% 100%, 17.5% 0%, 82.5% 0%, 100% 100%);
background-color: #0d6efd;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.t8-tab-5 > label:hover {
opacity: 1;
}
.t8-tab-5 > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
border: 1px solid #808080 !important;
}
.t8-tab-5 label:has(:checked) {
opacity: 1;
}
.t8-tab-5 label:has(:checked) + div {
display: block;
}フォルダ
タブ1の内容
タブ2の内容
タブ3の内容
<div class="t8-tab-6">
<label><input type="radio" name="t8-tab-6" checked>タブ1</label>
<div>タブ1の内容</div>
<label>
<input type="radio" name="t8-tab-6">タブ2</label>
<div>タブ2の内容</div>
<label>
<input type="radio" name="t8-tab-6">タブ3</label>
<div>タブ3の内容</div>
</div>.t8-tab-6 input {
display: none;
}
.t8-tab-6 {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
max-width: 500px;
}
.t8-tab-6 > label {
flex: 1 1;
order: -1;
opacity: .5;
min-width: 70px;
padding: .5em 1em;
clip-path: polygon(0% 100%, 0% 0%, 82.5% 0%, 100% 100%);
border-radius: 15px 15px 0 0;
background-color: #0d6efd;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.t8-tab-6 > label:hover {
opacity: 1;
}
.t8-tab-6 > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
border: 1px solid #808080 !important;
}
.t8-tab-6 label:has(:checked) {
opacity: 1;
}
.t8-tab-6 label:has(:checked) + div {
display: block;
}
ボタン式
タブ1の内容
タブ2の内容
タブ3の内容
<div class="t8-tab-7">
<label><input type="radio" name="t8-tab-7" checked>タブ1</label>
<div>タブ1の内容</div>
<label>
<input type="radio" name="t8-tab-7">タブ2</label>
<div>タブ2の内容</div>
<label>
<input type="radio" name="t8-tab-7">タブ3</label>
<div>タブ3の内容</div>
</div>.t8-tab-7 input {
display: none;
}
.t8-tab-7 {
display: flex;
flex-wrap: wrap;
gap: 10px 10px;
max-width: 500px;
}
.t8-tab-7 > label {
flex: 1 1;
order: -1;
opacity: .5;
min-width: 70px;
padding: .5em 1em;
border-radius: 50%;
background-color: #0d6efd;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.t8-tab-7 > label:hover {
opacity: 1;
}
.t8-tab-7 > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
border: 1px solid #808080 !important;
}
.t8-tab-7 label:has(:checked) {
opacity: 1;
}
.t8-tab-7 label:has(:checked) + div {
display: block;
}トップバー
タブ1の内容
タブ2の内容
タブ3の内容
<div class="t8-tab-8">
<label><input type="radio" name="t8-tab-8" checked>タブ1</label>
<div>タブ1の内容</div>
<label>
<input type="radio" name="t8-tab-8">タブ2</label>
<div>タブ2の内容</div>
<label>
<input type="radio" name="t8-tab-8">タブ3</label>
<div>タブ3の内容</div>
</div>
.t8-tab-8 input {
display: none;
}
.t8-tab-8 {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
max-width: 500px;
}
.t8-tab-8 > label {
flex: 1 1;
order: -1;
opacity: .5;
min-width: 70px;
padding: .5em 1em;
border-top:5px solid #0d6efd;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.t8-tab-8 > label:hover {
opacity: 1;
}
.t8-tab-8 > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
border: 1px solid #808080 !important;
}
.t8-tab-8 label:has(:checked) {
opacity: 1;
}
.t8-tab-8 label:has(:checked) + div {
display: block;
}
サイドバー
タブ1の内容
タブ2の内容
タブ3の内容
<div class="t8-tab-9">
<label><input type="radio" name="t8-tab-9" checked>タブ1</label>
<div>タブ1の内容</div>
<label>
<input type="radio" name="t8-tab-9">タブ2</label>
<div>タブ2の内容</div>
<label>
<input type="radio" name="t8-tab-9">タブ3</label>
<div>タブ3の内容</div>
</div>
.t8-tab-9 input {
display: none;
}
.t8-tab-9 {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
max-width: 500px;
}
.t8-tab-9 > label {
flex: 1 1;
order: -1;
opacity: .5;
min-width: 70px;
padding: .5em 1em;
border-left:5px solid #0d6efd;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.t8-tab-9 > label:hover {
opacity: 1;
}
.t8-tab-9 > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
border: 1px solid #808080 !important;
}
.t8-tab-9 label:has(:checked) {
opacity: 1;
}
.t8-tab-9 label:has(:checked) + div {
display: block;
}アンダーバー
タブ1の内容
タブ2の内容
タブ3の内容
<div class="t8-tab-10">
<label><input type="radio" name="t8-tab-10" checked>タブ1</label>
<div>タブ1の内容</div>
<label>
<input type="radio" name="t8-tab-10">タブ2</label>
<div>タブ2の内容</div>
<label>
<input type="radio" name="t8-tab-10">タブ3</label>
<div>タブ3の内容</div>
</div>.t8-tab-10 input {
display: none;
}
.t8-tab-10 {
display: flex;
flex-wrap: wrap;
gap: 0 10px;
max-width: 500px;
}
.t8-tab-10 > label {
flex: 1 1;
order: -1;
opacity: .5;
min-width: 70px;
padding: .5em 1em;
border-bottom:5px solid #0d6efd;
color: #fff;
font-size: 1em;
text-align: center;
cursor: pointer;
}
.t8-tab-10 > label:hover {
opacity: 1;
}
.t8-tab-10 > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
border: 1px solid #808080 !important;
}
.t8-tab-10 label:has(:checked) {
opacity: 1;
}
.t8-tab-10 label:has(:checked) + div {
display: block;
}
