AIでタブ切り替えUIを作る【CSS＋JS生成】

タブをクリックすると対応するコンテンツが切り替わるUI。料金プランや商品スペックの比較など、情報を整理して見せるのに便利です。

方法①：既存のHTMLからCSS・JSを生成する

AIへのプロンプト例

以下のタブUIのHTMLに対して、
・アクティブなタブが下線+色変わりになるCSS
・タブをクリックすると対応するコンテンツが表示されるJavaScript
を追加してください。

<div class="tabs">
  <ul class="tab-list">
    <li><button class="tab-btn active" data-tab="tab1">基本情報</button></li>
    <li><button class="tab-btn" data-tab="tab2">料金</button></li>
    <li><button class="tab-btn" data-tab="tab3">FAQ</button></li>
  </ul>
  <div class="tab-content active" id="tab1"><p>基本情報の内容</p></div>
  <div class="tab-content" id="tab2"><p>料金の内容</p></div>
  <div class="tab-content" id="tab3"><p>FAQの内容</p></div>
</div>

生成されたCSS例

.tab-list {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e8e8e8;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b6b6b;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.tab-btn.active {
  color: #3e8685;
  border-bottom-color: #3e8685;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

生成されたJS例

document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const targetId = btn.dataset.tab;

    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));

    btn.classList.add('active');
    document.getElementById(targetId).classList.add('active');
  });
});

方法②：HTMLとセットで生成する

AIへのプロンプト例

タブ切り替えUIをHTML・CSS・JavaScriptでゼロから作ってください。
タブは3つ（「概要」「機能」「料金」）。
アクティブタブはアンダーラインと色で強調。
コンテンツ切り替えはフェードアニメーションで。

ポイント

• data-tab属性でタブとコンテンツのIDを一致させるのがシンプルな設計です
• スマートフォンでタブが横スクロールできるようにしたい場合は「タブ部分をスクロール可能にして」と追加依頼できます