やってみよう上の「おすすめ・フォロー中・ニュース」を押してみてください
ナビゲーションメジャー（よく見る）
タブ（上部タブ）
Tabs / Top Tab Bar
上に並んだ見出しを押すと、下線がスッと移動して、下の中身が切り替わる。
別名トップタブタブメニュータブ切り替えTab Bar（上）
どこで使われている？
- よく見かける場所
- X（おすすめ／フォロー中）、YouTube、ネット通販の商品詳細
- 使うとよい場面
- 同じ画面の中で、内容をいくつかの種類に分けて切り替えるとき
- 避けたい場面
- アプリ全体の行き来（画面の下のタブバーにする）
補足画面の下に並ぶものは「タブバー」、同じ画面の表示方法を切り替える小さなものは「セグメントコントロール」です。
似ているものとの違い
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「タブ（上部タブ）（Tabs / Top Tab Bar）」を実装してください。 動き：画面上部に2〜5個の見出しを横に並べ、選ばれている見出しの下に線を表示する。別の見出しを押すと下線がスライドして移動し、下の中身がそのタブの内容に切り替わる。中身を左右にスワイプしても切り替えられる。 使う部品：Tabs（role="tablist" で自作）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Tabs（role="tablist" で自作） |
|---|---|
| iPhoneアプリなら | 標準部品なし。自作（似たものは Picker の .segmented） |
| Androidアプリなら | PrimaryTabRow + HorizontalPager |
| Flutterなら | TabBar + TabBarView |
| React Nativeなら | Material Top Tabs Navigator（React Navigation） |