【html&css】コピペで作る！切り替え式のおしゃれなタブデザイン4選

2026年2月23日2026年2月24日

本記事では、カスタマイズ可能なおしゃれな切り替え式のタブデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

おしゃれなフリー素材デザイン集

本サイトでは、タブ以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

おしゃれな素材デザイン集

見出し
ボタン
ボックス
ローディング
リスト
吹き出し
アコーディオンメニュー
検索フォーム
セレクトボックス
パンくずリスト
テキストボックス
ツールチップ
Q&Aリスト
引用ボックス
レーダーチャート
「READ MORE」ボタン
タブボタン
トグルボタン
チェックボックス
フッター
付箋
ページネーション
円グラフ
ラジオボタン
目次
棒グラフ
モーダルウィンドウ
タイムライン（ステップバー）

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

切り替え式のタブ（ラジオボタン）

ここでは、以下の切り替え式のタブデザイン例を記載しています。

切り替え式のタブデザイン

シンプル
付箋風
下線あり
吹き出し風

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もタブページでは選択式でご用意しました。

調整項目一覧

タブの色
タブ文字の太さ：細め, 太め
付箋の色
下線の色
背景の色

ご興味があれば「タブ一覧ページ」を一読ください。

Code Stock

TAB | Code Stock By radio button ラジオボタンで作るタブタブ1 背景が単色のシンプルなタブです。タブの文言がはっきり見えるだけでなく、色を変えることでどんなサイトにも馴染みやすい…

シンプル

タブ1

背景が単色のシンプルなタブです。タブの文言がはっきり見えるだけでなく、色を変えることでどんなサイトにも馴染みやすいのが特徴です。

タブ2

ぜひお好みの色にアレンジしてみてください。

タブ3

もちろんレスポンシブ対応で、タブの追加にも対応しています。

HTMLコード表示

<div class="tab-1">
  <label>
    <input type="radio" name="tab-1-group" checked>
    タブ1
  </label>
  <div>
    背景が単色のシンプルなタブです。
    タブの文言がはっきり見えるだけでなく、色を変えることでどんなサイトにも馴染みやすいのが特徴です。
  </div>

  <label>
    <input type="radio" name="tab-1-group">
    タブ2
  </label>
  <div>ぜひお好みの色にアレンジしてみてください。</div>

  <label>
    <input type="radio" name="tab-1-group">
    タブ3
  </label>
  <div>もちろんレスポンシブ対応で、タブの追加にも対応しています。</div>
</div>

CSSコード表示

.tab-1 {
  display: flex;
  margin: 0 auto 2em;
  flex-wrap: wrap;
  gap: 0 10px;
  max-width: 500px;
}

.tab-1 > label {
  flex: 1 1;
  order: -1;
  opacity: .5;
  min-width: 70px;
  padding: .6em 1em;
  border-radius: 5px 5px 0 0;
  background-color: #2589d0;
  color: #fff;
  font-size: .9em;
  text-align: center;
  cursor: pointer;
}

.tab-1 > label:hover {
  opacity: .8;
}

.tab-1 input {
  display: none;
}

.tab-1 > div {
  display: none;
  width: 100%;
  padding: 1.5em 1em;
  background-color: #fff;
}

.tab-1 label:has(:checked) {
  opacity: 1;
}

.tab-1 label:has(:checked) + div {
  display: block;
}

付箋風

タブ1

上に枠線の付いたタブです。現在表示されているタブがどれなのか判別しやすいのが特徴。背景が白以外の箇所で利用するとよりおしゃれに見えます。

タブ2

ぜひお好みの色にアレンジしてみてください。

タブ3

もちろんレスポンシブ対応で、タブの追加にも対応しています。

HTMLコード表示

<div class="tab-2">
  <label>
    <input type="radio" name="tab-2-group" checked>
    タブ1
  </label>
  <div>
    上に枠線の付いたタブです。現在表示されているタブがどれなのか判別しやすいのが特徴。
    背景が白以外の箇所で利用するとよりおしゃれに見えます。
  </div>

  <label>
    <input type="radio" name="tab-2-group">
    タブ2
  </label>
  <div>ぜひお好みの色にアレンジしてみてください。</div>

  <label>
    <input type="radio" name="tab-2-group">
    タブ3
  </label>
  <div>もちろんレスポンシブ対応で、タブの追加にも対応しています。</div>
</div>

CSSコード表示

.tab-2 {
  display: flex;
  margin: 0 auto 2em;
  flex-wrap: wrap;
  max-width: 500px;
}

.tab-2 > label {
  flex: 1 1;
  order: -1;
  min-width: 70px;
  padding: .7em 1em .5em;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  background-color: #e9f0f6;
  color: #535353;
  font-size: .9em;
  text-align: center;
  cursor: pointer;
}

.tab-2 > label:hover {
  opacity: .8;
}

.tab-2 input {
  display: none;
}

.tab-2 > div {
  display: none;
  width: 100%;
  padding: 1.5em 1em;
  background-color: #fff;
}

.tab-2 label:has(:checked) {
  background-color: #fff;
  border-color: #2589d0 #f0f0f0 #fff;
  border-style: solid;
  border-width: 4px 1px 1px;
  border-radius: 5px;
  color: #333333;
}

.tab-2 label:has(:checked) + div {
  display: block;
}

下線あり

タブ1

アクティブになると下線が付くタブです。アクティブ時の文字色と下線の色は揃えるのがおすすめです。

タブ2

ぜひお好みの色にアレンジしてみてください。

タブ3

もちろんレスポンシブ対応で、タブの追加にも対応しています。

HTMLコード表示

<div class="tab-3">
  <label>
    <input type="radio" name="tab-3-group" checked>
    タブ1
  </label>
  <div>
    アクティブになると下線が付くタブです。アクティブ時の文字色と下線の色は揃えるのがおすすめです。
  </div>

  <label>
    <input type="radio" name="tab-3-group">
    タブ2
  </label>
  <div>ぜひお好みの色にアレンジしてみてください。</div>

  <label>
    <input type="radio" name="tab-3-group">
    タブ3
  </label>
  <div>もちろんレスポンシブ対応で、タブの追加にも対応しています。</div>
</div>

CSSコード表示

.tab-3 {
  display: flex;
  margin: 0 auto 2em;
  flex-wrap: wrap;
  max-width: 500px;
}

.tab-3 > label {
  flex: 1 1;
  order: -1;
  min-width: 70px;
  padding: .7em 1em .5em;
  background-color: #f2f2f2;
  color: #999;
  font-size: .9em;
  text-align: center;
  cursor: pointer;
}

.tab-3 > label:hover {
  opacity: .8;
}

.tab-3 input {
  display: none;
}

.tab-3 > div {
  display: none;
  width: 100%;
  padding: 1.5em 1em;
  background-color: #fff;
}

.tab-3 label:has(:checked) {
  border-bottom: 4px solid #2589d0;
  color: #333333;
}

.tab-3 label:has(:checked) + div {
  display: block;
}

吹き出し風

タブ1

アクティブになると吹き出しのように変化するタブ。タブの内容をより際立たせたい場合などにおすすめなデザインです。

タブ2

ぜひお好みの色にアレンジしてみてください。

タブ3

もちろんレスポンシブ対応で、タブの追加にも対応しています。

HTMLコード表示

<div class="tab-4">
  <label>
    <input type="radio" name="tab-4-group" checked>
    タブ1
  </label>
  <div>
    アクティブになると吹き出しのように変化するタブ。タブの内容をより際立たせたい場合などにおすすめなデザインです。
  </div>

  <label>
    <input type="radio" name="tab-4-group">
    タブ2
  </label>
  <div>ぜひお好みの色にアレンジしてみてください。</div>

  <label>
    <input type="radio" name="tab-4-group">
    タブ3
  </label>
  <div>もちろんレスポンシブ対応で、タブの追加にも対応しています。</div>
</div>

CSSコード表示

.tab-4 {
  display: flex;
  margin: 0 auto 2em;
  flex-wrap: wrap;
  max-width: 500px;
}

.tab-4 > label {
  flex: 1 1;
  order: -1;
  position: relative;
  min-width: 70px;
  padding: .7em 1em;
  background-color: #f2f2f2;
  color: #999;
  font-size: .9em;
  text-align: center;
  cursor: pointer;
}

.tab-4 > label:hover,
.tab-4 label:has(:checked) {
  background-color: #2589d0;
  color: #fff;
}

.tab-4 label:has(:checked)::before {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 9px;
  background-color: #2589d0;
  content: '';
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tab-4 input {
  display: none;
}

.tab-4 > div {
  display: none;
  width: 100%;
  padding: 1.5em 1em;
  background-color: #fff;
}

.tab-4 label:has(:checked) + div {
  display: block;
}