コピペで完結！タブ切替 #05【アイコン＋テキストのボタン型タブUI】

html/css/js
2025.10.05

アイコン＋テキストのボタン型タブUI

アイコンとテキストを組み合わせた、カード風デザインの水平タブUIを紹介します。 見た目はナビゲーションバーのように横並びで、クリックやキー操作で対応するパネルを切り替えられます。 ARIA属性やキーボード操作を実装しており、アクセシビリティにも配慮しています。

  • ボタン型のタブを横並びで配置
  • SVGアイコンとラベルを組み合わせて分かりやすく
  • ARIA対応＋キーボード操作（←/→/Home/End）を実装
  • CSS・JSはすべてセクションスコープで衝突防止
コードについて 本記事のコードは AI（ChatGPT）による生成をベースに作成・調整しています。ご利用の環境でテストの上ご使用ください。
免責 本コードの利用に伴う不具合・損害について、当サイトは責任を負いません。自己責任にてご利用ください。

デモ

ホーム

概要や最新情報を表示する想定のパネルです。レイアウトは自由に入れ替えてください。

コードをコピーして使おう！

/* ========== アイコン＋テキストの水平タブ：CSS（#your-tabs-01 にスコープ） ========== */
/* 1) まず親IDで作用範囲を限定し、他記事との衝突を防ぎます */
#your-tabs-01{
  --ink:#0f172a;              /* 文字の基本色（濃い紺色系） */
  --muted:#64748b;            /* 補助テキスト用の控えめな色 */
  --accent:#0b6bff;           /* 強調色（フォーカス・選択時の枠や影に使用） */
  --border:#e5e7eb;           /* 境界線・ボーダー色（薄いグレー） */
  --tab-bg:#f8fafc;           /* タブバーの背景色（淡いグレー） */
  --bg:#fff;                  /* 全体背景の基本色（白） */

  border:1px solid var(--border); /* コンポーネント全体の外枠線を表示 */
  border-radius:14px;             /* 外枠を角丸にして柔らかい印象に */
  overflow:clip;                  /* 角丸外にはみ出す子要素を切り落とす（モダンな overflow 指定） */
  background:var(--bg);           /* 全体背景色（白） */
}

/* 2) タブバー */
/* タブボタンを横一列に並べ、背景色と下罫線で領域を分けます。 */
#your-tabs-01 .tablist{
  display:flex;                           /* 子要素（タブ）を横並びにする */
  gap:8px;                                /* タブ同士の間隔を 8px 確保 */
  padding:10px;                           /* タブバー内側の余白（上下左右） */
  background:var(--tab-bg);               /* タブバーの背景色（淡いグレー） */
  border-bottom:1px solid var(--border);  /* タブバー下に境界線を引く */
  align-items:center;                     /* ボタンの高さが異なる場合でも垂直中央に揃える */
  overflow:auto;                          /* タブが多い場合に横スクロールを可能にする */
}

/* 3) タブ */
/* アイコン＋ラベルを横並びで見やすく配置し、キーボード・マウス両方で操作しやすい見た目にします。 */
#your-tabs-01 .tab{
  appearance:none;                                              /* ブラウザ標準ボタンの見た目を打ち消す */
  display:inline-flex;                                          /* インライン要素として横並びしつつ、内部はフレックスで配置 */
  align-items:center;                                           /* アイコンとテキストを縦方向中央に配置 */
  gap:8px;                                                      /* アイコンとラベルの間隔を 8px に */
  background:#fff;                                              /* 通常時の背景は白 */
  color:var(--ink);                                             /* 文字色は基本色 */
  border:1px solid var(--border);                               /* 薄い枠線でボタン形状を明確に */
  border-radius:12px;                                           /* ボタンの角丸 */
  padding:8px 12px;                                             /* クリックしやすい内側余白 */
  font-size:13px;                                               /* タブの文字サイズ */
  line-height:1;                                                /* 行の高さ（詰め気味にしてアイコンと揃える） */
  cursor:pointer;                                               /* ホバー時にポインタを表示 */
  transition: box-shadow .15s ease,                             /* フォーカス時の影変化をなめらかに */
              border-color .15s ease,                           /* ボーダー色の変化をなめらかに */
              background-color .15s ease;                       /* 背景色の変化をなめらかに */
  white-space:nowrap;                                           /* タブ内の改行を防いで1行に収める */
}

/* 選択状態のタブ（aria-selected="true"） */
/* 選択されていることがひと目で分かるよう、枠・影・色で強調します。 */
#your-tabs-01 .tab[aria-selected="true"]{
  background:#fff;                                              /* 背景はそのまま白（カード感を維持） */
  border-color:var(--accent);                                   /* アクセント色で枠線を強調 */
  box-shadow:0 0 0 3px rgba(11,107,255,.12);                    /* 薄いブルーの外側シャドウで選択リング表現 */
  color:#0b3a9b;                                                /* 文字色を少し濃い青にして選択を強調 */
}

/* キーボードフォーカスが当たったときの見た目（アクセシビリティ） */
#your-tabs-01 .tab:focus-visible{
  outline:none;                                                 /* 既定のアウトラインは消す */
  box-shadow:0 0 0 3px rgba(11,107,255,.2);                     /* 濃いめのフォーカスリングを表示 */
  border-color:var(--accent);                                   /* フォーカス時は枠線もアクセント色に */
}

/* タブ内のアイコン領域 */
/* SVGやimgを 18×18 に揃える。flex:0 0 auto; で縮まない固定サイズ扱い。 */
#your-tabs-01 .tab .ico{
  width:18px;                                                   /* アイコンの幅 */
  height:18px;                                                  /* アイコンの高さ */
  display:inline-block;                                         /* 横並び内でのブロック表示 */
  flex:0 0 auto;                                                /* 伸縮させず固定サイズのままにする */
}

/* タブ内のラベル（テキスト） */
#your-tabs-01 .tab .label{
  font-weight:600;                                              /* 少し太字で視認性を上げる */
  letter-spacing:.01em;                                         /* わずかに字間を空けて読みやすく */
}

/* 4) パネル */
/* 初期は非表示、選択中だけ表示。余白と行間で本文を読みやすく整えます。 */
#your-tabs-01 .panel{
  display:none;                                                 /* デフォルトは非表示 */
  padding:18px 18px 22px;                                       /* タブ下の内容領域の内側余白 */
  font-size:14px;                                               /* 本文の文字サイズ */
  line-height:1.85;                                             /* 読みやすい行間 */
  color:#0f172a;                                                /* 本文色（インク） */
}

/* 選択中のパネル（JS などで aria-hidden="false" を付与する想定） */
#your-tabs-01 .panel[aria-hidden="false"]{
  display:block;                                                /* 選択中だけ表示に切り替える */
}

/* 5) 例：カード風 */
/* パネル内部に配置するカードUIの基本スタイル例です。 */
#your-tabs-01 .card{
  border:1px solid var(--border);                               /* 薄い枠線で区切る */
  border-radius:12px;                                           /* 角丸で柔らかい見た目に */
  padding:14px;                                                 /* 内側余白 */
  background:#fff;                                              /* 背景は白（影や段差感は未付与） */
}

/* カード内タイトル */
#your-tabs-01 .card h3{
  margin:2px 0 8px;                                             /* 上2px・下8pxの余白を設定 */
  font-size:16px;                                               /* 小見出しサイズ */
}

/* 補助テキスト（説明や注釈） */
#your-tabs-01 .muted{
  color:var(--muted);                                           /* 控えめカラーで主文とのコントラストを付ける */
  font-size:13px;                                               /* 本文よりやや小さめ */
}

コメント