コピペでできるタブのデザインサンプル一覧[HTML/CSS]

<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;
}

<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;
}

<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;
}

<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;
}

<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;
}

<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;
}

<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;
}

<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;
}

<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;
}

<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;
}

<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;
}