上部タブ型 タブ

通称：タブ切り替えHorizontal tabs

見本の中のメニューやボタンは押して動きを試せます（リンク先へは移動しません）。

横一列のタブを内容の上に置き、選んだタブに対応するパネルだけを見せます。1つの商品の仕様・価格・レビューのように、同じ対象を別の角度から説明する情報を、場所を取らずに収めたいときの基本の形です。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る 
# サイトの情報（ここを書き換える）
- どんなサイトか：〈例：工務店のサイト、税理士事務所のサイト、ネットショップ〉
- 入れたい文言・項目：〈見出し・ボタンの文言・項目の数など。決まっていなければ空けてよい〉
- 今あるページ：〈今のページを直すなら、その HTML を貼る。新しく作るなら空ける〉

# 部品の呼び名
一般に「タブ切り替え」（Horizontal tabs）と呼ばれる部品です。

# 作ってほしいもの
上部タブ型のタブ（Horizontal tabs）。内容の上にタブを横一列に並べ、押したタブの内容だけを下に表示する。

# 並べるもの
- タブ：4個を横一列に
- 内容：タブごとに見出し1つと本文・箇条書き。最初は1つ目のタブを表示する

# 守ってほしいこと
- タブの並びに role="tablist" と aria-label、各タブ（button 要素）に role="tab"・aria-selected・aria-controls、内容に role="tabpanel"・aria-labelledby を付ける
- Tab キーで止まるのは選択中のタブ1つだけにする（ほかのタブは tabindex="-1"）。← → で隣のタブへ、Home・End で最初と最後へ移り、移った時点で内容も切り替える
- 選ばれたタブは太字と下線（3px）で示す。マウスを重ねたときは薄い下線だけにして、選ばれた印と区別する
- タブの高さは 48px 以上。タブの下に全体の区切り線を引き、選ばれたタブの下線をその線に重ねる
- 購入や申し込みに欠かせない情報（価格など）は、タブの外にも書く

# SP（画面幅 599px 以下）
- タブは1行のまま、はみ出したぶんを横にスクロールできるようにする（折り返さない）
- 文字を少し小さくし、左右の余白を詰める

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 色は CSS 変数（--accent など）にまとめ、あとから変えやすくする
- 文言は「サイトの情報」に合わせて考える。決まっていないところは〈 〉で囲んだ仮の文言にする
- 「並べるもの」に書いた項目の名前（エリア・間取りなど）は一例。サイトに合うものに置き換える
- 今あるページを渡したときは、そのページの色・文字・余白に合わせ、変えた場所を最後に箇条書きで知らせる

タブを7つの型に分け、AIへの指示文・動く見本・コードを載せています。

タブはどの型を選ぶか

タブは、同じ場所で内容を入れ替えて、ページを短く保つための部品です。そのぶん、選ばれていないタブの中身は読まれにくくなります。型を選ぶ前に、入れ替える項目がいくつあるか、項目名の長さ、SP でどう見せるか、そして「1ページの中の切り替え」なのか「別のページへの移動」なのかを確かめます。

こんなとき 向いている型
同じ商品やサービスを、3〜5個の観点で説明したい上部タブ型
お店や施設の案内を、SP でも押しやすい4つのタブで見せたいアイコンつきタブ型
個人向け・法人向けのように、読み手の立場で内容が分かれるセグメント型
切り替える項目が5〜10個ある・項目名が長い縦タブ型
切り替えるたびに別のページ（URL）へ移るページ切り替えタブ型
お知らせの分類のように、短い名前のタブが8個以上ある横スクロールタブ型
PC ではタブにしたいが、SP の横幅に項目名が収まらないSPアコーディオン化型

選んだタブへ下線を動かす方法は、アニメーション集の部品の動き（タブの下線が追いかける）にあります。

ページ切り替えタブ型だけは、見た目がタブでも中身はリンクの並び（nav）です。ほかの6つはタブの役割（role="tablist" など）で組みます。

どの型でも守ること

  1. タブと内容を役割で結ぶ。並びに role="tablist"、各タブに role="tab" と aria-selected、内容に role="tabpanel" を付け、aria-controls と aria-labelledby で互いを指し合います。
  2. 矢印キーで移れるようにする。横並びなら ← →、縦並びなら ↑ ↓。Tab キーで止まるのは選択中のタブ1つだけにし、ほかのタブには tabindex="-1" を付けます。
  3. 選ばれたタブを、色だけでなく形でも示す。下線・塗り・太字のどれかを組み合わせます。
  4. 大事な情報をタブの奥に隠さない。価格・申し込みの条件・注意事項など、読み手が必ず知るべきことは、最初に見えるタブかタブの外に書きます。
  5. 押せる部分を 44px 角くらい取る。SP でタブを詰めて並べると、隣を押しやすくなります。

よくある質問 (FAQ)

横一列で並べるなら、SP の画面で4つほどに抑えます。何個まで入るかは項目名の文字数しだいなので、実際の文言を入れて 390px 前後の幅で確かめます。それより多いときは、縦タブ型か横スクロールタブ型にするか、SP だけアコーディオンに切り替えます。

1つずつ見れば足りるならタブ、いくつも開いて見比べたいならアコーディオンです。タブは常に1つだけを表示し、項目名を横に並べて見せられます。アコーディオンは縦に並ぶので、項目が多いときや SP でも項目名を省略せずに見せられます。

最初の HTML に書かれていれば、隠れているタブの中も読まれます。タブを押した時点で内容を取りに行く作りだと、クローラーがその文章を拾えない場合があります。ただし、読み手が見落としやすいことに変わりはないので、大事なことは最初に見える場所に書きます。

共有やブックマークでその内容を開かせたいなら、ページを分けてリンクにします。そのときはページ切り替えタブ型にし、role="tab" は付けません。1ページの中の切り替えのままにするなら、URL の末尾に # を付けて、開いたときにそのタブを選ぶ方法もあります。