サービス紹介や料金表など、1ページにたくさんの情報を載せたいのに、縦に並べるとどんどん長くなってしまう。そんな時に便利なのがタブ切り替えです。
この記事では、コピペするだけで使えるタブ切り替えを20個まとめました。
シンプルな下線タイプから、スマホアプリ風のセグメント、縦型、月額・年額の料金切り替えまで、場面ごとに使い分けられる種類を用意しています。
どれもHTMLとCSSだけで動くので、JavaScriptは必要ありません。
これまでの記事と同じく、HTMLとCSSを分けて掲載しています。
タブって、クリックすると中身が変わるやつだよね？プログラムなしでできるの？
できるんだ。見えないラジオボタン（選択ボタン）を使って、選ばれたタブの中身だけを表示する仕組みなんだよ。使い方を先に説明するね。
使い方｜HTMLとCSSをそれぞれ貼り付ける
CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、タブを表示したい場所に貼り付けます。
タブの名前はlabelタグの中、切り替わる内容はclass名が「〇〇-panel」のdivタグの中に書き込みます。
同じページに同じタブを2つ置く場合は、inputタグのname・id、labelタグのforを、もう片方と違う名前に変えてください。
01. 下線で示すシンプルなタブ
選ばれているタブに下線が付く、もっとも定番のタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab01">
<input type="radio" name="kts-tab01" id="kts-tab01-1" checked><label for="kts-tab01-1">概要</label>
<input type="radio" name="kts-tab01" id="kts-tab01-2"><label for="kts-tab01-2">料金</label>
<input type="radio" name="kts-tab01" id="kts-tab01-3"><label for="kts-tab01-3">よくある質問</label>
<div class="kts-tab01-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab01-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab01-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab01 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab01 input { display: none; }
.kts-tab01-panel { display: none; order: 1; width: 100%; }
.kts-tab01 input:nth-of-type(1):checked ~ .kts-tab01-panel:nth-of-type(1),
.kts-tab01 input:nth-of-type(2):checked ~ .kts-tab01-panel:nth-of-type(2),
.kts-tab01 input:nth-of-type(3):checked ~ .kts-tab01-panel:nth-of-type(3) { display: block; }
.kts-tab01 label { padding: 10px 18px; color: #6B7280; font-weight: 700; cursor: pointer; border-bottom: 3px solid transparent; }
.kts-tab01 input:checked + label { color: #2563EB; border-bottom-color: #2563EB; }
.kts-tab01-panel { padding: 16px 4px; border-top: 1px solid #E5E7EB; margin-top: -1px; color: #374151; }02. 枠線で囲んだボックス型
選ばれたタブと内容がひと続きの枠でつながる、書類のインデックスのようなタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab02">
<input type="radio" name="kts-tab02" id="kts-tab02-1" checked><label for="kts-tab02-1">概要</label>
<input type="radio" name="kts-tab02" id="kts-tab02-2"><label for="kts-tab02-2">料金</label>
<input type="radio" name="kts-tab02" id="kts-tab02-3"><label for="kts-tab02-3">よくある質問</label>
<div class="kts-tab02-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab02-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab02-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab02 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab02 input { display: none; }
.kts-tab02-panel { display: none; order: 1; width: 100%; }
.kts-tab02 input:nth-of-type(1):checked ~ .kts-tab02-panel:nth-of-type(1),
.kts-tab02 input:nth-of-type(2):checked ~ .kts-tab02-panel:nth-of-type(2),
.kts-tab02 input:nth-of-type(3):checked ~ .kts-tab02-panel:nth-of-type(3) { display: block; }
.kts-tab02 label { padding: 10px 18px; margin-right: 4px; border: 1px solid #D1D5DB; border-bottom: 0; border-radius: 6px 6px 0 0; background: #F3F4F6; color: #6B7280; cursor: pointer; position: relative; z-index: 1; }
.kts-tab02 input:checked + label { background: #fff; color: #111827; font-weight: 700; margin-bottom: -1px; padding-bottom: 11px; }
.kts-tab02-panel { padding: 16px; border: 1px solid #D1D5DB; border-radius: 0 6px 6px 6px; color: #374151; }03. 丸いピル型
タブを丸いボタンの形にした、やわらかい印象のタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab03">
<input type="radio" name="kts-tab03" id="kts-tab03-1" checked><label for="kts-tab03-1">概要</label>
<input type="radio" name="kts-tab03" id="kts-tab03-2"><label for="kts-tab03-2">料金</label>
<input type="radio" name="kts-tab03" id="kts-tab03-3"><label for="kts-tab03-3">よくある質問</label>
<div class="kts-tab03-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab03-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab03-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab03 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab03 input { display: none; }
.kts-tab03-panel { display: none; order: 1; width: 100%; }
.kts-tab03 input:nth-of-type(1):checked ~ .kts-tab03-panel:nth-of-type(1),
.kts-tab03 input:nth-of-type(2):checked ~ .kts-tab03-panel:nth-of-type(2),
.kts-tab03 input:nth-of-type(3):checked ~ .kts-tab03-panel:nth-of-type(3) { display: block; }
.kts-tab03 label { padding: 8px 20px; margin: 0 8px 12px 0; border-radius: 999px; background: #F3F4F6; color: #4B5563; cursor: pointer; font-size: 14px; }
.kts-tab03 input:checked + label { background: #EC4899; color: #fff; font-weight: 700; }
.kts-tab03-panel { padding: 4px; color: #374151; }04. スマホアプリ風のセグメント
スマホの設定画面のように、グレーの台の上でタブを切り替えるタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab04">
<input type="radio" name="kts-tab04" id="kts-tab04-1" checked><label for="kts-tab04-1">概要</label>
<input type="radio" name="kts-tab04" id="kts-tab04-2"><label for="kts-tab04-2">料金</label>
<input type="radio" name="kts-tab04" id="kts-tab04-3"><label for="kts-tab04-3">よくある質問</label>
<div class="kts-tab04-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab04-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab04-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab04 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab04 input { display: none; }
.kts-tab04-panel { display: none; order: 1; width: 100%; }
.kts-tab04 input:nth-of-type(1):checked ~ .kts-tab04-panel:nth-of-type(1),
.kts-tab04 input:nth-of-type(2):checked ~ .kts-tab04-panel:nth-of-type(2),
.kts-tab04 input:nth-of-type(3):checked ~ .kts-tab04-panel:nth-of-type(3) { display: block; }
.kts-tab04 { background: #F3F4F6; padding: 4px; border-radius: 10px; }
.kts-tab04 label { flex: 1; padding: 8px 0; text-align: center; border-radius: 8px; color: #6B7280; cursor: pointer; font-size: 14px; }
.kts-tab04 input:checked + label { background: #fff; color: #111827; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.kts-tab04-panel { margin-top: 4px; padding: 14px 10px; background: #fff; border-radius: 8px; color: #374151; }05. 背景色で塗るタイプ
選ばれたタブと内容を同じ色で塗りつぶす、はっきり見せたい時のタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab05">
<input type="radio" name="kts-tab05" id="kts-tab05-1" checked><label for="kts-tab05-1">概要</label>
<input type="radio" name="kts-tab05" id="kts-tab05-2"><label for="kts-tab05-2">料金</label>
<input type="radio" name="kts-tab05" id="kts-tab05-3"><label for="kts-tab05-3">よくある質問</label>
<div class="kts-tab05-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab05-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab05-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab05 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab05 input { display: none; }
.kts-tab05-panel { display: none; order: 1; width: 100%; }
.kts-tab05 input:nth-of-type(1):checked ~ .kts-tab05-panel:nth-of-type(1),
.kts-tab05 input:nth-of-type(2):checked ~ .kts-tab05-panel:nth-of-type(2),
.kts-tab05 input:nth-of-type(3):checked ~ .kts-tab05-panel:nth-of-type(3) { display: block; }
.kts-tab05 label { padding: 10px 18px; background: #E0F2FE; color: #0369A1; cursor: pointer; }
.kts-tab05 input:checked + label { background: #0284C7; color: #fff; font-weight: 700; }
.kts-tab05-panel { padding: 16px; background: #0284C7; color: #fff; }06. 上線がアクセントのタイプ
選ばれたタブの上に色の線が入る、上品な印象のタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab06">
<input type="radio" name="kts-tab06" id="kts-tab06-1" checked><label for="kts-tab06-1">概要</label>
<input type="radio" name="kts-tab06" id="kts-tab06-2"><label for="kts-tab06-2">料金</label>
<input type="radio" name="kts-tab06" id="kts-tab06-3"><label for="kts-tab06-3">よくある質問</label>
<div class="kts-tab06-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab06-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab06-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab06 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab06 input { display: none; }
.kts-tab06-panel { display: none; order: 1; width: 100%; }
.kts-tab06 input:nth-of-type(1):checked ~ .kts-tab06-panel:nth-of-type(1),
.kts-tab06 input:nth-of-type(2):checked ~ .kts-tab06-panel:nth-of-type(2),
.kts-tab06 input:nth-of-type(3):checked ~ .kts-tab06-panel:nth-of-type(3) { display: block; }
.kts-tab06 label { padding: 12px 18px; background: #F9FAFB; border-top: 3px solid transparent; color: #6B7280; cursor: pointer; }
.kts-tab06 input:checked + label { background: #fff; border-top-color: #F59E0B; color: #111827; font-weight: 700; }
.kts-tab06-panel { padding: 16px; background: #fff; border: 1px solid #F3F4F6; color: #374151; }07. フォルダのつまみ風
タブの上側を丸くして、紙のフォルダのつまみのように見せるタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab07">
<input type="radio" name="kts-tab07" id="kts-tab07-1" checked><label for="kts-tab07-1">概要</label>
<input type="radio" name="kts-tab07" id="kts-tab07-2"><label for="kts-tab07-2">料金</label>
<input type="radio" name="kts-tab07" id="kts-tab07-3"><label for="kts-tab07-3">よくある質問</label>
<div class="kts-tab07-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab07-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab07-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab07 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab07 input { display: none; }
.kts-tab07-panel { display: none; order: 1; width: 100%; }
.kts-tab07 input:nth-of-type(1):checked ~ .kts-tab07-panel:nth-of-type(1),
.kts-tab07 input:nth-of-type(2):checked ~ .kts-tab07-panel:nth-of-type(2),
.kts-tab07 input:nth-of-type(3):checked ~ .kts-tab07-panel:nth-of-type(3) { display: block; }
.kts-tab07 label { padding: 10px 22px; margin-right: 2px; border-radius: 14px 14px 0 0; background: #FDE68A; color: #92400E; cursor: pointer; }
.kts-tab07 input:checked + label { background: #F59E0B; color: #fff; font-weight: 700; }
.kts-tab07-panel { padding: 16px; background: #FFFBEB; border-top: 4px solid #F59E0B; color: #78350F; }08. 絵文字アイコン付き
タブ名の前に絵文字を入れて、内容をひと目で伝えるタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab08">
<input type="radio" name="kts-tab08" id="kts-tab08-1" checked><label for="kts-tab08-1">🏠 ホーム</label>
<input type="radio" name="kts-tab08" id="kts-tab08-2"><label for="kts-tab08-2">💰 料金</label>
<input type="radio" name="kts-tab08" id="kts-tab08-3"><label for="kts-tab08-3">❓ 質問</label>
<div class="kts-tab08-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab08-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab08-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab08 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab08 input { display: none; }
.kts-tab08-panel { display: none; order: 1; width: 100%; }
.kts-tab08 input:nth-of-type(1):checked ~ .kts-tab08-panel:nth-of-type(1),
.kts-tab08 input:nth-of-type(2):checked ~ .kts-tab08-panel:nth-of-type(2),
.kts-tab08 input:nth-of-type(3):checked ~ .kts-tab08-panel:nth-of-type(3) { display: block; }
.kts-tab08 label { padding: 10px 16px; color: #6B7280; cursor: pointer; border-bottom: 2px solid #E5E7EB; }
.kts-tab08 input:checked + label { color: #059669; font-weight: 700; border-bottom-color: #059669; }
.kts-tab08-panel { padding: 16px 4px; color: #374151; }09. 左に並ぶ縦型タブ
タブを左側に縦に並べる、項目が多い時や設定画面のようなタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab09">
<input type="radio" name="kts-tab09" id="kts-tab09-1" checked><label for="kts-tab09-1">概要</label>
<input type="radio" name="kts-tab09" id="kts-tab09-2"><label for="kts-tab09-2">料金</label>
<input type="radio" name="kts-tab09" id="kts-tab09-3"><label for="kts-tab09-3">よくある質問</label>
<div class="kts-tab09-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab09-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab09-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab09 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab09 input { display: none; }
.kts-tab09-panel { display: none; order: 1; width: 100%; }
.kts-tab09 input:nth-of-type(1):checked ~ .kts-tab09-panel:nth-of-type(1),
.kts-tab09 input:nth-of-type(2):checked ~ .kts-tab09-panel:nth-of-type(2),
.kts-tab09 input:nth-of-type(3):checked ~ .kts-tab09-panel:nth-of-type(3) { display: block; }
.kts-tab09 { display: grid; grid-template-columns: 120px 1fr; }
.kts-tab09 label { grid-column: 1; padding: 12px 14px; border-left: 3px solid #E5E7EB; color: #6B7280; cursor: pointer; }
.kts-tab09 input:checked + label { border-left-color: #7C3AED; background: #F5F3FF; color: #5B21B6; font-weight: 700; }
.kts-tab09-panel { grid-column: 2; grid-row: 1 / span 3; padding: 12px 18px; color: #374151; }10. 均等幅に広がるタブ
タブが横幅いっぱいに均等に並ぶ、スマホでも押しやすいタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab10">
<input type="radio" name="kts-tab10" id="kts-tab10-1" checked><label for="kts-tab10-1">概要</label>
<input type="radio" name="kts-tab10" id="kts-tab10-2"><label for="kts-tab10-2">料金</label>
<input type="radio" name="kts-tab10" id="kts-tab10-3"><label for="kts-tab10-3">よくある質問</label>
<div class="kts-tab10-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab10-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab10-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab10 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab10 input { display: none; }
.kts-tab10-panel { display: none; order: 1; width: 100%; }
.kts-tab10 input:nth-of-type(1):checked ~ .kts-tab10-panel:nth-of-type(1),
.kts-tab10 input:nth-of-type(2):checked ~ .kts-tab10-panel:nth-of-type(2),
.kts-tab10 input:nth-of-type(3):checked ~ .kts-tab10-panel:nth-of-type(3) { display: block; }
.kts-tab10 label { flex: 1; padding: 12px 0; text-align: center; background: #F9FAFB; border-bottom: 2px solid #E5E7EB; color: #6B7280; cursor: pointer; }
.kts-tab10 input:checked + label { background: #fff; border-bottom-color: #DC2626; color: #DC2626; font-weight: 700; }
.kts-tab10-panel { padding: 16px; color: #374151; }11. グラデーションのタブ
選ばれたタブにグラデーションをかけた、華やかなタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab11">
<input type="radio" name="kts-tab11" id="kts-tab11-1" checked><label for="kts-tab11-1">概要</label>
<input type="radio" name="kts-tab11" id="kts-tab11-2"><label for="kts-tab11-2">料金</label>
<input type="radio" name="kts-tab11" id="kts-tab11-3"><label for="kts-tab11-3">よくある質問</label>
<div class="kts-tab11-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab11-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab11-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab11 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab11 input { display: none; }
.kts-tab11-panel { display: none; order: 1; width: 100%; }
.kts-tab11 input:nth-of-type(1):checked ~ .kts-tab11-panel:nth-of-type(1),
.kts-tab11 input:nth-of-type(2):checked ~ .kts-tab11-panel:nth-of-type(2),
.kts-tab11 input:nth-of-type(3):checked ~ .kts-tab11-panel:nth-of-type(3) { display: block; }
.kts-tab11 label { padding: 10px 18px; margin-right: 6px; border-radius: 8px; background: #F3F4F6; color: #6B7280; cursor: pointer; }
.kts-tab11 input:checked + label { background: linear-gradient(135deg, #6366F1, #EC4899); color: #fff; font-weight: 700; }
.kts-tab11-panel { margin-top: 10px; padding: 16px; border-radius: 8px; background: #FAF5FF; color: #374151; }12. ダークカラーのタブ
黒系の背景で、引き締まった印象にしたい時のタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab12">
<input type="radio" name="kts-tab12" id="kts-tab12-1" checked><label for="kts-tab12-1">概要</label>
<input type="radio" name="kts-tab12" id="kts-tab12-2"><label for="kts-tab12-2">料金</label>
<input type="radio" name="kts-tab12" id="kts-tab12-3"><label for="kts-tab12-3">よくある質問</label>
<div class="kts-tab12-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab12-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab12-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab12 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab12 input { display: none; }
.kts-tab12-panel { display: none; order: 1; width: 100%; }
.kts-tab12 input:nth-of-type(1):checked ~ .kts-tab12-panel:nth-of-type(1),
.kts-tab12 input:nth-of-type(2):checked ~ .kts-tab12-panel:nth-of-type(2),
.kts-tab12 input:nth-of-type(3):checked ~ .kts-tab12-panel:nth-of-type(3) { display: block; }
.kts-tab12 { background: #111827; border-radius: 10px; padding: 8px; }
.kts-tab12 label { padding: 10px 16px; color: #9CA3AF; cursor: pointer; border-radius: 6px; }
.kts-tab12 input:checked + label { background: #374151; color: #F9FAFB; font-weight: 700; }
.kts-tab12-panel { padding: 14px 8px 8px; color: #E5E7EB; }13. 影付きのカード型
内容部分をカードのように浮かせて見せるタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab13">
<input type="radio" name="kts-tab13" id="kts-tab13-1" checked><label for="kts-tab13-1">概要</label>
<input type="radio" name="kts-tab13" id="kts-tab13-2"><label for="kts-tab13-2">料金</label>
<input type="radio" name="kts-tab13" id="kts-tab13-3"><label for="kts-tab13-3">よくある質問</label>
<div class="kts-tab13-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab13-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab13-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab13 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab13 input { display: none; }
.kts-tab13-panel { display: none; order: 1; width: 100%; }
.kts-tab13 input:nth-of-type(1):checked ~ .kts-tab13-panel:nth-of-type(1),
.kts-tab13 input:nth-of-type(2):checked ~ .kts-tab13-panel:nth-of-type(2),
.kts-tab13 input:nth-of-type(3):checked ~ .kts-tab13-panel:nth-of-type(3) { display: block; }
.kts-tab13 label { padding: 10px 18px; color: #6B7280; cursor: pointer; }
.kts-tab13 input:checked + label { color: #0F766E; font-weight: 700; }
.kts-tab13-panel { padding: 18px; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.08); color: #374151; }14. 小さめの控えめなタブ
文字を小さくまとめた、ページの一部でさりげなく使えるタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab14">
<input type="radio" name="kts-tab14" id="kts-tab14-1" checked><label for="kts-tab14-1">概要</label>
<input type="radio" name="kts-tab14" id="kts-tab14-2"><label for="kts-tab14-2">料金</label>
<input type="radio" name="kts-tab14" id="kts-tab14-3"><label for="kts-tab14-3">よくある質問</label>
<div class="kts-tab14-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab14-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab14-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab14 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab14 input { display: none; }
.kts-tab14-panel { display: none; order: 1; width: 100%; }
.kts-tab14 input:nth-of-type(1):checked ~ .kts-tab14-panel:nth-of-type(1),
.kts-tab14 input:nth-of-type(2):checked ~ .kts-tab14-panel:nth-of-type(2),
.kts-tab14 input:nth-of-type(3):checked ~ .kts-tab14-panel:nth-of-type(3) { display: block; }
.kts-tab14 label { padding: 4px 12px; margin-right: 6px; border: 1px solid #D1D5DB; border-radius: 4px; font-size: 12px; color: #6B7280; cursor: pointer; }
.kts-tab14 input:checked + label { border-color: #111827; background: #111827; color: #fff; }
.kts-tab14-panel { margin-top: 10px; font-size: 14px; color: #374151; }15. STEP番号のタブ
「STEP 1・2・3」のように、手順を順番に見せたい時のタイプです。
実際の見た目
フォームから申し込みます。
確認メールが届きます。
当日、会場にお越しください。
HTMLコード
<div class="kts-tab15">
<input type="radio" name="kts-tab15" id="kts-tab15-1" checked><label for="kts-tab15-1">STEP 1</label>
<input type="radio" name="kts-tab15" id="kts-tab15-2"><label for="kts-tab15-2">STEP 2</label>
<input type="radio" name="kts-tab15" id="kts-tab15-3"><label for="kts-tab15-3">STEP 3</label>
<div class="kts-tab15-panel">フォームから申し込みます。</div>
<div class="kts-tab15-panel">確認メールが届きます。</div>
<div class="kts-tab15-panel">当日、会場にお越しください。</div>
</div>CSSコード
.kts-tab15 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab15 input { display: none; }
.kts-tab15-panel { display: none; order: 1; width: 100%; }
.kts-tab15 input:nth-of-type(1):checked ~ .kts-tab15-panel:nth-of-type(1),
.kts-tab15 input:nth-of-type(2):checked ~ .kts-tab15-panel:nth-of-type(2),
.kts-tab15 input:nth-of-type(3):checked ~ .kts-tab15-panel:nth-of-type(3) { display: block; }
.kts-tab15 label { flex: 1; padding: 10px 0; text-align: center; background: #ECFDF5; color: #047857; font-weight: 700; cursor: pointer; clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%); }
.kts-tab15 input:checked + label { background: #10B981; color: #fff; }
.kts-tab15-panel { padding: 16px 4px; color: #374151; }16. 料金の切り替えタブ
「月額・年額」のように、2つの料金を切り替えて見せるタイプです。
実際の見た目
1,000円 / 月
10,000円 / 年（2か月分お得）
HTMLコード
<div class="kts-tab16">
<input type="radio" name="kts-tab16" id="kts-tab16-1" checked><label for="kts-tab16-1">月額プラン</label>
<input type="radio" name="kts-tab16" id="kts-tab16-2"><label for="kts-tab16-2">年額プラン</label>
<div class="kts-tab16-panel"><strong>1,000円</strong> / 月</div>
<div class="kts-tab16-panel"><strong>10,000円</strong> / 年（2か月分お得）</div>
</div>CSSコード
.kts-tab16 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab16 input { display: none; }
.kts-tab16-panel { display: none; order: 1; width: 100%; }
.kts-tab16 input:nth-of-type(1):checked ~ .kts-tab16-panel:nth-of-type(1),
.kts-tab16 input:nth-of-type(2):checked ~ .kts-tab16-panel:nth-of-type(2) { display: block; }
.kts-tab16 { justify-content: center; text-align: center; }
.kts-tab16 label { padding: 8px 22px; border: 2px solid #2563EB; color: #2563EB; font-weight: 700; cursor: pointer; }
.kts-tab16 label:first-of-type { border-radius: 999px 0 0 999px; }
.kts-tab16 label:last-of-type { border-radius: 0 999px 999px 0; }
.kts-tab16 input:checked + label { background: #2563EB; color: #fff; }
.kts-tab16-panel { padding: 18px 0 4px; font-size: 18px; color: #111827; }17. タブごとに色が違うタイプ
タブごとに色を変えて、カテゴリーの違いを見せるタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab17">
<input type="radio" name="kts-tab17" id="kts-tab17-1" checked><label for="kts-tab17-1">概要</label>
<input type="radio" name="kts-tab17" id="kts-tab17-2"><label for="kts-tab17-2">料金</label>
<input type="radio" name="kts-tab17" id="kts-tab17-3"><label for="kts-tab17-3">よくある質問</label>
<div class="kts-tab17-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab17-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab17-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab17 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab17 input { display: none; }
.kts-tab17-panel { display: none; order: 1; width: 100%; }
.kts-tab17 input:nth-of-type(1):checked ~ .kts-tab17-panel:nth-of-type(1),
.kts-tab17 input:nth-of-type(2):checked ~ .kts-tab17-panel:nth-of-type(2),
.kts-tab17 input:nth-of-type(3):checked ~ .kts-tab17-panel:nth-of-type(3) { display: block; }
.kts-tab17 label { padding: 10px 18px; color: #fff; font-weight: 700; cursor: pointer; opacity: .45; }
.kts-tab17 label:nth-of-type(1) { background: #EF4444; }
.kts-tab17 label:nth-of-type(2) { background: #F59E0B; }
.kts-tab17 label:nth-of-type(3) { background: #3B82F6; }
.kts-tab17 input:checked + label { opacity: 1; }
.kts-tab17-panel { padding: 16px; border: 2px solid #E5E7EB; color: #374151; }18. 点線の区切りタイプ
点線で区切った、手作り感のあるやさしい印象のタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab18">
<input type="radio" name="kts-tab18" id="kts-tab18-1" checked><label for="kts-tab18-1">概要</label>
<input type="radio" name="kts-tab18" id="kts-tab18-2"><label for="kts-tab18-2">料金</label>
<input type="radio" name="kts-tab18" id="kts-tab18-3"><label for="kts-tab18-3">よくある質問</label>
<div class="kts-tab18-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab18-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab18-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab18 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab18 input { display: none; }
.kts-tab18-panel { display: none; order: 1; width: 100%; }
.kts-tab18 input:nth-of-type(1):checked ~ .kts-tab18-panel:nth-of-type(1),
.kts-tab18 input:nth-of-type(2):checked ~ .kts-tab18-panel:nth-of-type(2),
.kts-tab18 input:nth-of-type(3):checked ~ .kts-tab18-panel:nth-of-type(3) { display: block; }
.kts-tab18 label { padding: 10px 16px; color: #9A3412; cursor: pointer; border-bottom: 2px dashed #FED7AA; }
.kts-tab18 input:checked + label { border: 2px dashed #FB923C; border-bottom-color: #FFF7ED; background: #FFF7ED; border-radius: 10px 10px 0 0; font-weight: 700; margin-bottom: -2px; position: relative; }
.kts-tab18-panel { padding: 16px; border: 2px dashed #FB923C; border-radius: 0 10px 10px 10px; background: #FFF7ED; color: #7C2D12; }19. 吹き出しの三角付きタブ
選ばれたタブの下に三角が付き、内容を指し示すように見せるタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab19">
<input type="radio" name="kts-tab19" id="kts-tab19-1" checked><label for="kts-tab19-1">概要</label>
<input type="radio" name="kts-tab19" id="kts-tab19-2"><label for="kts-tab19-2">料金</label>
<input type="radio" name="kts-tab19" id="kts-tab19-3"><label for="kts-tab19-3">よくある質問</label>
<div class="kts-tab19-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab19-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab19-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab19 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab19 input { display: none; }
.kts-tab19-panel { display: none; order: 1; width: 100%; }
.kts-tab19 input:nth-of-type(1):checked ~ .kts-tab19-panel:nth-of-type(1),
.kts-tab19 input:nth-of-type(2):checked ~ .kts-tab19-panel:nth-of-type(2),
.kts-tab19 input:nth-of-type(3):checked ~ .kts-tab19-panel:nth-of-type(3) { display: block; }
.kts-tab19 label { position: relative; padding: 10px 18px; margin-right: 6px; border-radius: 6px; background: #F3F4F6; color: #4B5563; cursor: pointer; }
.kts-tab19 input:checked + label { background: #4F46E5; color: #fff; font-weight: 700; }
.kts-tab19 input:checked + label::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 8px solid transparent; border-bottom: 0; border-top-color: #4F46E5; }
.kts-tab19-panel { margin-top: 14px; padding: 16px; border-radius: 8px; background: #EEF2FF; color: #3730A3; }20. 中身がふわっと表示されるタイプ
タブを切り替えた時に、内容がふわっと浮かび上がるアニメーション付きのタイプです。
実際の見た目
はじめての方にもわかりやすい、少人数制の教室です。
月4回コース：8,000円（税込）
体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。
HTMLコード
<div class="kts-tab20">
<input type="radio" name="kts-tab20" id="kts-tab20-1" checked><label for="kts-tab20-1">概要</label>
<input type="radio" name="kts-tab20" id="kts-tab20-2"><label for="kts-tab20-2">料金</label>
<input type="radio" name="kts-tab20" id="kts-tab20-3"><label for="kts-tab20-3">よくある質問</label>
<div class="kts-tab20-panel">はじめての方にもわかりやすい、少人数制の教室です。</div>
<div class="kts-tab20-panel">月4回コース：8,000円（税込）</div>
<div class="kts-tab20-panel">体験レッスンは何回でも無料で受けられますか？ → 1回まで無料です。</div>
</div>CSSコード
.kts-tab20 { display: flex; flex-wrap: wrap; font-family: sans-serif; }
.kts-tab20 input { display: none; }
.kts-tab20-panel { display: none; order: 1; width: 100%; }
.kts-tab20 input:nth-of-type(1):checked ~ .kts-tab20-panel:nth-of-type(1),
.kts-tab20 input:nth-of-type(2):checked ~ .kts-tab20-panel:nth-of-type(2),
.kts-tab20 input:nth-of-type(3):checked ~ .kts-tab20-panel:nth-of-type(3) { display: block; }
.kts-tab20 label { padding: 10px 18px; color: #6B7280; cursor: pointer; border-bottom: 2px solid #E5E7EB; }
.kts-tab20 input:checked + label { color: #111827; font-weight: 700; border-bottom-color: #111827; }
.kts-tab20-panel { padding: 16px 4px; color: #374151; animation: kts-tab20-fade .4s ease; }
@keyframes kts-tab20-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }カスタマイズの小ワザ
- タブを4つに増やしたい時は、inputとlabelのセット、panelを1つずつ追加し、CSSの「nth-of-type(3)」の行をコピーして(4)を足してください。
- 最初に開いておくタブは、inputタグに付いている「checked」で決まります。
- 同じページに複数のタブを置く時は、name・id・forの名前が重ならないように変えてください。重なると、別のタブと連動してしまいます。
- 16番の料金切り替えは、2つのタブで動くように作っています。
- 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。
まとめ｜早見表
| 使いたい場面 | 該当するタブ |
|---|---|
| シンプルに使いたい | 01, 10, 14 |
| 書類・フォルダ風 | 02, 07 |
| やわらかい雰囲気 | 03, 18 |
| スマホアプリ風 | 04 |
| はっきり目立たせたい | 05, 11, 12, 17 |
| 上品に見せたい | 06, 13 |
| 項目が多い・設定画面 | 09 |
| 手順を見せたい | 15 |
| 料金を切り替えたい | 16 |
| 絵文字で伝えたい | 08 |
| 内容を指し示したい | 19 |
| 動きを付けたい | 20 |
料金表もサービス紹介も、これで1か所にまとめられるね！
そうなんだ。ただ、大事な情報をタブの奥に隠しすぎると、読まれないこともあるんだ。一番見てほしい内容は、最初に開くタブに入れておこうね。
20個のタブ切り替えは、見えないラジオボタンとCSSだけで動き、JavaScriptは不要である。同じページに複数置く時は、name・id・forの名前を重ならないように変える。
